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
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.
FAQs
Why are there empty spaces at the end of my Featured collection?
To avoid this from happening, a good place to start is to check the number of products in the selected collection in Admin > Collection against the setting used in LAYOUT > Maximum products to show.
If there are fewer products in the collection than are set to show, then likely there will be empty spaces - particularly if the setting LAYOUT > Layout > Grid is used. By using different combinations of the settings under LAYOUT - Carousel or Grid, Product card size and Maximum products to show - it is possible to eliminate undesirable gaps in a variety of ways.
Why is the promotion card not the same height as my product cards?
Carousel
When the setting LAYOUT > Layout > Carousel is used, and no image is selected, then the card will automatically 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.
Grid
When the setting LAYOUT > Layout > Grid is used, the promotion card does not automatically scale to match the height of the product cards set in LAYOUT > Product card size. Instead, the height of the promotion card is determined by the amount of content in PROMOTION CARD > Title and PROMOTION CARD > Text, and the setting used in PROMOTION CARD > Image aspect ratio. When Grid layout is used, the Promotion card will stick when scrolling should the product grid be greater in height.
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us