Skip to documentation

Product highlight cards

Placement and available controls for the Product highlight cards block.

Where to find it

Open the parent section and use Add block where this block is offered.

Editor controls

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

Color source
Theme colors use Color DNA, Color scheme uses a shared Shopify preset, and Custom affects only this block.Options: Theme colors · Color scheme · Custom
Color schemeConditional
Choose an available Shopify color scheme.
Card backgroundConditional
Choose a local color when the relevant custom source is enabled.
Card textConditional
Choose a local color when the relevant custom source is enabled.
Title and iconConditional
Choose a local color when the relevant custom source is enabled.
Card borderConditional
Choose a local color when the relevant custom source is enabled.
Card background
Choose a local color when the relevant custom source is enabled.
Card text color
Choose a local color when the relevant custom source is enabled.
Card accent color
Choose a local color when the relevant custom source is enabled.
Border color
Choose a local color when the relevant custom source is enabled.
Desktop columns
Choose the presentation or source that fits this component.Options: 1 · 2 · 3 · 4
Mobile columns
Choose the presentation or source that fits this component.Options: 1 · 2 · 3
Gap
Adjust within the range offered by the theme editor.
Mobile gap
Adjust within the range offered by the theme editor.
Icon and text gap
Adjust within the range offered by the theme editor.
Mobile icon and text gap
Adjust within the range offered by the theme editor.
Card radius
Adjust within the range offered by the theme editor.
Vertical padding
Adjust within the range offered by the theme editor.
Horizontal padding
Adjust within the range offered by the theme editor.
Mobile vertical padding
Adjust within the range offered by the theme editor.
Mobile horizontal padding
Adjust within the range offered by the theme editor.
Card min height
Adjust within the range offered by the theme editor.
Mobile card min height
Adjust within the range offered by the theme editor.
Border width
Adjust within the range offered by the theme editor.
Show shadow
Enable or disable this option and preview the result.
Icon size
Adjust within the range offered by the theme editor.
Mobile icon size
Adjust within the range offered by the theme editor.
Title size
Adjust within the range offered by the theme editor.
Mobile title size
Adjust within the range offered by the theme editor.
Title weight
Choose the presentation or source that fits this component.Options: Semi Bold · Bold · Extra Bold
Subtitle size
Adjust within the range offered by the theme editor.
Mobile subtitle size
Adjust within the range offered by the theme editor.
Mobile subtitle lines
Adjust within the range offered by the theme editor.
Subtitle weight
Choose the presentation or source that fits this component.Options: Normal · Medium · Semi Bold
Subtitle top spacing
Adjust within the range offered by the theme editor.
Top margin
Adjust within the range offered by the theme editor.
Bottom margin
Adjust within the range offered by the theme editor.
Mobile top margin
Adjust within the range offered by the theme editor.
Mobile bottom margin
Adjust within the range offered by the theme editor.

Still need a hand?

Send support your store domain, theme version, error code and what you tried. Keep authentication tokens out of public messages.

Contact Scale support ↗