Catalog Feature

Catalog allows you to put  Catalog Feature on the page and select a category to display in this catalog.

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

Hover over the  Catalog Feature and 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 of 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.

Related Articles