Promotional popup

The Popup can be used for promotions and announcements. The alternate Flyout popup includes the same settings but appears from the bottom of the screen rather than floating over the page.

Add promotional popup

STEPS

In your theme editor (Customize):

1. Click the arrow next to the Popup section to show the nested content blocks.

2. Click (+) Add block and choose Popup or Flyout.

   Click the new Popup block to open the settings.

Behaviour

The Behaviour options control when, where, and how often your popup appears. Click on the Popup block to open the settings.

STEPS

In your theme editor (Customize):

1. Set the Delay Appearance option to choose when to show the popup: immediately, after a set amount of time, or when customers scroll down a percentage of the page.

   

   Select Show on exit-intent to show the popup when the customer's cursor accelerates or leaves your site before your popup is set to appear.

2. Set the Frequency to control how often a popup appears to the same customer once they have dismissed the first popup.

   Popups that appear too frequently can overwhelm your customer. Limit the timing and frequency of your popup for the best results.

3. Select Disable for account holders so customers who have signed up for a store account won't see the popup.

4. Select Show on specific page and click on the Target page field to select a page from your store.

   Use this option to create a popup that's relevant to specific products, collections, or other pages.

5. Click Save.

Content

Customize the headings, buttons, and text content of your Popup.

STEPS

In your theme editor (Customize):

1. Enter Accent text to display a small label above the main heading.

   We recommend one or two words that label what the popup is about.

   
2. Enter Heading text for the title of your popup.

   We recommend a short title of a few words.

   Set the Heading Size to Small, Medium, or Large.

3. Enter Text to display below the heading.

   Add a few sentences to tell customers about a promotion or other information.

4. Select or paste a URL for the Button link.

5. Enter text for the Button label.

   The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

6. (Optional.) Change the default "No thanks" Dismiss text of the button that closes the popup when clicked.

7. (Optional.) Enter the Footer text to display a short note at the bottom of the popup.

   The Footer text works well for disclaimers or additional information.

8. Enable Show social icons to display icons that link to your social media accounts.

9. Click Save.

Design

Design your popup with custom colors, images, and content layout.

STEPS

In your theme editor (Customize):

1. If using the Flyout popup, select the Flyout position to display it on the Bottom left or Bottom right on desktop screens.

2. Set the Popup size to Small, Medium, or Large.

3. Select the Content alignment to position the headings and buttons to the Left, Right, or Center of the popup.

4. Add an Image to show within your Popup.

   Set the Image position to the Top, Center, or Left or use it for the entire popup Background.

   Select the Image focal point to choose which area of the image to keep centered and visible.

   Choose whether to Show image on mobile. If enabled, the image will always appear as the background on mobile.

5. Select custom colors for the Background, Text, and Buttons.

6. (Optional.) Select an Overlay color and enable it by increasing the Overlay opacity with the slider.

   These settings help make your text clear and readable by increasing the contrast between the text and background image

7. Click Save.

---

Related links Promotional popup Countdown popup Age verification