Articles on: Theme Sections

Featured collections

Explore a world of diverse products through specially curated standout collections. From the latest trends to bestsellers, each collection is a journey to discover your own style and personality.


1. How to access Featured collections section?


Step 01: From Shopify Admin, click on Online Store > Select Theme > In the Current theme section, click the Customize button.



Step 02: In the theme editor ( Customize), click the Sections button > Click the Add Section button or hover below another section until the (➕) icon appears > In the Sections tab, scroll through the list or use the search bar to find and select Featured collections



2. How to customize Featured collections section?


2.1. Collection item


To add Collection item to the Featured collections section, click the Add Collection button (plus icon ➕) under the Featured collections.

Once the Collection item is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)


Add max 5 collection items


  • Collection: Select the product collection to display, determining the featured product content in this section.
  • Tab label: Select the label to display for the collection, defaulting to the collection's title
  • Link: Select the link to the collection, defaulting to the collection's URL




Once you add the **Featured collections **section, you can customize its settings in the left or right sidebar (depending on your screen size)


  1. General


  • Reveal on scroll (Show animation when section becomes visible): Activates animations when the section becomes visible while scrolling, enhancing engagement and interactivity.
  • Make section full width: Expands section width to the full page width, optimizing display on large screens and creating an impactful layout.
  • Color scheme: Selects the color palette for the section, ensuring harmony with the overall website design and creating a unified visual experience
  • Tab style: Select the display style for the tabs (inline or dropdown), customizing how to navigate between collections.
  • View all label: Enter the label text for the "View all" button, providing a call to action to see all collections.
  • "View all" style: Select the display style for the "View all" button (link, outline button, or solid button), customizing the button's appearance.



Section header


  • Caption: Enter a brief caption, often used to provide additional information or context for an image or content.
  • Heading: Enter the main title for the section, helping readers quickly grasp the main topic.
  • Heading size: Adjust the font size of the heading, creating visual hierarchy and emphasizing content.
  • Heading style: Select the style for the heading (e.g., normal, uppercase), customizing the interface and creating emphasis.
  • Heading tag (Will affect SEO): Select the HTML tag for the heading (H1-H6), affecting SEO structure and content hierarchy.



Product grid


  • Maximum products to show: Limit the number of products displayed within each collection, helping the page load faster and focusing on the most important products.
  • Number of columns on desktop: Define the number of product columns displayed on desktop screens, adjusting the product display layout.
  • Enable carousel on desktop: Enable/disable the product carousel mode on desktop screens, allowing more products to be displayed within a limited space.
  • Number of columns on mobile: Define the number of product columns displayed on mobile phone screens, optimizing the display layout for smaller devices.
  • Enable carousel on mobile: Enable/disable the product carousel mode on mobile phone screens, improving the product viewing experience on mobile devices.



Product card


  • Image ratio: Adjust the aspect ratio of collection images, ensuring images display beautifully and propotionally (Adapt to image, Square, ASOS, Portrait, Lanscape, Custom)
  • Show vendor: Displays the product vendor's name, providing additional information to customers.



Section padding


  • Top padding (Desktop/Mobile): Creates space above the content within an element, separating it from elements above and improving visual layout.
  • Bottom padding (Desktop/Mobile): Creates space below the content within an element, separating it from elements below and improving visual layout.



  1. Theme Settings


In the Featured collections > click open Theme Settings tab


  • Title maximum line (0 to auto line, if enable will affect hover effect of title): Limits the number of lines displayed for product titles, maintaining a clean layout and preventing overly long titles.
  • Page width: Defines the maximum width of the page content, controlling layout and ensuring optimal display across devices.
  • Remove collection URL: Removes the collection URL from product paths, creating shorter URLs and optimizing SEO.
  • Color display mode: Selects how product colors are displayed: hidden, color count, or color list.
  • Show color type: Selects whether to display all product colors or only those in stock, providing accurate product availability information.
  • Show secondary image on hover: Displays a secondary product image on hover, providing additional visual information to customers.
  • Use pre order badge: Displays a "pre-order" badge on upcoming products, allowing customers to place pre-orders.
  • Use new badge: Displays a "new" badge on new products, attracting customer attention to recently released items.
  • Use on sale badge: Displays an "on sale" badge on discounted products, stimulating purchases and informing about offers
  • On sale badge display style: Selects the display style for the "on sale" badge as text (e.g., "Sale") or the percentage discount.
  • Use sold out badge: Displays a "sold out" badge on out-of-stock products, informing customers of product availability.



  • Text alignment: Adjusts the text alignment of products to the left or center, customizing the display layout.
  • Use collection link on vendor is an option that allows you to replace the default link to the product's vendor page with a link to the collection page containing that product.
  • Maximum color to show (0 to responsive auto number. Requires color limit is enabled): Limits the number of displayed colors, optimizing the interface and preventing information overload for users
  • Enable color limit: Enables or disables the limit on the number of displayed colors, allowing control over the color count shown on the page.
  • **Change product image on event **(Click mode is forced on touch devices): Select the event to change the product image (hover or click).
  • Color shape: Selects the display shape for product colors (square or circle), customizing the visual interface.
  • Color image source: Selects the image source for product colors: variant images or custom images
  • Action after color view more is clicked (expand all color, go to product page): Selects the action when a user clicks "view more colors": expand to display all colors or redirect to the product page.



  1. Custom CSS


Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.


Add custom styles to this section only.


To add custom styles to your entire online store, go to Theme Settings

Updated on: 15/08/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!