Featured collections
Showcase the list of products in columns from specific collections using the "Featured collections" section.
Featured collections
Heading
Tick the "Show heading" option to display the collection titles. Additional settings will be shown after activating the option:
The title size can be changed in the "Size" drop-down to "Small", "Medium", or "Large".
If you need to change a title color, 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.
Content
To control the number of products displayed in each column, use the "Maximum products to show" scale. It can be changed from 2 to 12 items.
Button "View All"
Activate the "Enable "View all" checkbox to show the "View All" button on desktop and mobile if the blog contains more articles 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.
An example of the described settings can be viewed below:
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.
Additionally, one can change the product image size from 15% to 60% using the "Image width" scale.
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.
Enable or disable the following options to display the desired product information:
Show second image on hover
Use the option to display a second product image when hovering over the product card.
Enable quick add button
Hit the checkbox in order to display the "Add to cart"/"Choose options" button on desktop and mobile.
Note! By using this option, consider the image width and number of collection columns to ensure the button and product details are presented consistently across desktop and mobile.
Show vendor
Display the product vendor above the product title by simply enabling the checkbox.
Section layout
To add a divider between sections, use the "Dividing line" to set the position: "Top", "Bottom", or "Both". 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.
Note! The settings described below will be applied to all "Column" blocks in the section.
Here are the examples of the section on desktop and mobile:
Tip: To add a new collection to the section, use the "Column" block. The given block can be added several times by pressing the "Add Column" button.
Column
Note! The specified maximum number of blocks in the section is set to four. On a desktop, the section displays an equal number of columns in a row according to the added blocks. The default number of columns on mobile is one item per row. Change the position of columns on the storefront by dragging blocks up or down.
An example of the used blocks and their display can be seen below:
Use the "Title" field to rename a corresponding collection.
Note! The title can be displayed by ticking the "Show title" option in the "Featured collections" section.
In the "Collection" source selector, choose any collection by pressing the "Select" button to display products in the column.
Here is how the block might be displayed in a store:
Last updated