Catalog in Mobile Editor

Please Note: This article applies to Free Trial accounts created on or after 16 December 2024 and Website, Website+Marketing and eCommerce packages created on or after 18 December 2024. If your accounts were created before these dates, please refer to the Elements Management in Mobile Editor article.

What is Catalog?

With the Catalog element, you can add a Product Сatalog to the website page and select a category it will display.

Please Note: There is a limit of five Catalog Elements per page. The Catalog added to the website will be automatically removed after you disable the store.

Adding Catalog

Adding elements is currently unavailable within the New Grid functionality on Mobile Editor. You can only edit, move, and delete existing elements. Please switch to a desktop version to be able to add new elements.

Resizing Catalog

Please refer to the Elements Management in Mobile Editor (New Grid) article to learn more resizing elements.

Customizing Catalog

To edit, duplicate, layer or delete the element, tap on it and switch between the buttons that appears in its toolbar:

Editing Catalog

Tap on the element and choose the Edit button that appears in its toolbar:

Switch between Layout, View and Design tabs to modify the element:

Layout Tab

Layout Type. Select the Catalog Layout among Grid, List, or Masonry:

Category. Select the categories to display from the drop-down.

Please Note: You can select more than one category to display in a Catalog Element.

Sort by. Choose the default sorting order for products from the drop-down: Newest, Oldest, Price: High to low, Price: Low to high, Featured first, Name: A-Z, Name: Z-A.
Total Rows. Select how many rows will be presented in the catalog.
Products Per Row. Use Slider to set how many products will be presented in each row.
Margin. Set the outer spacing for the catalog.
Products Spacing. Set the spacing between items in the catalog grid (inner spacing):

View Tab

Enable the toggle to add a Title to the catalog and add the Title in the input field.
Select the position of the Title (On Top, At the Bottom, Card).
Choose the image aspect ratio from the drop-down.

Please Note: The Image Aspect Ratio settings are not presented for Masonry format.

Switches

Configure the data on the product cards by turning on/off the following switches:

Banner. Turn on the Banner toggle to enable the Banner for the product.
Badges. Turn on the Badges toggle to enable the On Sale, Sold Out, Few Left, and Digital badges for your Online Store.

On Sale. If the product is on Sale, its price changes, and the relevant information and badge are displayed.
Sold Out. If no items are left, the Add to Cart button will be hidden, and the Sold Out badge will be placed first (if there is no On Sale badge).
Few Left. The Few Left badge automatically shows when less than ten items are in stock.
Digital. You can set this badge to show that the product is digital and that there are no shipping options.

Product Name. The information will be displayed from the Ecomdash dashboard.
SKU. This will load in your SKU set from the Product Details screen. If you want to track this under a different ID, you can change it in the Ecomdash dashboard.
Price. The information will be displayed from the Ecomdash dashboard.
Excerpt (short description of the product). The information will be displayed from the Ecomdash dashboard.

Buttons

The Button settings include several options:

Turn Off Button. Turn on the toggle to show the Button on a product card. Turn off the toggle to disable Button and remove it from the card.
Button Text. Specify the text that will appear on the Button:
Full-Width. Switch the Full-Width toggle on to stretch the Button across the entire width of the card.
On Click Event. Choose the following action from the drop-down: Buy Now, Add to Cart, Open Product Page.

Buy Now: Opens a cart with added product.
Add to Cart: Adds a product to cart.
Open Product Page: Opens the Product Page with details.

Please Note: Clicking on a card (for example, on a photo) will open the Product Page.

Design Tab

Catalog Background. Set the background color of the Catalog by clicking the Square icon on the right.
Catalog Border. Change the value in the Slide Control to set the Catalog border width and select the color by clicking the Square icon on the right to Slide Control.

Please Note: If the value on the Slider Control is set to zero, the Border element is disabled.

Card Background. Set the background color of the product card by clicking the Square icon on the right.
Card Border. Change the value in the Slide Control to set the border width, and select the color by clicking the Square icon on the right to Slide Control:

Please Note: If the value on the Slider Control is set to zero, the Border element is disabled.

Hover Effects. Hover Effects add dynamic visual effects to the website. It helps to create more engaging and modern experiences for visitors. Enable the toggle and choose among the following options: Show Additional Images, Highlight Border, Highlight Background, Highlight Shadow.

Duplicating Elements

To duplicate the element, tap on it and choose the Duplicate button that appears in its toolbar:

The duplicate of the element will appear immediately:

Moving Elements

To move an element:

Select an element you want to move by clicking on it and choose the Move Above or Move Below buttons that appear in its toolbar:

The element will be moved to a new place. The component takes on the size of the selected placeholder.

Layering Catalog

To layer elements within Mobile Editor, follow these steps:

Add a new element over the existing one. The newly added element will be on the top layer:

Click on the element and select Move Forward or Move Backward options:

Please Note: The Move Forward or Move Backward options are available only when one element is added on top of another.

Deleting Elements

To delete an element, tap on it and choose the Remove button [Bin] that appears in its toolbar:

The element will be immediately removed.