Collection tabs
Create a layout with multiple tabs that can be clicked to browse different collections.
Collection tabs
This section contains the "Collection" block. Tip: Press "Add block" to use the "Collection" block. Each block can be added individually and customized in different ways.
Heading
Size The title size can be changed in the drop-down to "Small", "Medium", or "Large".
Color Change the title color using the picker. Paste the hex code into the related field or select the color using the paint palette. The color setting is applied to all screen sizes.
Description
Color Set the color to colorize the collection description. The color setting is applied to all screen sizes.
Content
Products per row The number of products displayed per row can be set to 2, 4, or 6.
Set item count manually Enable this option to manually specify the number of products displayed instead of using the automatically generated amount.
Maximum number of products Set the maximum number of products to display. It can be changed from 2 to 12 items.
Product cards
Note! The settings described below are applied to all "Collection" blocks in the section.
Image ratio Choose the appropriate aspect ratio of product cards. You can use one of the options that display well on all screen sizes: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". You can check the image ratios here.
Show secondary image on hover Enable the option to show the second product image when the product card is hovered over.
Content alignment Use the picker to decide whether to display the product information below the product card on the "Left", "Center", or "Right" side.
Show vendor Display a brand for each product card.
Buttons layout Select the corresponding option in the picker: "Icon with text", "Icon only", or "Add to cart below". Select the "Use theme settings" option to apply the global settings. Read the options' descriptions here.
View all button
Show Enable the option to display the "View All" button if a collection contains more products than are displayed in the column. The related settings are expanded when the option is enabled.
Style Change the button design by selecting one of the options in the drop-down: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following help page. Each button style can be viewed on the following help page.
Color Applies color settings according to the selected button style:
"Primary". Changes the button background color.
"Secondary". Colorizes the text and border.
"Link style". Changes the text color.
Layout options
Layout Change the "Header" content group position using the picker:
"Split". Puts the "Header" group in the content grid while keeping it on the right.
"Stacked". Displays title elements above the media content and aligns them to the left.
"Centered". Shows the centered title elements above the media content.
Mobile alignment Align the elements from the "Header" content group using one of the options:
"Auto". Uses the setting applied in the "Layout".
"Left". Displays content on the left. Note! The call-to-action button displays in full width on mobile by default.
"Center". Centers content. Note! The call-to-action button displays in full width on mobile by default.
Use swipe on mobile Enable this option to add a scrollbar on mobile devices instead of displaying content in a grid.
Dividing line Add a divider by setting its position: "Top", "Bottom", or "Both". Select "None" to hide the divider.
Top spacing / Bottom spacing Decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.
Transparent header
Allows the header to overlay the section when a transparent header is used.
Use inverted header colors Enable the option to link the color of the Header elements, such as navigation menus, Search, Compare, Account, and Cart icons, with the "Background" item under Theme settings -> Colors -> Primary colors. If the option is disabled, the color of the Header elements is related to the "Base" item.
Collection
Collection Set the required collection by pressing the "Select" button.
Use recently viewed products If the option is enabled, the current collection will be replaced with products that the visitor has recently viewed.
Title Replace the default collection title with the custom one using the field.
Description Use the input field to add accompanying text to the section title.
Last updated