Sections with products

To add a new section with products, click on the plus icon under any section. If the page is blank, the plus icon will be in the screen center.

Go to the Products tab.

Select one of the templates. Hover over the added section and click on the gear icon.

It opens the section settings menu with 4 tabs: 

— Products

— Section

— Card

— Background

NOTE: You can only set up the look of the product cards and categories from the section menu. To add products and categories, go to the Products tab on the upper panel. The product section can only contain products that you've added to the catalog before.

There are three ways to display your products on the page. Choose one that suits best.

1. All categories: The section displays all the categories that you have added to the catalog.

2. Selected categories: You can tick any combination of categories that you want to show in the section. To change the order of categories, drag and drop them right in the menu by clicking on the dots icon to left of the category name.

3. All products: The section will display all the products from the catalog, without grouping them into categories.

Settings in this tab affect the whole section.

Full-screen mode means that the section will take the whole screen, its height will adopt to screen sizes of different devices.

Don't forget to set the minimum indent to the section below. This will come in handy if the section content doesn't fit in the user's screen.

If the Full-screen mode remains disabled, then the section height will depend on the height of the content within and set-up indents.

Use the Section title toggle to show or hide the title. To align the title, go to the Settings.

Categories setting is active, if you've chosen to show All categories or Selected categories.

Go to the Categories settings to customize the look of category tabs: their style, shape and size, alignment, font weight, and element color. You can also turn on the toggle to hide the tab for a single category.

Back in the Section menu, you can select the number of cards per row, set up spacing between them and specify the content width in the section.

You can also choose the type of navigation between cards in the section and style it.

All the products that don't fit into the section (i.e. exceed the Number of products on page), will be displayed by clicking the More button or going to the page number.

Click on the Mobile phones icon to see how the products section will look on smartphones.

Here you can customize the look of product cards.

You can use any color for the background, upload an image or a video. Select the Background color in the color picker.