Featured collection tabs
With this section, you can create a layout with multiple tabs that can be clicked to browse different collections.
Featured collection tabs
Heading
The title size of collections can be changed in the "Size" picker to "Small", "Medium", or "Large".
If you need to change the title color of all collections, use the "Color" picker. Here you can paste the hex code into the related field or select the color using the paint palette. The color settings will be used for both desktop and mobile.
Description
The color of a collection description can be set in the "Color" picker. The color you apply to the item will be used for both desktop and mobile.
Content
The number of products per row can be set in the "Products in row" picker. Decide whether to display 2, 4, or 6 items in each row.
To control the number of products displayed in the section, use the "Maximum products to show" scale. It can be changed from 2 to 12 items.
Enable swipe on mobile
Check the box to add scrollbars instead of displaying the list of brands on mobile view.
Product card
Choose the appropriate aspect ratio of the product images in the "Image ratio". You can use one of the options that display well on both desktop and mobile views: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Check each image ratio here.
Show second image on hover
Use the option to display a second product image when hovering over the product card.
Use the "Information align" drop-down to decide whether to display the product information below the product card on the "Left", "Center", or "Right" side.
Tip: Product details will be displayed for each product with the configured settings in your Shopify admin -> Products. Read more about setting up products and collections in the admin here.
Buttons layout
Note! The "Add to Cart" button ("Pre-order" button), "Quick View" button, and "Quantity selector" should be activated individually in the current section to display for product cards on the entire store.
In the "Buttons layout" drop-down, select the option that fits your store design:
"Use global settings". Apply the option if you want to use the settings configured in Theme settings -> Product cards.
"Icon with text". The "Add to Cart"/"Pre-order" and "Quick View" buttons appear as overlays on the product card after hovering over it, with "Quick View" positioned below "Add to Cart"/"Pre-order" by default. The option is designed to display text for an inactive button and an icon with text when hovering over the "Add to Cart"/"Pre-order" or "Quick View" buttons. On mobile devices, both buttons remain hidden.
"Icon only". This option displays only the icons for "Add to Cart"/"Pre-order" and "Quick View" when hovering over a product card positioned next to each other in a line. To reveal the selected button, the icon will be scaled on mouse hover. Both buttons are hidden on mobile.
"'Add to cart' below".
"Add to Cart"/"Pre-order" button: Use the option to move the button underneath the product card. This option displays text for an inactive button and shows an icon with text on hover in desktop mode. On mobile, an icon with text is displayed.
"Quick View" button: On the desktop, the icon can be viewed by hovering over the product card. This button is not displayed on mobile devices.
Button "View All"
Activate the "Enable "View all" checkbox to show the "View All" button on desktop and mobile if the collection contains more products than are displayed in the section. The following settings will be expanded after activating the option:
Use the "Style" drop-down to change the button's appearance in the sections. The theme includes three styles that can fit your store design: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following help page.
Use the "Color" picker to change the button background color for the "Primary" style. For the "Secondary" style, colored text and a border will be added to the button. If you used the "Link style", the color will be applied to the text link.
Section layout
The layout settings change the look and feel of the section.
Choose one of the options "In-grid heading", "Heading on top", or "Heading top center" in the "Layout" drop-down.
Use the "Mobile alignment" settings to change the alignment of the headings and descriptions to "Left" or "Center". Leave the "Auto" option to use the pre-designed theme settings.
Decide on the position of the divider using the "Top", "Bottom", or "Both" options in the "Dividing line" drop-down. It will be hidden once you use the "None" option.
On the "Top spacing" and "Bottom spacing" scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.
Check the following examples of how the section might be displayed on a desktop:
Tip: To add a new collection to the section, use the "Collection" block. The given block can be added several times by pressing the "Add Collection" button.
Collection
In the "Collection" source selector, choose any collection by pressing the "Select" button to display products in the column.
Activate the "Show recently viewed products" checkbox to replace items from the pre-selected collection with products a customer has viewed.
The collection title can be changed to another one by typing text in the "Title" field.
Use the "Description" input field to add some descriptive text strings for the selected collection that will appear under the titles.
Last updated