Custom hero

Layout, content and available controls for Custom hero.

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

Rating
Benefit
Guarantee
Trust badge
Portrait testimonial

Editor controls

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

Show section ID copy button: 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
Hero surface mode: A continuous surface avoids a color seam between text and media.Options: One continuous surface · Full background image · Separate media panel (legacy)
Full background imageConditional: Choose an image from your shop. Preview its crop on desktop and mobile.
Mobile background imageConditional: Choose an image from your shop. Preview its crop on desktop and mobile.
Background image tintConditional: Adjust within the range offered by the theme editor.
Edge-to-edge hero: Enable or disable this option and preview the result.
Use included model cutoutConditional: Replaces the starter product image when no uploaded image is selected.
Foreground image scaleConditional: 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.
Full background gradient (optional)Conditional: Overrides Background and fills the complete rounded hero, including behind transparent PNG images.
HeadingConditional: Choose a local color when the relevant custom source is enabled.
TextConditional: Choose a local color when the relevant custom source is enabled.
AccentConditional: Choose a local color when the relevant custom source is enabled.
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.
Show image fade: Enable or disable this option and preview the result.
Image fade colorConditional: Choose a local color when the relevant custom source is enabled.
Show benefit background: Enable or disable this option and preview the result.
Benefit backgroundConditional: Choose a local color when the relevant custom source is enabled.
Benefit textConditional: Choose a local color when the relevant custom source is enabled.
Benefit iconConditional: Choose a local color when the relevant custom source is enabled.
Benefit borderConditional: Choose a local color when the relevant custom source is enabled.
Benefit border width: Adjust within the range offered by the theme editor.
Benefit border radius: Adjust within the range offered by the theme editor.
Benefit max width: Adjust within the range offered by the theme editor.
Benefit gap: Adjust within the range offered by the theme editor.
Mobile benefit gap: Adjust within the range offered by the theme editor.
Benefit horizontal padding: Adjust within the range offered by the theme editor.
Benefit vertical padding: Adjust within the range offered by the theme editor.
Mobile benefit horizontal padding: Adjust within the range offered by the theme editor.
Mobile benefit vertical padding: Adjust within the range offered by the theme editor.
Heading: Bold or italic text uses Heading DNA. Edit it in Theme settings > Typography.
Introduction: Optional supporting copy below the heading.
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 source: Heading DNA uses Theme settings > Typography. Custom changes only the color or gradient in this section; the accent font and style stay global.Options: Heading DNA · Custom
Custom heading accentConditional: Choose the presentation or source that fits this component.Options: Solid color · Gradient
Custom 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.
Image: Choose an image from your shop. Preview its crop on desktop and mobile.
Starter image: Optional included demo photography. An uploaded image above always takes priority.Options: None · Skincare · Supplement · Matcha · Pet Supplement · Shapewear · Led Mask · Vacuum
Use included product cutoutConditional: Used for the skincare starter family when no uploaded image is selected. Turn off the model cutout to preview the product cutout.
Section frame radius: Adjust within the range offered by the theme editor.
Image fit: Choose the presentation or source that fits this component.Options: Contain - show full image · Cover - fill frame · Stretch
Image position: Choose the presentation or source that fits this component.Options: Center · Top · Bottom · Left · Right
Frame backgroundConditional: Choose a local color when the relevant custom source is enabled.
Frame border radiusConditional: Adjust within the range offered by the theme editor.
Frame inner paddingConditional: Adjust within the range offered by the theme editor.
Desktop frame width: Adjust within the range offered by the theme editor.
Desktop frame height: Adjust within the range offered by the theme editor.
Small desktop frame width: Adjust within the range offered by the theme editor.
Small desktop frame height: Adjust within the range offered by the theme editor.
Mobile image position: Choose the presentation or source that fits this component.Options: After content · Before content
Mobile frame ratio: Choose the presentation or source that fits this component.Options: Wide · Default · Square · Portrait
Heading size: Adjust within the range offered by the theme editor.
Mobile heading size: Adjust within the range offered by the theme editor.
Heading weight: Choose the presentation or source that fits this component.Options: Bold · Extra bold · Black
Heading line height: Edit the text shown by this component.
Heading to benefits gap: Adjust within the range offered by the theme editor.
Uppercase heading: Enable or disable this option and preview the result.
Benefit text size: Adjust within the range offered by the theme editor.
Mobile benefit text size: Adjust within the range offered by the theme editor.
Benefit text weight: Choose the presentation or source that fits this component.Options: Book · Medium · Semibold · Bold
Benefit icon size: Adjust within the range offered by the theme editor.
Button label: Edit the text shown by this component.
Button link: Choose the destination for this link or button.
Button action: Choose the presentation or source that fits this component.Options: Open link · Scroll to section
Scroll target: Use a CSS selector like #MainContent or #shopify-section-template--123__section_id.
Open link in new tab: Enable or disable this option and preview the result.
Button style: Global button styling is managed in Theme settings > Buttons.Options: Primary · Secondary · Tertiary · Custom
Uppercase button: Enable or disable this option and preview the result.
Size source: Choose the presentation or source that fits this component.Options: Theme button DNA · Custom dimensions
Minimum heightConditional: Adjust within the range offered by the theme editor.
Mobile minimum heightConditional: Adjust within the range offered by the theme editor.
Vertical paddingConditional: Adjust within the range offered by the theme editor.
Mobile vertical paddingConditional: Adjust within the range offered by the theme editor.
Horizontal paddingConditional: Adjust within the range offered by the theme editor.
Font sizeConditional: Adjust within the range offered by the theme editor.
Mobile font sizeConditional: Adjust within the range offered by the theme editor.
Font weightConditional: Choose the presentation or source that fits this component.Options: Regular · Medium · Semibold · Bold · Extra bold
Button maximum width: Adjust within the range offered by the theme editor.
Button width: Choose the presentation or source that fits this component.Options: Fill available width · Fit label
Override button radius: Enable or disable this option and preview the result.
Button corner radiusConditional: Adjust within the range offered by the theme editor.
Button border widthConditional: Adjust within the range offered by the theme editor.
Custom button backgroundConditional: Choose a local color when the relevant custom source is enabled.
Custom button textConditional: Choose a local color when the relevant custom source is enabled.
Custom button borderConditional: Choose a local color when the relevant custom source is enabled.
Custom hover backgroundConditional: Choose a local color when the relevant custom source is enabled.
Custom hover textConditional: Choose a local color when the relevant custom source is enabled.
Custom hover borderConditional: Choose a local color when the relevant custom source is enabled.
Custom button shadowConditional: Choose a local color when the relevant custom source is enabled.