Featured comparison

Layout, content and available controls for Featured comparison.

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

Comparison row

Editor controls

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

Show section ID: Enable or disable this option and preview the result.
Display on: Choose the presentation or source that fits this component.Options: All devices · Desktop only · Mobile only
Comparison presentation: Choose the presentation or source that fits this component.Options: Original · Editorial highlighted column
Editorial heading sizeConditional: Adjust within the range offered by the theme editor.
Editorial heading weightConditional: Choose the presentation or source that fits this component.Options: Regular · Medium · Semibold · Bold
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
Saved color schemeConditional: Choose an available Shopify color scheme.
BackgroundConditional: Choose a local color when the relevant custom source is enabled.
Background gradientConditional: Use the matching control in the theme editor and preview the component before publishing.
HeadingConditional: Choose a local color when the relevant custom source is enabled.
TextConditional: Choose a local color when the relevant custom source is enabled.
Highlight columnConditional: Choose a local color when the relevant custom source is enabled.
Highlight textConditional: Choose a local color when the relevant custom source is enabled.
LinesConditional: Choose a local color when the relevant custom source is enabled.
Image frameConditional: Choose a local color when the relevant custom source is enabled.
Brand mark backgroundConditional: Choose a local color when the relevant custom source is enabled.
Brand mark iconConditional: Choose a local color when the relevant custom source is enabled.
Other mark backgroundConditional: Choose a local color when the relevant custom source is enabled.
Other mark iconConditional: Choose a local color when the relevant custom source is enabled.
Original badge backgroundConditional: Choose a local color when the relevant custom source is enabled.
Original badge textConditional: Choose a local color when the relevant custom source is enabled.
Left content: Choose the presentation or source that fits this component.Options: Text · Image
HeadingConditional: Use bold or italic in this heading to apply the global Heading DNA accent style. Change it in Theme settings > Typography.
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 color sourceConditional: Global accent styling is managed in Theme settings > Typography; choose Custom for a local color.Options: Heading DNA · Custom
Custom accent colorConditional: Choose a local color when the relevant custom source is enabled.
TextConditional: Edit the formatted text for this component.
ImageConditional: Choose an image from your shop. Preview its crop on desktop and mobile.
Image alt textConditional: Edit the text shown by this component.
Table accessibility label: Edit the text shown by this component.
Brand column: Edit the text shown by this component.
Show Original badge: Enable or disable this option and preview the result.
Original badge textConditional: Edit the text shown by this component.
Other column: Edit the text shown by this component.
Brand image: Optional. Appears above the brand column label.
Brand image alt textConditional: Leave blank to use the image alt text or brand label.
Other brand image: Optional. Appears above the other brand column label.
Other brand image alt textConditional: Leave blank to use the image alt text or column label.
Brand image widthConditional: Adjust within the range offered by the theme editor.
Other brand image widthConditional: Adjust within the range offered by the theme editor.
Column image heightConditional: Adjust within the range offered by the theme editor.
Column image fitConditional: Choose the presentation or source that fits this component.Options: Contain · Cover
Image to label spacingConditional: Adjust within the range offered by the theme editor.
Column image radiusConditional: Adjust within the range offered by the theme editor.
Check and dash size: Adjust within the range offered by the theme editor.
Top padding: Adjust within the range offered by the theme editor.
Bottom padding: Adjust within the range offered by the theme editor.
Mobile top padding: Adjust within the range offered by the theme editor.
Mobile bottom padding: Adjust within the range offered by the theme editor.
Content width: Adjust within the range offered by the theme editor.
Horizontal section inset: Adjust within the range offered by the theme editor.
Mobile horizontal inset: Adjust within the range offered by the theme editor.
Column heading horizontal padding: Adjust within the range offered by the theme editor.
Mobile heading horizontal padding: Adjust within the range offered by the theme editor.
Column heading vertical padding: Adjust within the range offered by the theme editor.
Column heading size: Adjust within the range offered by the theme editor.
Mobile column heading size: Adjust within the range offered by the theme editor.
Column heading weight: Choose the presentation or source that fits this component.Options: 400 · 500 · 600 · 700
Fallback brand image URLConditional: Optional image URL when no image is selected. Use an owned permanent Shopify CDN URL.
Fallback other image URLConditional: Optional image URL when no image is selected. Use an owned permanent Shopify CDN URL.