Featured collection
The Featured Collections section highlights specific product collections on your store’s homepage or other pages, making it easier for customers to explore key categories.
Go to Shopify Admin > Online Store > Themes.
Click Customize on your live theme.
In the theme editor, click Add Section > Featured Collections.
Customize the Featured Collections Section
Collection : Choose a collection to display in the featured section ( Creating Collection ).
Tab Style : You can choose the tab style for displaying collections:
Tabs : Displays collections in a tabbed format.
Dropdown : Displays collections in a dropdown menu.
Note: If there is more than one collection, either the tab or dropdown style will be enabled automatically
Layout
Expand to full width : Enable this option to extend the collection across the entire screen width.
Color scheme: You can customize the section’s appearance by changing the text color, background color, and more using preset color options.
Background Opacity : Adjust transparency (Range: 0–100 %, Default: 100%). This applies to the background image, customizable in theme settings.
Content
Heading: Set a custom title (e.g., "Hot & Top Trends").
Heading Size: Choose from Small, Medium, or Large.
Subheading: Add additional text if needed.
Text Position : Select the Position
Above Main Heading – Position the subheading above the main heading.
Below Main Heading – Position the subheading below the main heading.
Desktop Content Alignment – Choose the text alignment for desktop. ( Left, Right & Center ).The content alignment is automatically centered on mobile screens.
Product Card Settings
Show Vendor : Display the product vendor/brand.
Show Description : Enable to show product descriptions.
Show Card Swatch : Display product swatches (e.g., colors or patterns).
Show Secondary Image on Hover : Show an alternate image when hovering over a product.
Show Quick Add Option : Enable a quick add-to-cart button.
Content Alignment : Choose the text alignment for desktop. ( Left, Right & Center )
Aspect ratio :There are 3 option image ratio as ( Adapt to image, square, and portrait) Can choose the required style as theme requirement.
Column Settings
Maximum Products to Show : Set the total number of products displayed.
Desktop Columns : Choose the number of columns for desktop view. (Options: 3, 4, 5, 6)
Mobile Columns : Choose the number of columns for mobile view. (Options: 1, 2)
Carousel Settings
Enable Carousel : Activate a sliding format for product display.
Change Slides Every : Set transition delay (in seconds). If set to 0, auto-play is disabled
Gap : Define spacing between items (Default: 30px, auto-adjusts for mobile).
Pagination : Choose the pagination type: Dots (dot indicators), Arrow (manual navigation), or None (no indicators).
Pagination Style : Choose the style: Classic (traditional) or Modern (updated look).
Section padding
Top Padding: Adjust spacing above the section.
Bottom Padding: Adjust spacing below the section.
Shapes
Shaper : Adds shape effects to the section. Options: ( Shaper Top, Shaper Bottom, Shaper Both, None, Border Top, Border Bottom, and Both Border).
Shaper Top Color : Sets the top shape color (choose your preferred color).
Shaper Bottom Color : Sets the bottom shape color (choose your preferred color).
Theme Settings & Customization
Adjust additional styles in Theme Settings.
Use Custom CSS for further design modifications.
Last updated