Featured collection

Layout, content and available controls for Featured collection.

Scale Theme · v1.9.3 · 2 min read

Where to find it

Add this section from the theme editor on a supported template.

Editor controls

Conditional controls appear after choosing the relevant source, style or option. Saved values may differ from new defaults.

Display section ID: ID is used in the Sections group section to create anchor links. Toggle on to show a copy button on this section.
Display on: Choose the presentation or source that fits this component.Options: All devices · Desktop only · Mobile only
Product source mode: Choose the presentation or source that fits this component.Options: Single collection · Tabbed collections
Accessible tabs label: Edit the text shown by this component.
Active tab backgroundConditional: Choose a local color when the relevant custom source is enabled.
Active tab textConditional: Choose a local color when the relevant custom source is enabled.
Tab radius: Adjust within the range offered by the theme editor.
Mobile columns: Choose the presentation or source that fits this component.Options: One · Two
Stagger cards when switching tabs: Enable or disable this option and preview the result.
Stagger interval: Adjust within the range offered by the theme editor.
Card entrance duration: Adjust within the range offered by the theme editor.
Heading accent effect: Choose the presentation or source that fits this component.Options: Theme setting · Highlight
Color source: Theme colors follow Theme settings > Colors. Other sources apply only to this section.Options: Use theme colors · Choose a color scheme · Set custom colors
Section backgroundConditional: Choose a local color when the relevant custom source is enabled.
Card backgroundConditional: Choose a local color when the relevant custom source is enabled.
HeadingConditional: Choose a local color when the relevant custom source is enabled.
Card textConditional: Choose a local color when the relevant custom source is enabled.
Rating, badge and actionConditional: Choose a local color when the relevant custom source is enabled.
Badge and action textConditional: Choose a local color when the relevant custom source is enabled.
Card borderConditional: Choose a local color when the relevant custom source is enabled.
Collection: Select the collection this component should use.
Type: Choose the presentation or source that fits this component.Options: Grid · Carousel · Editorial
Carousel on mobileConditional: Enable or disable this option and preview the result.
Product count: Adjust within the range offered by the theme editor.
ColumnsConditional: Adjust within the range offered by the theme editor.
Mobile columnsConditional: Choose the presentation or source that fits this component.Options: 1 · 2
Mobile columnsConditional: Choose the presentation or source that fits this component.Options: 1 · 2
Image ratio: Choose the presentation or source that fits this component.Options: Square · Portrait · Landscape · Adapt to image
Image fit: Choose the presentation or source that fits this component.Options: Fill card · Show full image
Image focal position: Choose the presentation or source that fits this component.Options: Center · Top · Bottom · Left · Right
Image inner spacingConditional: Adjust within the range offered by the theme editor.
Use premium minimal card layout: Enable or disable this option and preview the result.
Catalog card layout: Enable or disable this option and preview the result.
Custom badge label: Edit the text shown by this component.
Category label (optional): Edit the text shown by this component.
Show category or vendor: Enable or disable this option and preview the result.
Show numeric rating: Enable or disable this option and preview the result.
Show second image on hoverConditional: Enable or disable this option and preview the result.
Enable image slider dots: Enable or disable this option and preview the result.
Dots positionConditional: Choose the presentation or source that fits this component.Options: Below image · Overlay on image
Dots visibilityConditional: Choose the presentation or source that fits this component.Options: Always visible · Desktop hover only
Slider dot countConditional: Adjust within the range offered by the theme editor.
Show rating: Enable or disable this option and preview the result.
Show product description: Enable or disable this option and preview the result.
Rating sourceConditional: Choose the presentation or source that fits this component.Options: Static · Reviews app metafield
Star colorConditional: Choose a local color when the relevant custom source is enabled.
Static rating valueConditional: Adjust within the range offered by the theme editor.
Static rating captionConditional: For example, Demo rating when showing sample data.
Card action style: Choose the presentation or source that fits this component.Options: Existing card colors · Tertiary
Card border thickness: Adjust within the range offered by the theme editor.
Card border colorConditional: Choose a local color when the relevant custom source is enabled.
Card radius: Adjust within the range offered by the theme editor.
Sale badge style: Choose the presentation or source that fits this component.Options: Regular sale · SAVE $XX (amount) · -XX% (percentage) · Hidden
Save badge positionConditional: Choose the presentation or source that fits this component.Options: Top right · Top left · Bottom right · Bottom left
Save badge color: Choose the presentation or source that fits this component.Options: Default · Custom
Save badge backgroundConditional: Choose a local color when the relevant custom source is enabled.
Save badge textConditional: Choose a local color when the relevant custom source is enabled.
Title weight: Adjust within the range offered by the theme editor.
Price weight: Adjust within the range offered by the theme editor.
Compare price weight: Adjust within the range offered by the theme editor.
Rating weightConditional: Adjust within the range offered by the theme editor.
Save badge weightConditional: Adjust within the range offered by the theme editor.
View button weightConditional: Adjust within the range offered by the theme editor.
Show hover image button: Enable or disable this option and preview the result.
Hover button labelConditional: Edit the text shown by this component.
Custom hover button linkConditional: Leave blank to open each product's own page.
Show hover button on touch devicesConditional: Enable or disable this option and preview the result.
Hover button styleConditional: Choose the presentation or source that fits this component.Options: Light · Dark · Accent · Custom
Hover button backgroundConditional: Choose a local color when the relevant custom source is enabled.
Hover button textConditional: Choose a local color when the relevant custom source is enabled.
Hover button hover backgroundConditional: Choose a local color when the relevant custom source is enabled.
Show View button: Enable or disable this option and preview the result.
View button behaviorConditional: Choose the presentation or source that fits this component.Options: Open product details modal · Add to cart
View button colorConditional: Choose the presentation or source that fits this component.Options: Default · Custom
View button backgroundConditional: Choose a local color when the relevant custom source is enabled.
View button textConditional: Choose a local color when the relevant custom source is enabled.
Horizontal gapConditional: Adjust within the range offered by the theme editor.
Vertical gapConditional: Adjust within the range offered by the theme editor.
IconConditional: Choose the presentation or source that fits this component.Options: Arrows · Chevrons · Large arrows · Large chevrons · None
Icon backgroundConditional: Choose the presentation or source that fits this component.Options: None · Circle · Square
Width: Choose the presentation or source that fits this component.Options: Page · Full
Alignment: Choose the presentation or source that fits this component.Options: Left · Center · Right
Gap: Adjust within the range offered by the theme editor.
Color schemeConditional: Choose an available Shopify color scheme.
Top: Adjust within the range offered by the theme editor.
Bottom: Adjust within the range offered by the theme editor.