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 right, the Popup section menu is displayed in Theme editor. Inside the menu, the Enable popup checkbox option is toggled on/off to show/hide the Popup section on the store's homepage.

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. At the top of the page, use the dropdown to select the Home page template.

    Note

    The popup section is accessible from all page templates, excluding the Checkout, Password, and Gift card page templates.

  2. From the side menu, select Popup.

    The popup section selected in Theme editor.

  3. Select a section setting described in the following table.

Section setting nameDescription
Enable popupSelect the Enable popup checkbox to show/hide the section.
DelayAdjust the Delay slider to set a delay between 2s and 30s (seconds) 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.
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 following Image selector options to set up an image inside the section.
  • To add an image, choose Select image, and then upload an image or select an image file from your store's file library.
  • To add a focal point to an image, select Edit in the image selector's thumbnail preview area, and then select Add focal point. Refer to Shopify help: Add a focal point to an image, and Edit an image inside a section or block.
  • To add "alt text" to an image, select Edit, and then enter a brief description of the image into the Image alt text box. The description improves search engine optimization (SEO), and provides greater accessibility for customers who use screen-reading tools. The text is saved immediately. Refer to Shopify help: Adding alt text to media
  • To download an image, select Edit > Download.
  • To replace an image, choose Change > Change image, and then select or upload a new image.
  • To remove an image, select Change > Remove image.
  • To display an image from a dynamic source, select the Change > Connect dynamic source, and then choose a metafield to add. Refer to Shopify help: Metafields
Content > Image > Connect dynamic sourceTo display an image from a dynamic source, select the Connect dynamic source icon beside the Image selector, and then choose a metafield to add. Refer to Shopify help: Metafields
Content > Image positionSelect the Image position radio buttons 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 > TextIn the Text box, enter (body) text to display inside the section. Format the text using the Text editor pane
Content > Call to actionSelect 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 linkIn the Link box, enter a URL or select a store page to link to. 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 dropdown to Button.
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 dropdown to Button.