Appearance
Popup
This guide describes setting up the Popup section.
Use the section display a small temporary window over your store's pages. The section is typically used to contain promotional and advertising messages for your store's visitors.
The previous video shows a Popup section at the bottom of a store's home page. The section contains the text "Receive special offers..." and a form that allows visitors to subscribe to the store's newsletter. In the upper left, part of Theme editor's section menu is displayed. The menu's Enable popup option is checked (set to on). With the setting enabled, the section displays on the store's home page.
For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks.
Set up a Popup section
To set up a Popup section:
Go to Customize theme.
In Theme editor, at the top of the page, use the dropdown to select the home page.
Note
The section is accessible from all pages, excluding the Checkout, Password, and Gift card pages.
From the side menu, select Popup.
Select a setting described in the following table.
| Setting name | Description |
|---|---|
| Enable popup | Select the Enable popup checkbox to show/hide the section. |
| Delay | Adjust the Delay slider to set a delay between 2 sec and 30 sec (seconds) before the section appears on a page. Changes to the delay time cannot be previewed from inside Theme editor. Visit your store's home page in a web browser to preview your adjustments. |
| Frequency | Adjust the Frequency slider to set the number of days before a closed popup reappears. The minimum slider value is 2 day and the maximum is 30 day. |
| Content > Heading | In the Heading box, enter text to display as title text inside the section. |
| Content > Text | In the Text box, enter text to display as body text inside the section. Format the text and add links using the Text editor pane. |
| Content > Text > Connect dynamic source | To display body text from a dynamic source, select the Connect dynamic source icon beside the Text box, and then choose a metafield to add. Refer to Shopify help: Metafields. |
| Content > Text size | Use the Text size setting to specify a size for the section's text. The options are S = small, M = medium, L = large, and XL = extra large. |
| Content > Call to action | Use the Call to action options to set the type of prompt to display inside the section. The options are Newsletter signup or Button. The Newsletter signup option provides store visitors with a form to subscribe to your store's newsletter. Subscribers' email addresses are added to your store's "accepts marketing" list. The Button option adds a button inside the section. |
| Content > Customer list (link) | To manage your customers' details, follow the customers list link to the Customers page in your store's Shopify admin. Refer to Shopify help: Managing customers. |
| 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 Link box. To use the link, set the Call to action option to Button. |
| Content > Button link > Connect dynamic source | To display a button link from a dynamic source, select the Connect 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 button label text inside the section. To use the label, set the Call to action dropdown to Button. |
| Color > Color scheme | Use the Color scheme options to select a color scheme for the section. Refer to Colors. |
| Color > Theme settings (link) | Follow the Theme settings link to open Theme editor's Color theme settings. Use the settings to edit the theme colors for your entire store. |
| Theme settings | If available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu. |
| Custom CSS | 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. |
| Remove section | Select Remove section to delete the section from the current page. |