Split Product CTA

Layout, content and available controls for Split Product CTA.

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

Benefit badge

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
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.
Presentation: Choose the presentation or source that fits this component.Options: Standard split · Inset panel with vertical ticker
Ticker textConditional: Edit the text shown by this component.
Ticker separatorConditional: Edit the text shown by this component.
Desktop ticker text sizeConditional: Adjust within the range offered by the theme editor.
Ticker durationConditional: Adjust within the range offered by the theme editor.
Motion control accessible labelConditional: Edit the text shown by this component.
Image: Choose an image from your shop. Preview its crop on desktop and mobile.
External image fallbackConditional: Optional public image URL. An uploaded image takes priority.
Starter image: Uploaded image takes priority over the included demo photo.Options: None · Skincare · Supplement · Matcha · Pet Supplement · Shapewear · Led Mask · Vacuum
Starter photoConditional: Choose the presentation or source that fits this component.Options: Hero · Detail · Lifestyle · Portrait
Image alt text: Edit the text shown by this component.
Customize layout: Show image fit, text spacing, alignment, and mobile ordering controls.
Image fitConditional: Choose the presentation or source that fits this component.Options: Contain · Cover
Image positionConditional: Choose the presentation or source that fits this component.Options: Center · Top · Bottom · Left · Right
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: 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.
Customize typography: Show heading and body size, weight, and spacing controls for desktop and mobile.
Heading min sizeConditional: Adjust within the range offered by the theme editor.
Heading viewport sizeConditional: Adjust within the range offered by the theme editor.
Heading max sizeConditional: Adjust within the range offered by the theme editor.
Heading font weightConditional: Adjust within the range offered by the theme editor.
Heading line heightConditional: Adjust within the range offered by the theme editor.
Heading letter spacingConditional: Adjust within the range offered by the theme editor.
Heading transformConditional: Choose the presentation or source that fits this component.Options: None · Uppercase
Body text: Edit the formatted text for this component.
Text top gapConditional: Adjust within the range offered by the theme editor.
Text max widthConditional: Adjust within the range offered by the theme editor.
Body text sizeConditional: Adjust within the range offered by the theme editor.
Body text weightConditional: Adjust within the range offered by the theme editor.
Body line heightConditional: Adjust within the range offered by the theme editor.
Button style: Global button styling is managed in Theme settings > Buttons.Options: Primary · Secondary · Tertiary · Custom
Button label: Edit the text shown by this component.
Button link: Choose the destination for this link or button.
Open in new tab: Enable or disable this option and preview the result.
Guarantee text: Edit the text shown by this component.
Mobile heading min sizeConditional: Adjust within the range offered by the theme editor.
Mobile heading max sizeConditional: Adjust within the range offered by the theme editor.
Mobile body text sizeConditional: Adjust within the range offered by the theme editor.
Mobile text alignmentConditional: Choose the presentation or source that fits this component.Options: Left · Center
Mobile image orderConditional: Choose the presentation or source that fits this component.Options: Before content · After content
Mobile content orderConditional: Choose the presentation or source that fits this component.Options: Before image · After image
BackgroundConditional: Choose a local color when the relevant custom source is enabled.
TextConditional: Choose a local color when the relevant custom source is enabled.
Accent fallbackConditional: 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.
Button backgroundConditional: Choose a local color when the relevant custom source is enabled.
Button hover backgroundConditional: Choose a local color when the relevant custom source is enabled.
Button textConditional: Choose a local color when the relevant custom source is enabled.
Button borderConditional: Choose a local color when the relevant custom source is enabled.