-
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 - product card. It provides flexible design customization and advanced content
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: set up alignment, positioning, product name padding
Images
Structure, block ratio options, image ratio options, cropping, corner radius, mobile images optimisation and interaction
1. Image structure
There are 4 variants of image structure. On the video above you can see how the product card design is changing in every variant.
P.S.: In the last variant the right part of the card (with text) moves down while scrolling (it is not visible in edit mode)
P.S.: 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 so that all the important info could be seen with the naked eye
3. Adjusting corner radius. Mobile images and interaction
Images on mobile devices will be displayed according to the selected settings: fitting to the width of the information or 100% of the screen (see below)
to the 100% of the screen
to the info width
SKU and availability
Settings include details of displaying SKU and availability, their fonts and paddings. At the availability settings you can switch on the "indicator of availability" and set up the text that appears when product is not in stock.
Quantity
Customize quantity block: choose color, width, corner radius and paddings
There are 2 variants of quantity block: "+" and "-" buttons or input field. It is possible to enter the quantity either using the buttons or using the keyboard. Flexible design settings allow you to use quantity input field in any product card - it will look perfectly everywhere.
Product characteristics and images depend on the chosen variant
It is possible to set up different product variants: size, color, etc. Every variant is able to have its own price, SKU and image
There are 3 types of displaying product variants: dropdown list, dropdown list with stroke or to show everything at once. It is possible to customize all 3 types: you can set up background color, text color, size, spacing and padding
You can set up several product options at the "Price" block
Price
Add price for every product variant. Show old and current price
2 variants of displaying price: in front of quantity or in separate line. Old price can be adjusted in the "Add product" mode in the "Price" block
Adding to cart
Inform clients about the content of their cart in one of two of possible ways:
Flexible design settings
1. In pop-up:
2. In sidebar:
Quick Buy
There are 2 types of 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 fields of Quick Buy advanced form in "Add product" mode at "Forms" block
Flexible settings of advanced form design
Characteristics
Characteristics are product parameters. They allow to filter the goods. They are displayed in product card. For instance, caloric values, sugar content
On the screencast above – "low" calories and "mild" spicy are given as an example of characteristics.
Open "Settings" - "Online store" - "Characteristics" to create parameters
Open "Settings" - "Online store" - "Characteristics" to create parameters
To display created characteristics in card, enter the "Add product" mode and in the "Characteristics" block, select the appropriate one for this product. It must 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
At the "Add product" and "Edit product" mode open the "Benefits". At the bottom of the page add appropriate tags. To the right of tags at the field "link" write down correlated links - it will make easier to search 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 to find products you liked more quickly. It is located at the right top image corner.
Slide-out panel
Slide-out panel appears while viewing a long product card after scrolling down the screen on desktop. Panel is not shown on mobile
«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 needed information about product without any fear of burdening 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
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
