Featured collections
Showcase the list of products in columns from specific collections using the "Featured collections" section.
Featured collections
Layout
If you need to show a "Dividing line", choose "Top" or "Bottom" positions. It will be hidden once you use the option "None".
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.
Content
Activate the "Show title" option to display titles from blocks.
The font size of the titles can be changed to "Small", "Medium", or "Large" in the "Title font size" drop-down.
If you need to set up the color of the title, use the "Title color" picker. Here you can paste the hex code to the related field or choose the color using the paint pallet. The color settings will be used for both desktop and mobile.
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 collection contains more products than is displayed in the column.
Use the "Style" drop-down to change the button's appearance in the sections. The theme includes three styles that can work out in your store: "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 the colorized text and border inside the button will be added. 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". Each image ratio you can check here.
Additionally, one can change the product image size from 15% to 60% using the "Image width" scale.
Tip: The product information will be displayed for each product with the configured settings in your Shopify admin -> Products. Read more information on how to configure products and collections in your 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.
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.
Note! The specified maximum number of blocks in the section is set to four. On the desktop view, 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:
Column
Use the "Title" field to rename a corresponding collection.
Note! The title can be displayed by ticking the "Show title" option in the "Featured collection" section.
In the "Collection" source selector, choose any collection by pressing the "Select collection" button to display products in the column.
Here is how the block might be displayed in a store:
Last updated
