Setting up a section 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.


(тут будет скрин, где выбрать нужную секцию)

Then select the Products section template.

To set up the section and add some products, click on the shopping bag icon with No products caption.

It opens the section settings menu with 4 tabs: Products, Section, Card, and Background.

Products

NOTE: You can only set up the look of the product cards and the section. To add products and categories, go to the Products tab on the upper panel. The section contains only those products that you have 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.

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

Section

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 the 

content within and set-up indents.

Section title: turn this toggle to show or hide the title. To align the title, go to the Settings.

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

Here you can 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 in a 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.

Card

In the Card tab, select the card orientation: vertical or horizontal.

The orientation is set for all cards in the section. Use different sections to make the part of the cards vertical and the other horizontal.

Card elements allow you to add, set up, reorder and remove elements of a product card.

Go to the Image settings to set up the look of a single image or image slider, pagination and action on click.

Select a font, text color and top padding for the Name element.

Set up the way the Options of a product are displayed.

Click on the + Add element button to choose from the list of elements that can be used only in the product card: article, availability, price, button, price in the button, button next to the price, button and availability, divider.

You can also specify padding, colors, effects on hover — everything that concerns the card look. 

Learn how to set up a product card.

Background

You can use any color for the background, upload an image or a video. To select the background color, use the color picker.