Товар добавлен в корзину
Оформить заказ

Смотрите также
from
Creating product cards 
in online store
Find out more about inlays, image cliparts, tabs, tags, recommendations and other opportunities to make perfect product cards
  • Product name
  • Images
  • SKU
  • Inventory
  • Quantity
  • Product variants
  • Display image depending on the product variant
  • Old/current price
  • Add to Cart button
  • Express checkout
  • Details
  • Image clipart
  • Tags
  • Product benefits
  • Favourites
  • Overlay 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 corresponds to a separate page - product card. It provides flexible design customization and advanced content
Image clipart
Product name
Артикул
Price
Product variants
Quantity
Buttons
Details
Description
Additional info
Tags
Benefits
Advanced description made of blocks
"Related products" block
Availibility
Advanced description made of blocks
Выезжающая панель
Выезжающая панель
Название товара
Артикул
Цена
Наличие
Варианты товара
Количество
Кнопки
Параметры
Описание
Преимущества
Теги
Доп. информация
Расширенное описание из блоков
Расширенное описание из блоков
Блок «Смотрите также»
Бейдж
Product name
Product name customization: center or left alignment, above the image or to the right of it, product name padding 

Images
Structure, block ratio options, image ratio options, cropping, adjusting the radius of corners, mobile images and interaction
1. Image structure
There are 4 variants of image structure. On the video above you can see how the product card appearance is changing with 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)
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 the radius of corners. 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 available. 
Quantity
Customize the quantity block: choose the colour, 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 variants and image display that depends on the chosen variant
It is possible to set up different product variants: size, colour, etc. Every variant is able to have its own price, SKU and image
There are 3 types of displaying product variants: a dropdown list, a dropdown list with a stroke or to show everything at once.  It is possible to customize all 3 types: you can set up background colour, text colour, spacings and paddings, size
You can set up these types of displaying product variants at the block "Price"
Price
Add price for every product variant.  Enter 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 block "Price"
Adding to cart
It is possible to inform clients about the content of their cart in 2 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 the "Add product" mode at the "Forms" block
Flexible settings of advanced form design
Details
Details are product characteristics. They allow to filter the goods. They are displayed in product card. For instance, caloric values, sugar content
On the screencast above – "caloric values" and "composition" are given as an example of details.
Open "Settings" - "Online store" - "Details" to create details
To display created details in the card, enter the "Add product" mode and in the "Details" block, select the appropriate one for this product. It must be done for each item individually.
Параметры
Параметры
Product badge
Highlight important information with a badge. 
Flexible location settings
To add a badge, go to the "Add product" mode - "Benefits" block - "Product badge"
Tags
Tags help to find a product by its characteristics. There is an example below: there are tags "sugar free", "box", "new". Tags are clickable and they lead to the page with 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 searching products easier
Tags
Теги
Benefits block
Highlight the most important. 
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 computers. Panel is not shown on mobiles 
«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
Описание
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
Quick and free start
You are signing up, creating an online store, we are helping you