The Featured Collection section is another customizable section you can add to your Shopify store. In this section, you can showcase products from one of your collections.
Add this section and product recommendations to make it easier for customers to find and discover new products.
How to Set Up the Featured Collection Section?
STEP 1
Access your Shopify Admin's Theme Library to open the theme customizer.
STEP 2
Under the template group, click on Add section and search for the Featured Collection section.
STEP 3
Pick which devices the featured collection can appear on. Customize the following:
Section style - Allows you to choose different color options. Choose between blank background, accent background, or border top.
Container size - Choose between default or fluid.
Heading - Title for the featured section.
Subheading - Displayed under the heading.
Collection - Add the collection(s) that you want to display.
STEP 4
The Featured Collection can be set as a Grid with multiple rows.
You can customize the following:
Number of rows - You can choose to show up to 5 rows.
Products per row - You can choose to show up to four (4) products on desktops and two (2) on mobile devices.
Note: The products per row setting for mobile only applies when the slider is disabled. If the slider is enabled, by default only one product per row will appear.
STEP 5
At the View All, tick Show button to give customers the option to view the full-featured collection.
You can customize the following:
Button Label - The view all button.
Button Link - Add the link for the collection page.
Button Style - Choose the button style whether its default, primary, or outline.
STEP 6
Slider options make it easier to see the featured collection since you have the option to scroll through the images or set them to auto-rotate.
Check the following options to enable: enable slider, show arrows, show dots, and enable auto play.
Note: If the slider is enabled, by default only one product per row will appear for mobile devices.
You can also adjust the auto play speed here.
STEP 7
You can change the image loading type whether: lazy or eager.
STEP 8
Don't forget to Save your changes.