Featured collection
Use the "Featured collection" section to demonstrate the list of products from a specific collection.
Tip: To hide the title, description, or button, leave the corresponding fields blank.
Paste the section's title to the "Heading" field. The font size of the title can be changed to "Small", "Medium", or "Large" in the "Heading font size" drop-down.
If you need to set up the color of the title, use the "Heading 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.
Use the "Description" input field to add some descriptive text lines to the section that will appear under the heading.
The color of the description can be set in the "Description color" picker. The color you apply for the item will be used for a desktop and mobile.
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.
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.
Content
In the "Collection", choose any collection to display products in the section by pressing the "Select collection" button.
The number of products per row can be set in the "Products in row". Choose if 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.
Button "View All"
Activate the "Enable "View all" checkbox to show the button on desktop and mobile if the section contains more products than is displayed in the section.
Use the "Style" drop-down to change the button's appearance in the sections. The theme includes six styles that can work out in your store: "Primary", "Secondary", "Third", "Fourth", "Fifth" or "Link style". View each button style on the following help page.
Use the "Button color" picker to change the button background color for the "Primary", "Third" and "Fifth" styles. For the styles "Secondary" and "Fourth" 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.
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.
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: 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.
Show vendor
Display the product vendor above the product title by simply enabling the checkbox.
Show product rating
To display the product star rating for products, enable the option. This feature requires an app installment. Search for an app in the Shopify App Store. We use a free Products Reviews app by Shopify in our demo.
Check the following examples of how the section might display on desktop and mobile:
Last updated