Appearance

Popup ​

This guide describes setting up the Popup section.

Use the section to display a small temporary window over your store's pages. The popup is typically used to contain promotional and advertising messages for your store's visitors.

In the previous video, on the left, part of Theme editor's Popup section menu is displayed. The menu's Enable popup option is changed from off to on. With this setting enabled, the Popup 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 the popup section ​

To set up your store's 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 section 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 s and 30 s (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 2d (days) and the maximum is 30d.
Content > ImageUse the following Content > Image selector options to set up an image inside the section. The image is not displayed on mobile devices. Use the Image selector options to set up an image inside the section. Refer to Edit an image inside a section or block.
Content > Image > Connect dynamic sourceTo display an image from a dynamic source, if available, select the Connect dynamic source icon beside the Image selector, and then choose a metafield to add. Refer to Shopify help: Metafields.
Content > Image positionUse the Image position options to position the image to the Left or Right, inside the section.
Content > HeadingIn the Heading box, enter text to display as a title inside the section.
Content > Heading > Connect dynamic sourceTo display heading text from a dynamic source, if available, select the Connect dynamic source icon beside the Headingt box, and then choose a metafield to add. Refer to Shopify help: Metafields.
Content > TextIn the Text box, enter (body) text to display inside the section. Format the text and add links using the Text editor pane.
Content > Text > Connect dynamic sourceTo display text from a dynamic source, if available, select the Connect dynamic source icon beside the Text box, and then choose a metafield to add. Refer to Shopify help: Metafields.
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. 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 linkIn the Link box, enter a URL or select a link to 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 link from a dynamic source, if available, 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 a button label inside the section. To use the label, set the Call to action option to Button.
Content > Button text > Connect dynamic sourceTo display button label text from a dynamic source, if available, select the Connect dynamic source icon beside the Button text box, and then choose a metafield to add. Refer to Shopify help: Metafields.
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.