Promo Pop-Up

Layout, content and available controls for Promo Pop-Up.

Scale Theme · v1.9.3 · 2 min read

Where to find it

This is a template or group section. Open its existing template or group in the theme editor.

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
Display mode: Test mode displays your popup without delay each time even after dismissing it. Success test mode skips the form and opens directly in the success state for previewing the discount-code view. Switch to Enabled once you are happy with how your popup looks.Options: Disabled · Test mode · Success test mode · Enabled
Delay: Time interval, in seconds, after which the modal will appear.
Frequency: Number of days before a dismissed popup reappears.
Display countdown timer: IMPORTANT: Due to liquid limitations, ONLY in TEST MODE, you need to refresh the page after certain changes to display the correct timer. This does NOT happen when the Pop Up is published.
Timer duration: Adjust within the range offered by the theme editor.
Image: Upload an image to use the side-by-side layout. Leave empty for the compact vertical layout with email field and big countdown.
Desktop image position: Only applies when an image is uploaded.Options: Image first · Image second
Color source: Theme colors follow Theme settings > Colors. Other sources apply only to this section.Options: Use theme colors · Choose a color scheme
Saved color schemeConditional: Choose an available Shopify color scheme.
Heading prefix: Edit the text shown by this component.
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.
Heading size: Choose the presentation or source that fits this component.Options: Small · Medium · Large
Heading suffix: Edit the text shown by this component.
Text: Edit the formatted text for this component.
Email field placeholder: Edit the text shown by this component.
Sign up button label: NOTE: Make sure you put in your own discount code in the settings under "SUCCESS" category down below.
Dismiss button label: Edit the text shown by this component.
Discount code: Edit the text shown by this component.
Heading prefix: Edit the text shown by this component.
Heading: Edit the text shown by this component.
Heading size: Choose the presentation or source that fits this component.Options: Small · Medium · Large
Heading suffix: Edit the text shown by this component.
Text: Edit the formatted text for this component.
Discount code field label: Edit the text shown by this component.
Copy button label: Edit the text shown by this component.
Copied successful message: Edit the text shown by this component.
Dismiss button label: Edit the text shown by this component.
Display image in success mode: Enable or disable this option and preview the result.
Custom CSS: Scoped to this section only.