Featured collection – User Guides

Present collections of products to potential customers in a concise and user-friendly layout.

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 promote collections of products to potential customers in a concise and user-friendly layout, thereby helping to drive sales.

How to set up a featured collection

Steps

Open the Theme Editor.
Either click on the Featured collection section or select Add section.
In the Content settings, insert a Heading and click Select collection to pick a collection from your inventory.
The Layout settings can be used further to customize the design of the section for both desktop and mobile devices. To adjust the products per row on mobile, go to Theme Settings > Product cards > Products per row on mobile.
If the collection has more products than are shown, the Show "view all" button can be selected. This button will show underneath the product cards and will take customers to the main collection page.
Click Save when the section set up is complete.

Note

In the Style settings, there is the option to show a Top boundary effect. Refer to the Content boundary guide for more information. If the Full width background setting is not selected, the Top boundary effect will only be active when a color scheme is chosen.

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.

How to control the product card layout

In Theme Settings > Products cards there are many settings that can enhance the look and feel of a product card. These settings are relevant to any page or section throughout the store that displays a product card. The product cards can be customized further by choosing what to show on the card such as the product vendor, product rating and inventory.

The Products per row on mobile, Image shape (aspect ratio), Image fit and Image alignment settings can all be adjusted to ensure that images in the product cards are displayed in the best way possible.

Where a product has more than one image, the Show second image on hover setting can be selected. If this setting is not selected, then the main product image will be displayed.

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 > 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.

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!