Skip to content

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:

  1. 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.

  2. From the side menu, select Popup.

    The Popup section selected in Theme editor.

  3. Select a setting described in the following table.

Setting nameDescription
Enable popupSelect the Enable popup checkbox to show/hide the section.
DelayAdjust 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.
FrequencyAdjust 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 > HeadingIn the Heading box, enter text to display as title text inside the section.
Content > TextIn 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 sourceTo 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 sizeUse 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 actionUse 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 linkIn 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 sourceTo 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 textIn 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 schemeUse 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 settingsIf available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSSSelect 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 sectionSelect Remove section to delete the section from the current page.