This guide describes setting up the Popup section.
Use the section to overlay your store's pages with a small window. Add promotional or advertising messages for your store's visitors into the section.
The left side of the previous video shows the Popup section menu in Theme editor. To show the section, the Enable popup checkbox is set to
on . On the right, the section displays at the bottom of a store's Homepage.
Set up a Popup section
To set up a Popup section:
Go to Customize theme.
At the top of the page, use the dropdown to select the Homepage template.
The section is accessible from all page templates, excluding the Checkout, Password and Gift card pages. By default, Theme editor displays the section in a page's Overlay area.
From the side menu, select Popup.
Select a setting described in the following table.
|Select the Enable popup checkbox to show/hide the section.
|Adjust the Delay slider to set a delay between
2s (seconds) and
30s before the section appears on a page. Changes to the delay time cannot be previewed from inside Theme editor. Visit your store's homepage in a web browser to preview your adjustments.
|Adjust the Frequency slider to set the number of days before a closed popup reappears. The minimum slider value is
2d (days) and the maximum is
|Content > Heading
|In the Heading box, enter text to display as a title inside the section.
|Content > Text
|In the Text box, enter body text to display inside the section. Format the text and add links using the Text editor pane.
|Content > Text > Insert dynamic source
|To display text from a dynamic source, select the Insert dynamic source icon, beside the Text box, and then choose a metafield to add. Refer to Shopify help: Metafields.
|Content > Call to action
|Select the Call to action radio buttons to set the type of prompt to display inside the section. The options are Newsletter signup or Button. Inside the section, Newsletter signup prompts visitors to subscribe to your store's newsletter. Subscribers' email addresses are added to your store's "accepts marketing" list. To manage your customers' details, follow the customers list link to the Customers page in your store's admin. Refer to Shopify help: Managing customers. The Button option adds a button inside the section.
|Content > Button link
|In the Button link box, enter a URL or select a link to a store page. The link is displayed inside the section. To remove a link, select the X icon inside the Button link box. To use the link, set the Call to action dropdown to Button.
|Content > Button link > Insert dynamic source
|To display a button link from a dynamic source, select the Insert dynamic source icon, beside the Button link box, and then choose a metafield to add. Refer to Shopify help: Metafields.
|Content > Button text
|In the Button text box, enter text to display as a button label inside the section. To use the label, set the Call to action dropdown to Button.
|Select Custom CSS. In the box, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS.