Featured collection
The Featured Collection section displays a specific collection of products, ideal for promoting curated selections like Sale, Seasonal, or Best Sellers collections.
This section brings attention to a chosen collection on your store pages, allowing quick access to relevant products and an enhanced shopping experience. It’s customizable, with layout options and support for features like color swatches, enabling you to showcase products attractively and intuitively.
1, How to add section in theme editor:
In your theme editor (Customize), scroll to the bottom of the template and select Add section.
In the list, locate and select Featured collection section. The section will now be added to your page, ready for customization.
2, Section settings:
These settings allow you to configure which collection to display and how it’s presented to customers.
a. General settings:
Collection: Use Select collection to choose a collection from the list of collections previously created in the Products section of your Shopify admin. This setting allows you to display products from the selected collection directly in the Featured Collection section.
Maximum products to show: Set the maximum number of products to display from the selected collection. Options range from 2 to 12 products.
Products per row on desktop: Define how many products are displayed per row on desktop devices. Options range from 2 to 4 products per row.
Enable carousel on desktop: If enabled, products will display in a single row. If the number of displayed products exceeds the row limit, the section will turn into a carousel format, allowing users to scroll through additional products horizontally.
Hide unavailable products: When checked, out-of-stock or unavailable products (e.g., products with no price set) will be hidden.
b. "View all" link settings: The “View all” link directs customers to the full collection page, allowing them to explore all products in the selected collection.
Enable "View all" link if collection has more products than shown: When enabled, this adds a "View all" link if the collection contains more items than specified in the Maximum products to show setting.
Customize the appearance of the “View all” link with two style options: Text or Card.
Text style: Displays the “View all” link as a simple text link. Customers click this link to visit the collection page.
Card style: Displays a card at the end of the product list. The “View All” link is positioned on the collection image, providing a prominent and visually appealing way for customers to access the full collection. The collection name appears above the "View all" link, and the Image overlay opacity setting can be adjusted to ensure the text remains legible against the background.
c. Product card: These settings customize the display of individual product cards within the Featured collection.
Image ratio: Adjust the aspect ratio of product images.
Show product rating: When enabled, displays the product’s rating (if available) on each product card.
Show color swatches: If enabled, color swatches for each product will appear below the product image, providing a visual preview of available color options.
Enable quick add button: When enabled, a Quick add button appears, allowing customers to view product details and make a purchase without leaving the current page. This feature supports quick purchases and enhances the user experience.
d. Mobile layout: let you control the arrangement and functionality of the section on mobile devices.
Products per row on mobile: Specify how many products are shown per row on mobile. Options include: 1 product per row and 2 products per row.
Enable swipe on mobile: When enabled, products exceeding the row limit are displayed as a carousel, allowing users to swipe horizontally to view all items.
3, Promotion image block settings
This block allows for a promotional banner within the section, adding visual appeal and a call to action button.
Image: Select an image for the promotion block. The overlay opacity is adjustable from 0% (transparent) to 100% (fully opaque).
Content: Add a heading and description to the promotion image to convey a message or call out a special offer. Adjust the position and alignment of the text to achieve the desired layout.
Button: Add a button below the text content within the promotion image. This button can be customized to link to specific pages, products, or collections, allowing users to navigate seamlessly.
Colors: Customize the color of both the text and button on the promotion image. Use the color picker to select colors that align with your brand style.
Last updated
Was this helpful?