Popups
In this section, you can control the visibility of popups in the online store such as the Newsletter popup, Round popup, Cookies popup, and Age verification popup.
Enable popups container
Activate the option to fix the position of the popups to the page width if the "Enable page width" option is ticked in Theme settings -> Layout.
By disabling the option, the popups will appear outside the predefined width of store pages:
Newsletter popup
Note! Subscribers will be automatically added to the customer list in the Shopify admin. The complete information can be found in the article.
Tick the "Enable" checkbox to use the newsletter subscription pop-up. It is placed on the bottom left corner of the screen. All the related settings will be displayed below after activating the option:
Activate the "Show in admin" to display the pop-up in the Theme Editor.
Tick the "Show on mobile" checkbox to display the pop-up on mobile.
Use the "Delay" scale to control when the pop-up will occur after someone enters the store. The delay time can vary from 0 to 60 seconds.
On the "Cookies life" scale, set the time (in minutes) for when the pop-up will reappear on a page after the "X" button is pressed. You can adjust the time from 0 to 60 minutes. A default value of 0 minutes indicates the pop-up to be shown continuously.
The pop-up won’t appear to customers who logged into their accounts if you enable the "Show to guest users only".
Colors
Use the "Background" color picker to specify the pop-up's background color.
In the "Text" picker, set the color that will be applied to all the texts in the pop-up.
The "Border" item lets you change the default border color.
To change the text color inside the input field individually, use the "Input text" item.
The icon color can be specified in the corresponding color picker.
The color of the "X" button can be adjusted using the "Close button" item.
In the following examples, you can view how the pop-up might display on a desktop and mobile:
Round popup
Hit the "Enable" checkbox to start the round popup. It will appear above all other pop-ups in the bottom corner of all store pages. This option activates the list of related settings.
To view the pop-up in the Theme Editor, activate the "Show in admin" option.
Tick the "Show on mobile" checkbox to display the pop-up on mobile.
Enter any promotional string into the "Text" field.
Use the "Link" source selector to redirect visitors to the relevant page when they press the pop-up.
The "Width" scale determines the pop-up size. Set the value from 200 to 350 pixels.
Specify the type of text appearance in the pop-up using the "Text placement" drop-down. Select the required text type from the provided list of options. These options help to specify whether text should be duplicated and are distinguished by spaces.
In the "Image" selector, choose the image from the library or upload a new one from your device. The image will be placed right in the center of the pop-up.
Use the "Position" picker to place the pop-up on the "Left" or "Right" side of the screen.
The "Rotation speed" scale helps you to adapt the pop-up turnover speed from 1 to 8.
Use the "Delay" scale to control when the pop-up will occur after someone enters the store. The delay time can vary from 0 to 60 seconds.
On the "Cookies life" scale, set the time (in minutes) for when the pop-up will reappear on a page after the "X" button is pressed. You can adjust the time from 0 to 60 minutes. A default value of 0 minutes means the pop-up will be shown continuously.
The pop-up won’t appear to customers who logged into their accounts if you enable the "Show to guest users only".
Change the colors of popup elements using the provided color pickers: "Background", "Text", "Border", and "Close button".
The examples of the pop-up on the desktop and mobile can be viewed below:
Cookies popup
Activate the pop-up by pressing the "Enable" option. View the list of related settings after hitting the option.
Activate the "Show in admin" to display the pop-up in the Theme Editor.
Tick the "Show on mobile" checkbox to display the pop-up on mobile.
To link the Privacy Policy button to the desired page, choose the destination in the "Link button URL" resource selector or paste an external link into the field.
Use the "Delay" scale to control when the pop-up will occur after someone enters the store. The delay time can vary from 0 to 60 seconds.
On the "Cookies life" scale, set the time (in minutes) for when the pop-up will reappear on a page after the "X" button is pressed. You can adjust the time from 0 to 60 minutes. A default value of 0 minutes indicates the pop-up to be shown continuously.
The pop-up won’t appear to customers who logged into their accounts if you enable the "Show to guest users only".
Colors
Use the "Background" color picker to specify the pop-up's background color.
In the "Text" picker, set the color that will be applied to the main text paragraph.
The "Policy button" item lets you change the color of the link button.
To change the text color and border of the confirmation button in the pop-up, use the "Accept button" item.
In the following examples, you can view how the cookie pop-up might display on a desktop and mobile:
Age verification popup
Note! By confirming your age is above 18 years, the information is stored in cookies for a year. Subsequently, when a buyer revisits the store, the pop-up will not be displayed since the information retrieved from the cookies will be utilized.
To display the pop-up once a visitor enters the online store, activate the "Enable" option. When this option is enabled, the pop-up will be displayed on both desktop and mobile devices. Activating the option, additional settings will appear in this section:
To view the customizations applied to the button in the Theme Editor, activate the "Show in admin" checkbox.
Choose the destination in the "Link for an exit button" resource selector or paste an external link to the field in order to redirect visitors to the desired page by pressing the "Exit" button in the pop-up.
Use the "Delay" scale to control when the pop-up will occur after someone enters the store. The delay time can vary from 0 to 60 seconds.
On the "Cookies life" scale, set the time (in minutes) for when the pop-up will reappear on a page after the "X" button is pressed. You can adjust the time from 0 to 60 minutes. A default value of 0 minutes indicates the pop-up to be shown continuously.
The pop-up won’t appear to customers who logged into their accounts if you enable the "Show to guest users only".
Colors
Use the "Background" color picker to specify the pop-up's background color.
In the "Text" picker, set the color that will be applied to the heading and main text paragraph.
Set the color in the "Border" color picker to highlight the pop-up.
To change the text color and border of the confirmation button in the pop-up, use the "Accept button" item.
The "Exit button" item lets you change the background color of the second button.
In the following examples, you can view how the cookie pop-up might display on a desktop and mobile:
How to edit texts in the pop-ups?
Tip: The texts can be edited in your Shopify admin -> Edit default theme content -> Theme content.
Press the dotted [...] button in the top left corner to navigate to Theme content:
Then, choose the tab "General" and scroll down to the pop-up settings:
Last updated