Hero

Where to find it

Available content blocks

• Sale badge
• Rating
• Benefit
• Buttons
• Guarantee
• As seen logo

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.

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.

Text

Edit the formatted text for this component.

Heading max width

Adjust within the range offered by the theme editor.

Text max width

Adjust within the range offered by the theme editor.

Background 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

Mobile background image

Optional. Uses the desktop background image on mobile when empty.

Included mobile background

An uploaded mobile background takes priority.Options: None · Daily greens scene

Mobile content layout

Choose the presentation or source that fits this component.Options: Centered overlay · Bottom glass panel

Mobile hero minimum heightConditional

Adjust within the range offered by the theme editor.

Background image position

Choose the presentation or source that fits this component.Options: Center · Top · Bottom · Left · Right

Show as seen row

Enable or disable this option and preview the result.

LabelConditional

Edit the text shown by this component.

As seen color sourceConditional

Theme colors are managed in Theme settings > Colors; choose Custom for local overrides.Options: Section colors · Custom

As seen backgroundConditional

Choose a local color when the relevant custom source is enabled.

As seen textConditional

Choose a local color when the relevant custom source is enabled.

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.

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.

Image shade

Adjust within the range offered by the theme editor.

Image shade color

Choose a local color when the relevant custom source is enabled.

Image shade style

Choose the presentation or source that fits this component.Options: Left gradient · Solid

Heading level

Choose the presentation or source that fits this component.Options: H1 · H2

Heading size

Adjust within the range offered by the theme editor.

Banner layout

Choose the presentation or source that fits this component.Options: Full width · Inset rounded panel

Panel widthConditional

Adjust within the range offered by the theme editor.

Panel corner radiusConditional

Adjust within the range offered by the theme editor.

Minimum height

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.