Building Store Pages

By adding a store to the project a new page called Store will automatically be added to your project.
You will not be able to change anything on this page.
However, you can use any other page to add a catalog widget on it among other elements.

You have a possibility to use two types of store widgets: Store Product and Store Catalog.

Store Catalog

Includes all products of a selected category or from all categories that will be displayed on a page. 
Settings of the catalog can be set in the toolbar by clicking the “Edit” button on the hover element.

Store Catalog settings

  • Layout
    • Category: You can select what category will be included in the catalog widget
    • Button action: "Buy now" button can add a product to the cart or open the product page
    • Products per row: The number of products in one row of the catalog grid
    • Total rows: Set the number of rows per page

  • View

    • SKU: You can choose if SKU should be displayed in the catalog grid
    • Price: Determine if the price should be displayed in the catalog grid
    • Buy Now button: Choose if the Buy Now button should be displayed in the catalog grid
    • Image aspect ratio: Set the desired image aspect ratio
    • An additional image on hover: If "Hover effects" is enabled you can set additional image from the product gallery to be displayed when hovering over the product card

  • Design
    • Style: Select a preferable design for the catalog
    • Product list cell spacing: Set the spacing between items in the catalog grid

Store Product Widget

The product widget represents a single selected product on a page. It can be dragged-and-dropped as any other regular widget from the feature sidebar.

To edit product settings hover over the product widget and click “Edit”. In the toolbar, you will be able to select a product to display and manage the view of the widget like you did in the Store Catalog.