Catalog Feature in Mobile Editor

You can add a Catalog Feature on a page and select a category to display in this catalog.

Please Note: There is a limit of one Catalog Feature per page.

Click on the Catalog Feature and then click Edit to configure the Catalog settings:

Layout

Layout settings of the Catalog Feature include the following items:

  • Category. Select the category to display from the drop-down:

  • Sort by.

Choose the default sorting order for products:

  • Newest
  • Oldest
  • Price: High to low
  • Price: Low to high
  • Featured first (You will see the products in the same order as in the Store → Product sidebar)
  • Name: A-Z
  • Name: Z-A

  • Products Per Row. Use Slider to set how many products will be presented in each row:

  • Total Rows. Select how many rows will be presented in the catalog:

  • Margin. Set the outer spacing for the catalog:

  • Products Spacing. Set the spacing between items in the catalog grid (inner spacing):

View

View settings allow configuring the following options:

  • Image Aspect Ratio. Choose image aspect ratio for product cards:

  • Switches. Configure what data will be displayed on the product cards:
    • Product Badges. Turn on the Badges toggle to enable the On Sale, Sold Out, and Few Left badges for your Online Store.
    • Product Name.
    • SKU.
    • Price.
    • Excerpt (short description of the product).

Please Note: The Few Left badge automatically shows when less than ten items are in stock.

The data is taken directly from your store.

Button Settings

Button settings include several options:

  • Toggle to Show/Hide Button. Turn on the toggle to show the Button on a product card. Turn off the toggle to disable the Button and remove it from the card:

  • Button Text. Specify the text that will appear on the Button:

  • Button Width. Turn on the toggle to stretch the button for the entire available width of the card:

  • Button On-Click Action: Choose which action should be performed when you click on the button.
  • Buy Now: Opens cart with product added.
  • Add to Cart: Adds a product to the cart.
  • Open Product Page: Opens product page with product details.

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

Design

  • Catalog Background. Set the background color of the catalog by clicking the Color square:

  • Catalog Border. Adjust the color and size of the border around the catalog:

  • Card Background. Click the Color square to set the background color of the product card:

  • Card Border. Configure the color and size of the border around the product card:

  • Hover Effects

Set the effect when you hover the mouse over the product card, the following options are available:

  • Show Additional Images.
  • Highlight Border.
  • Highlight Background.
  • Highlight Shadow.
  • If the toggle is turned off, no effects are applied.