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 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 by selecting a grid or carousel layout and setting the card size.
- Set the Color scheme to be the default background or select one of the three color schemes defined in Theme Settings > Colors.
- 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.
The Carousel on mobile option provides a hybrid layout to save space on smaller screens.
Tip
Product cards
Customize product card content and layout using the settings in Theme settings > Product cards. These theme settings control many aspects of the product card layout across the store, including in the Featured Collection section.
Go to Theme settings > Product cards to set the Image aspect ratio, Image fit and Image alignment and choose whether to Show a second image on hover. Set the text and price alignment and choose additional content to show such as the product vendor, weight, inventory level, review rating and subtitle. The handling of sold out product cards is also controlled in the product card theme settings with the option to Fade out unavailable products.
Quick buy and quick quantity
Choose whether to Enable Quick buy to show a quick buy button at the bottom of the product card. The Canopy theme includes a Quick Quantity method for single variant products to enable customers to view and adjust cart quantities with a single click using the quick quantity button.
Contained cards
Canopy offers the ability to show cards within a border and with a coloured background. This is controlled using Theme Settings > Product cards > Contained card.
The Featured collection section includes the option to override this choice using a Show as a contained card setting specific to each Featured Collection section.
Tip
This setting can be particularly helpful to ensure that all text is still clearly legible when using a color scheme for the Featured Collection section .
Select the option Remove gap between contained cards to show the maximum number of product cards on the collection page. This option to make the layout more compact applies to all product cards except those on the search results page.
FAQs
Why are there empty spaces at the end of my Featured collection section?
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 > Grid is used. By using different combinations of the settings under Layout - Carousel or Grid, Product card size and Maximum products to show - it may be possible to eliminate undesirable gaps.
Why are some of the product cards faded out?
Product cards for unavailable products can be shown as faded out using the setting Theme Settings > Product cards > Fade out unavailable products.
Can I show swatch colors on the product card?
Yes, The Canopy theme can show swatches on the product card. This swatches article explains more.
Can I show a sale label on the product card?
Yes. This article explains more about how to show product labels for communicating important details such as new Pre-order, New In, Sold out and on Sale in the Canopy theme. Refer to the product labels article for more information.
What styles of quick buy are available?
Versions of the Canopy theme after version 6.0.0 includes a quick buy button and quick quantity adjustor. The on hover quick buy included in some earlier theme versions is no longer supported.
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