Appearance
Popup ​
This guide describes how to set up the Popup section.
Use this section to display a popup over your store's pages. This section is typically used to display promotional and advertising messages to your store's visitors.
For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks.
Configure the Popup section ​
To configure your Popup section:
In the Theme editor, use the theme templates dropdown at the top of the page to select a page that contains a Popup section.
Note
The section can be added to the Overlay area of any page except Gift card, Checkout and customer accounts, and Password pages. To add the section to the current page, select Add section > Popup. Refer to Shopify help: Add a section.
From the side menu, select Popup.
Select a setting described in the following table.
| Setting name | Description |
|---|---|
| Enable popup | Set the Enable popup option to on or off. With this option enabled, the popup is displayed to your store's visitors. |
| Position | Use the Position option to specify a position for the section. The options are Center or Bottom right on desktop / Bottom center on mobile. To use this option, turn on the Enable popup option. |
| 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 the Theme editor. Visit your store's home page in a web browser to preview your adjustments. To use this option, turn on the Enable popup option. |
| Frequency | Adjust the Frequency slider to set the number of days before a closed popup reappears to a store visitor. The slider ranges from 2 to 30 days. To use this option, turn on the Enable popup option. |
| Call to action | Use the Call to action options to choose the type of prompt displayed in the section. The options are Newsletter and Button. The Newsletter option displays a form that visitors can use 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 to the section. To use this option, turn on the Enable popup option. To learn how to manage customer details, refer to Shopify help: Managing customers. |
| Button link | In the Button link field, enter a URL or select a link to a store page. The link is applied to the section's button. To use this option, turn on the Enable popup option and set Call to action to Button. |
| Button text | In the Button text field, enter the label for the section's button. To use this option, turn on the Enable popup option and set Call to action to Button. |
| Full width button | Set the Full width button option to on or off. With this setting enabled, the button spans the full width of the section's content area. To use this option, enable the Enable popup option and set the Call to action option to Button. |
| Float close button above card | Set the Float close button above card option to on or off. With this setting enabled, a button for closing the popup is displayed above the card in the section. To use this option, turn on the Enable popup option. |
| Content > Title | Enter text in the Title field, enter text to display as the section's title. Format the text and add links using the inline editor. To use this option, turn on the Enable popup option. |
| Content > Title size | Use the Title size option to apply the Secondary or Standard heading text size to the section's title text. To use this option, turn on the Enable popup option and add text into the Title field. |
| Content > Text | In the Text field, enter text to display as body text in the section. Format the text and add links using the inline editor. To use this option, turn on the Enable popup option. |
| Content > Secondary text | In the Secondary text field, enter text to display as secondary text in the section. Add links and styling as needed. To use this option, turn on the Enable popup option. |
| Content > Text alignment | Use the Text alignment option to align the section's text to the Left, Center, or Right. To use this option, turn on the Enable popup option. |
| Image > Show image | Use the Show image option to show or hide the section's image. To use this option, turn on the Enable popup option and enable the Show image option. |
| Image > Position | Use the Position option to position the section's image at the Top or Bottom. To use this option, turn on the Enable popup option and enable the Show image option. |
| Image > Image | Use the Image picker to select an image to display in the section. To use this option, turn on the Enable popup option and enable the Show image option. |
| Image > Shape | Use the Shape options to select a shape to apply to media items in the section's product grid tiles. Options include Default, Ellipse, Pill, Archway, and more. Note that selecting some shapes will crop the image. To use this option, turn on the Enable popup option and enable the Show image option. |
| Image > Crop | Use the Crop option to select No crop, Landscape, Square, or Portrait. This setting controls the width to height ratio for displaying the section's image. To use this option, turn on the Enable popup option and enable the Show image option. |
| Image > Blob type | Adjust the Blob type slider between 1 and 20. Use this option to specify the type of blob to apply to the section's image. To use this option, turn on the Enable popup option, enable the Show image option, and set the Shape option to Blob. |
| Image > Rotate | Adjust the Rotate slider between -90 and 90 deg. Use this option to rotate the section's image. To use this option, turn on the Enable popup option and enable the Show image option. |
| Color > Color scheme | Use the Color scheme picker to select a color scheme for the section. |
| Color > Use card colors | Set the Use card colors option to on or off. With this option enabled, the background color of the card from the next section is applied to the popup. |
| Color > Use gradient for background | Set the Use gradient for background option to on or off. Use this option to turn on or off using a gradient as the section's background. Note that this setting does not apply when using card colors. |
| 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 CSS field, 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. |
Note
To connect a metafield to a setting that supports metafields, select the Connect dynamic source icon displayed beside the setting in the Theme editor.
To learn how to connect a metafield to a supported setting, refer to Shopify help: Connecting metafields to your theme by using the Theme editor.
Configure a block in a Popup section ​
To configure a block for your Popup section:
In the Theme editor, use the theme templates dropdown at the top of the page to select a page that contains a Popup section.
From the side menu, expand the Popup section menu.
To configure an existing block, select the block from the side menu.
To add a new block, select Add block, choose a block to add, and then select the block you added.
Note
In the section, you can add, remove, show, hide, and move blocks. Refer to Configure blocks inside a section and Shopify help: Sections and blocks.
Apply a block setting described in the following table.
| Block name | Block description | Block setting(s) |
|---|---|---|
| Sticker | Overlays the section with a stylized sticker. | Refer to Stickers. |