Featured collection

Overview:

The Featured Collection section is designed to showcase multiple Shopify collections in an engaging product layout with customizable headings, tab navigation, product cards, CTA buttons, slideshow support, and responsive styling. It supports collection tabs, product display customization, vendor styling, discount marquees, add-to-cart functionality, hover effects, and responsive grid layouts. This section helps merchants highlight featured collections, trending products, seasonal categories, or curated shopping experiences.

Section Configuration

Collection Settings:

Setting	Description
Collections	Selects up to 10 Shopify collections displayed inside the featured collection section.

Header Settings

Heading:

Setting	Description
Section Heading	Defines the main heading displayed above the collection section. Supports rich text formatting such as bold and italic styling.
Heading Size	Controls heading size such as H1–H6, Large, Medium, or Small.
Heading Weight	Adjusts the font thickness ranging from Thin (100) to Black (900).
Heading Case	Changes text transformation style such as Uppercase, Lowercase, Capitalize, or Default.
Heading Tag	Sets the HTML heading tag level from H1 to H6 for SEO and accessibility purposes.
Heading Font Family	Allows switching between Default and Body font family styles.
Heading Color Style	Applies predefined color styling to the heading text.
Heading Link Style	Controls styling behavior of links used inside heading content.

Description:

Setting	Description
Section Description	Displays supporting text below the section heading.
Description Size	Controls text size such as Large, Medium, or Small.
Description Weight	Adjusts the font thickness ranging from Thin (100) to Black (900).
Description Case	Changes text transformation style for description text.
Description Font Family	Allows switching between Default and Heading font family styles.
Description Color Style	Applies predefined color styling to description text.

Tabset Settings:

These settings control the appearance of collection tabs displayed at the top of the section.

Setting	Description
Tabset Text Size	Controls tab text size such as Large, Medium, or Small.
Tabset Text Weight	Adjusts the font thickness ranging from Thin (100) to Black (900).
Tabset Text Case	Changes text transformation style such as Uppercase, Lowercase, Capitalize, or Default.
Tabset Font Family	Allows switching between Default and Heading font family styles.

Button Settings

Primary Button:

Setting	Description
Button Label	Defines the text displayed on the CTA button such as Discover More.
Button URL	Adds a destination URL to the button.
Button Style	Controls button appearance such as Primary or Secondary style.
Button Case	Changes the text transformation style such as Uppercase, Lowercase, Capitalize, or Default.
Open in New Tab	Opens the button link in a new browser tab when enabled.

View All Button:

Setting	Description
Show View All Button	Displays a View All button for selected collections.
Button Label	Defines the button text such as View All.
Button Style	Controls button appearance such as Primary or Secondary style.
Button Case	Changes text transformation style.
Open in New Tab	Opens the button link in a new browser tab when enabled.

Product Settings

Product Media:

Setting	Description
Product Media Ratio	Controls image ratio such as Adapt, Square, Portrait, or Fit to Box.
Desktop Product Height	Controls product image height on desktop devices when Fit to Box is selected.
Mobile Product Height	Controls product image height on mobile devices when Fit to Box is selected.

Product Heading Typography:

Setting	Description
Product Heading Size	Controls product title size such as Large, Medium, or Small.
Product Heading Weight	Adjusts font thickness ranging from Thin (100) to Black (900).
Product Heading Case	Changes product title text transformation style.
Product Heading Tag	Sets the HTML heading tag level from H1 to H6.
Product Heading Font Family	Allows switching between Default and Body font family styles.

Product Features:

Setting	Description
Enable Add to Cart	Displays an Add to Cart button on product cards.
Show Price	Displays product pricing information.
Show Discount Tag	Displays promotional discount badges.
Discount Marquee Direction	Controls discount marquee scrolling direction such as Right to Left or Left to Right.
Discount Marquee Speed	Controls marquee animation speed.
Pause on Hover	Pauses scrolling animation when users hover over discount tags.
Show Unit Price	Displays product unit pricing when available.
Show Vendor	Displays product vendor name.
Vendor Case	Changes vendor text transformation style.
Vendor Background Color	Controls vendor badge background color.
Vendor Text Color	Controls vendor text color.
Show Color Swatches	Displays available product color swatches.
Variant Rows	Controls which variant rows are shown. Example: 1,2.
Show Hover Image	Displays a secondary product image on hover.
Show Excerpt	Displays product excerpt or short description.

Grid Settings:

Setting	Description
Desktop Columns	Controls the number of product columns displayed on desktop devices (2–5 columns).
Maximum Products	Controls how many products are displayed from selected collections (4–24 products).
Mobile Columns	Controls whether 1 or 2 columns appear on mobile devices.
Desktop Grid Spacing	Adds spacing between product cards on desktop devices.
Mobile Grid Spacing	Adds spacing between product cards on mobile devices.

Slideshow Settings:

Setting	Description
Show Slideshow Arrows	Displays navigation arrows for product slides.
Enable Auto Play	Automatically rotates featured collection slides.
Slideshow Interval	Controls autoplay delay timing between slides.

Layout:

Setting	Description
Layout Style	Controls whether products display in Grid or Slideshow layout.
Container Layout	Determines whether the section uses Contained, Contained Content, or Full Width layout.
Container Width	Controls the maximum width of the section container on desktop devices.
Text Alignment (Desktop)	Sets content alignment on desktop devices (Left, Center, or Right).
Text Alignment (Mobile)	Sets content alignment on mobile devices.

Color Scheme:

Setting	Description
Section Color Scheme	Applies a predefined color palette to the featured collection section background and content.