What is the featured collection section? #
The Featured collection section is probably one of the most-used sections when setting up an Online Store. It can be an excellent way to present collections of products to potential customers in a concise and user-friendly layout, aiding product discovery and helping to drive sales.
How to set up a featured collection #
Steps
- Open the Theme Editor.
- Click Add section and select Featured collection to add the section to your page.
- Under SECTION HEADER use the settings to edit the content and alignment of the Heading text and View all link.
- To populate the section with products, navigate to LAYOUT > Collection and click Select collection to pick a collection from your inventory.
- The LAYOUT settings can be used to further customize the design of the section for both desktop and mobile devices.
- The Featured collection section can be further enhanced by setting the optional PROMOTION CARD to show. To do this, go to PROMOTION CARD and tick the checkbox Show promotion.
- The settings under PROMOTION CARD can be used to add an image and customize the look of the card. The Title and Text can also be edited, and a Button label and URL added as well.
- Under STYLE the Promotion card color scheme and Promotion card button style can be changed to one of those set up in Theme settings.
- Click Save when the section set up is complete.
Carousel vs grid layout #
Whilst similar, each layout has its benefits, and can be used to create different looks on your store.
The Carousel layout option will display the product cards in a single row with horizontal scrolling, and is ideal for when a more compact look is required.
The Grid layout option shows products in multiple rows, and can be an excellent solution when looking to show more than one row of products. The number of rows in the grid layout is controlled by using the settings LAYOUT > Product card size and LAYOUT > Maximum products to show.
Tip
Consider using the Carousel setting to present collections in a single row for a more compact look.
Optimizing the look and feel #
There are a number of settings that can be used to customize the design and layout of the Promotion Card depending on the desired look. Under LAYOUT > Layout there are options to display the products within the section in a Carousel or Grid layout. The Product card size and Maximum products to show can also be set using the settings provided here.
By default, the PROMOTION CARD loads with placeholder Title, Text and Button content. The use of an image to further enhance the card is optional, and can be set in PROMOTION CARD > Image > Select image / Explore free images. If no image is selected, and the setting LAYOUT > Layout > Carousel is used, then the card will scale to neatly match the height of the product card set in LAYOUT > Product card size.
When using an image, consider using the setting PROMOTION CARD > Image aspect ratio > Fill so the promotion card scales to neatly match the height of the product card.
Note
The Promotion card will grow beyond the height of the product card if the amount of content in PROMOTION CARD > Title and/or PROMOTION CARD > Text cannot fit in the available space.
