Best sellers showcase

Layout, content and available controls for Best sellers showcase.

Scale Theme · v1.9.3 · 2 min read

Where to find it

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

Available content blocks

Trust item

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
Heading: Use bold or italic in this heading to apply the global Heading DNA accent style. Change it in Theme settings > Typography.
Collection: Select the collection this component should use.
Products: Adjust within the range offered by the theme editor.
Show trust bar: Enable or disable this option and preview the result.
Use sparkle icon for all trust itemsConditional: Enable or disable this option and preview the result.
Show sorting: Enable or disable this option and preview the result.
Sort labelConditional: Edit the text shown by this component.
Show product count: Enable or disable this option and preview the result.
Product count labelConditional: Edit the text shown by this component.
Show best seller badge: Enable or disable this option and preview the result.
Best seller badge textConditional: Edit the text shown by this component.
Show hover image button: Appears over the product image on hover and links to the product unless a custom link is selected below.
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.
Show rating: Enable or disable this option and preview the result.
Rating sourceConditional: Uses product review metafields when available and falls back to the static values below.Options: Product review metafields · Static fallback
Static rating valueConditional: Adjust within the range offered by the theme editor.
Static review countConditional: Edit the text shown by this component.
Show rating numberConditional: Enable or disable this option and preview the result.
Show product description: Enable or disable this option and preview the result.
Show card button: Enable or disable this option and preview the result.
Card button action: Choose the presentation or source that fits this component.Options: Open product · Add to cart
Card button labelConditional: Edit the text shown by this component.
Sale badge position: Choose the presentation or source that fits this component.Options: Top left · Top right · Bottom left · Bottom right
Content width: Choose the presentation or source that fits this component.Options: Standard · Wide · Extra wide
Heading alignment: Use the matching control in the theme editor and preview the component before publishing.
Use reference spacing: Uses the balanced desktop spacing and proportions shown in the reference layout.
Trust content widthConditional: Adjust within the range offered by the theme editor.
Trust bar vertical spacingConditional: Adjust within the range offered by the theme editor.
Trust item gapConditional: Adjust within the range offered by the theme editor.
Trust icon sizeConditional: Adjust within the range offered by the theme editor.
Trust text sizeConditional: Adjust within the range offered by the theme editor.
Desktop columns: Adjust within the range offered by the theme editor.
Use minimal card layout: Enable or disable this option and preview the result.
Enable image slider: Enable or disable this option and preview the result.
Show second image on hoverConditional: Enable or disable this option and preview the result.
Image corner radius: Adjust within the range offered by the theme editor.
Image ratio: Choose the presentation or source that fits this component.Options: Square · Portrait · Landscape · Adapt to image
Image fit: Fill card removes inner spacing and crops only when needed.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.
Image hover zoom: Adjust within the range offered by the theme editor.
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
Color schemeConditional: Choose an available Shopify color scheme.
BackgroundConditional: Choose a local color when the relevant custom source is enabled.
HeadingConditional: Choose a local color when the relevant custom source is enabled.
Accent effect: Highlight adds a slanted color plate behind bold or italic heading text. The existing accent color controls set its background.Options: Theme setting · Highlight
Heading accent source: Controls emphasized text in the section heading.Options: Heading DNA · Custom
Custom heading accentConditional: Choose the presentation or source that fits this component.Options: Solid color · Gradient
Heading accent colorConditional: Choose a local color when the relevant custom source is enabled.
Gradient startConditional: Choose a local color when the relevant custom source is enabled.
Gradient endConditional: Choose a local color when the relevant custom source is enabled.
Gradient angleConditional: Adjust within the range offered by the theme editor.
TextConditional: Choose a local color when the relevant custom source is enabled.
AccentConditional: Choose a local color when the relevant custom source is enabled.
Show advanced component colorsConditional: Reveal card, badge, trust, rating and contrast overrides. Saved values stay active when hidden.
Accent textConditional: Choose a local color when the relevant custom source is enabled.
BorderConditional: Choose a local color when the relevant custom source is enabled.
Card backgroundConditional: Choose a local color when the relevant custom source is enabled.
Card borderConditional: Choose a local color when the relevant custom source is enabled.
Star colorConditional: Choose a local color when the relevant custom source is enabled.
Empty star colorConditional: Choose a local color when the relevant custom source is enabled.
Trust bar backgroundConditional: Choose a local color when the relevant custom source is enabled.
Trust iconConditional: Choose a local color when the relevant custom source is enabled.
Image backgroundConditional: Choose a local color when the relevant custom source is enabled.
Badge backgroundConditional: Choose a local color when the relevant custom source is enabled.
Badge textConditional: Choose a local color when the relevant custom source is enabled.
Compare-at priceConditional: Choose a local color when the relevant custom source is enabled.
Use reference heading style: Applies the reference accent treatment to the default best-sellers heading.
Use reference component colors: Uses the pink trust bar, media, rating, and compare-price colors from the reference.
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 background on hoverConditional: Choose a local color when the relevant custom source is enabled.
Top padding: Adjust within the range offered by the theme editor.
Bottom padding: Adjust within the range offered by the theme editor.