Articles on: Theme Sections

Featured collection

The ' Featured Collections' section is the perfect tool to showcase your best-selling products or collections, new launches, or items on sale. With its high level of customizability, you can create an engaging visual product display that makes it easy for customers to find the products they're interested in and creates a positive shopping experience.



1. How to access Featured collection 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 Collection



2. How to customize Featured collection section



Once you add the Featured Collection 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 products full width: Expands product width to the full page width, optimizing display on large screens and creating an impactful layout.
  • Show separator line: Displays a separator line between elements or products, creating clear divisions and improving content organization.
  • Color scheme: Selects the color palette for the section, ensuring harmony with the overall website design and creating a unified visual experience.



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 collection > 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.
  • Show secondary image on hover: Displays a secondary product image on hover, providing additional visual information to customers.
  • Use new badge: Displays a "new" badge on new products, attracting customer attention to recently released items.
  • Automatic "New" badge period: Set a number of days to keep your products marked as "New" after creation
  • 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 pre order badge: Displays a "pre-order" badge on upcoming products, allowing customers to place pre-orders.
  • 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.
  • 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.



  • Text alignment: controls the horizontal position of text within its container (left, center)
  • 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).
  • 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.
  • 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



  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*


2.2. Section header


Choose a heading that aligns with your brand’s tone and message to build trust and engagement.



Clicking on the Section header title under Featured collection section, you can customize that section's settings in the left or right sidebar (depending on your screen size)


  • Use custom maximum width: Allows you to set a custom maximum width for the section content
  • Maximum width: Defines the maximum width of the section content, ensuring content displays proportionally and doesn't stretch excessively on large screens.
  • Alignment: Adjusts the alignment of content within the section (left, right, center), controlling the layout and creating visual balance.



2.2.1. Heading block


To add Heading block to the Section header, click the Add item button (plus icon ➕) under the Section header.

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


  • Heading: Enter the title text for the section, providing a clear and attention-grabbing title for viewers.
  • Heading size: Adjust the font size of the heading, creating emphasis and visual hierarchy for the content
  • Heading tag (Will affect SEO): Select the HTML tag for the heading (eg: H1, H2, H3), affecting SEO structure and content hierarchy.
  • Uppercase: Convert the heading text to uppercase, creating emphasis and prominence.



2.2.2. Sub heading block


To add Sub heading block to the Section header, click the Add item button (plus icon ➕) under the Section header.

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


  • Text: Enter the text content for the element, conveying information or messages to users
  • Font: Select the font style for the text, choose between font for body content and font for heading.
  • Size: Adjust the font size of the text (small, medium), controlling the displayed text size.
  • Color: Select the color for the text, distinguishing between primary and secondary colors to match the design.
  • Uppercase: Convert the text to uppercase, creating emphasis and highlighting the content.



2.2.3. Text block


To add Text block to the Section header, click the Add item button (plus icon ➕) under the Section header.

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


  • Text: Enter the text content you want to display, allowing customization of the message and information conveyed.
  • Color: Select the color for the text, distinguishing between primary and secondary colors to match the design
  • Size: Adjust the font size of the text, ensuring readability and compatibility with the website layout (eg: Small, Medium, Large,...)
  • Hide on mobile: Hides or shows the text on mobile devices, optimizing the user experience on different screen sizes.



2.2.4. Caption block


To add Caption block to the Section header, click the Add item button (plus icon ➕) under the Section header.

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


  • Text: Enter the text content for the element, conveying information or messages to users.
  • Font: Select the font style for the text, choose between font for body content and font for heading.
  • Size: Adjust the font size of the text (small, medium), controlling the displayed text size.
  • Color: Select the color for the text, distinguishing between primary and secondary colors to match the design.
  • Uppercase: Convert the text to uppercase, creating emphasis and highlighting the content.



2.2.5. Spacer block


To add Spacer block to the Section header, click the Add item button (plus icon ➕) under the Section header.

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


  • Space: Setting space between elements creates clear separation.
  • Tablet space: Optimizes the spacing between elements on tablet screens, ensuring content is displayed balanced and easy to interact with on medium-sized screen devices.
  • Mobile space: Adjusts the spacing between elements on mobile phone screens, optimizing the user experience on small screens



2.2.6. Icon block


To add Icon block to the Section header, click the Add item button (plus icon ➕) under the Section header.

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


If all three options - Icon, Custom image icon and Custom SVG icon - are added, the priority order will be: Custom SVG icon > Custom image icon > Icon


  • Icon: Select an icon from the available library to display, enhancing visual appeal and conveying messages quickly.
  • Custom image icon: Upload your own custom image icon, enabling personalization and brand alignment.
  • Custom SVG icon: Use SVG icons from libraries like Remixicon or Tabler Icons, ensuring sharp image quality and scalability.
  • Icon height: Adjust the icon height on desktop screens, controlling the display size.
  • Tablet icon height: Adjust the icon height on tablet screens, optimizing display for this device.
  • Mobile icon height: Adjust the icon height on mobile phone screens, ensuring the icon displays appropriately on small screens.
  • Color: Select the color for the text, distinguishing between primary and secondary colors to match the design.



How to get an SVG icon?


Step 1: Click the link Get a svg remixicon, or tabler icons under Custom SVG icon option

Step 2: Search icon you want > Click the icon > click Copy SVG button

Step 3: Go back to theme customize and paste SVG icon into the field


2.3. Product Grid


Clicking on the Product Grid title under Featured collection section, you can customize that section's settings in the left or right sidebar (depending on your screen size)


  • Collection: Select the product collection to display in this section
  • Maximum products to show: Limits the number of products displayed from the collection, controlling the length of the display section.
  • Number of columns on desktop: Defines the number of product columns displayed on desktop screens, optimizing the layout for large screens.
  • Enable carousel on desktop: Enables or disables the product carousel mode on desktop screens, allowing more products to be displayed in a limited space.
  • Enable "View all" if collection has more products than shown: Enables or disables the "View all" button when the collection has more products than the displayed amount, allowing customers to view the entire collection.
  • "View all" style: Selects the display style for the "View all" button (link, outline button, solid button), customizing the interface to match the website's design.



Mobile Layout


  • Number of columns on mobile: Select the number of product columns displayed on mobile phone screens (1 column or 2 columns)
  • Enable carousel on mobile: Enables or disables the product carousel mode on mobile phone screens, allowing more products to be displayed in the limited space on mobile devices.



Product card


  • Image ratio: Adjust the aspect ratio of product 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.


Updated on: 15/08/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!