-
Product name
-
Images
-
SKU
-
Inventory
-
Quantity
-
Product variants
-
Images depending on the product variant
-
Old/current price
-
Add to Cart button
-
Quick Buy
-
Characteristics
-
Product badges
-
Tags
-
Product benefits
-
Favourites
-
Slide-out menu
-
«Related products»
-
«Related products» after adding to cart
-
Additional info
-
Description
-
Advanced description
Product card is the most important thing that exists in online stores
Each product has its individual page - a product card - that offers flexible design customization and advanced content options
Product badge
Product name
SKU
Price
Product variants
Quantity
Buttons
Characteristics
Description
Additional info
Tags
Benefits
"Related products" block
Availibility
Advanced description made of blocks
Slide-out menu
Slide-out menu
Product name
SKU
Price
Availibility
Product variants
Quantity
Buttons
Characteristics
Description
Benefits
Tags
Additional info
Advanced description made of blocks
"Related products" block
Badge
Product name
Product name customization includes options to set up alignment, positioning, and product name padding
Images
Structure, block ratio options, image ratio options, cropping, corner radius, mobile images optimisation and interaction
1. Image structure
There are four variants of image structure. In the video above, you can see how the product card design changes in each variant.
PS In the last variant, the right part of the card (with text) moves down while scrolling (it is not visible in edit mode).
PS In the last variant, the right part of the card (with text) moves down while scrolling (it is not visible in edit mode).
2. Block ratio options, image ratio options, cropping
Set up image and block radio options to ensure that all the important information is easily visible.
3. Adjusting corner radius. Mobile images and interaction
Images on mobile devices will be displayed based on the selected settings: either fitting to the width of the information or taking up 100% of the screen (as shown below).
100% of the screen
info width
SKU and availability
The settings include details for displaying SKU and availability, such as their fonts and paddings. In the availability settings, you can switch on the 'indicator of availability' and set up the text that appears when a product is not in stock
Quantity
Customize quantity block: choose color, width, corner radius and paddings
There are 2 variants of the quantity block: '+' and '-' buttons or an input field. It is possible to enter the quantity either using the buttons or using the keyboard. Flexible design settings allow you to use the quantity input field in any product card, and it will look perfect everywhere.
Product characteristics and images
adjust based on the chosen variant
adjust based on the chosen variant
You can set up different product variants such as size, color, and more. Each variant can have its own unique price, SKU, and image
There are three types of displaying product variants: dropdown list, dropdown list with a stroke, or showing all options at once. You can customize all three types by adjusting the background color, text color, size, spacing, and padding.
You can set up product variants at the 'Price' block
Price
Add price for every product variant. Show old and current price
There are two variants of displaying the price: in front of the quantity or in a separate line. The old price can be adjusted in the 'Add product' mode within the 'Price' block.
Adding to cart
Inform clients about the content of their cart in one of two possible ways:
Flexible design settings
1. In pop-up:
2. In sidebar:
Quick Buy
There are 2 types of the Quick Buy: simple form and advanced form
Flexible settings of the form fields and button design
1. Simple form
2. Advanced form
You can set up the fields of the Quick Buy advanced form in the "Add product" mode within the "Forms" block
Flexible settings of advanced form design
Characteristics
Characteristics are product parameters that provide the ability to filter goods and are displayed in the product card. They can include various details such as caloric values, sugar content etc.
On the screenshot above, 'low' calories and 'mild' spiciness are given as examples of characteristics.
Open 'Settings' - 'Online store' - 'Characteristics' to create parameters
Open 'Settings' - 'Online store' - 'Characteristics' to create parameters
To display created characteristics in the product card, enter the 'Add product' mode and in the 'Characteristics' block, select the appropriate characteristic for that particular product. This needs to be done for each item individually.
Characteristics
Characteristics
Product badge
Highlight important information with a badge.
Flexible position settings
Flexible position settings
To add a badge, go to the 'Add product' mode - 'Benefits' block - 'Product badge'
Tags
Tags help to find product by its characteristics. There is an example below: there are tags "mild", "new". Tags are clickable and they lead to the page of products with the same tag
In the "Add product" and "Edit product" modes, open the "Benefits" section. At the bottom of the page, add relevant tags. In the field "link" located to the right of the tags, enter related links. This will make it easier to search for products.
Tags
Tags
Benefits block
Highlight the most important.
You can set up benefits in 'edit design' mode
You can set up benefits in 'edit design' mode
Adding to favourites
Allows customers to find their preferred products more quickly. It is located in the top right corner of the product image
Slide-out panel
A slide-out panel appears when viewing a long product card on a desktop screen after scrolling down. The panel is not displayed on mobile devices
«Related products» block in 2 variants
In every product card it is possible to choose items that will be shown as related products
At the sidebar
2. 'Related products' block that appears after adding item to the cart
1. 'Related products' block under the information about the main product
In pop-up
Additional info
Add all the necessary information about the product without worrying about overloading the product card
You can set up additional info in the 'Add product' mode in the 'Description' block at the bottom of the page. It is possible to add up to 4 additional information blocks
Description
Describe the main product characteristics
You can set up description (short description) at the 'Add product'
mode in the 'Description' block
mode in the 'Description' block
Description
Description
Advanced description
Create advanced product description using the block editor
You can set up advanced description at the 'Add product' mode in the 'Full description' block. Add any ready-made blocks or create a unique design in a Flexible Block mode