Pop-up section

This section was introduced in version 2.3

Enhance your customer engagement with our new Pop-up section, accessible through the Overlays section group in your Shopify theme. This feature allows you to create dynamic, eye-catching pop-ups that can be customized to fit the look and feel of your store.

Section settings

Image: Upload an image to display in your pop-up. This could be promotional content, an advertisement, or any visual that aligns with your campaign.

Image position on desktop: Choose where the image will be positioned within the pop-up when viewed on a desktop. Options include Top, Left, or Right, allowing you to optimize the layout for better visibility and interaction.

Pop-up content width: Set the (maximum) width of the content area within the pop-up. This is measured in pixels and helps ensure that the pop-up looks good on all devices.

Pop-up position: Select the position on the screen where the pop-up will appear. You can place it at the Center, Bottom Left, or Bottom Right of the screen, making it easier to catch your visitor’s eye without disrupting their browsing experience.

Appearance delay: Control the timing of your pop-up’s appearance. Set a delay in seconds to specify how long after your store loads before the pop-up displays, which can be immediate or after a delay to capture attention at the right moment.

Hide on mobile/Hide from logged in customers: These options allow for greater control over who sees your pop-ups. Choose to hide the pop-up from mobile users for a cleaner mobile experience, or from customers who are logged in to create a more personalized browsing environment.

Colors

Hotspot Color: Customize the color of the hotspot markers to make them stand out or blend with the image.

Color scheme: Select one of the predefined color schemes as defined in Theme settings > Colors. For more information regarding the color schemes please refer to our article about creating your own color scheme.

Section spacing

The section spacing settings gives you the option to adjust the top & bottom section spacing values.

Blocks

The content of the Pop-up section can be customized by using blocks that are designed specifically for it, those include:

Heading Block

Heading: Enter the text for the heading, which can be used to introduce your brand or highlight important information.

Heading size: Select from normal or other size options to ensure the heading fits well within your pop-up design.

Text Block

Description: This field allows you to enter detailed text that could include information about your brand, product descriptions, announcements, or welcoming messages.

Text size: Choose from small, normal, or large to make the text appropriate for your layout and easily readable.

Button Block

Label: Customize the label of the button to guide users on what action they will perform when clicked.

Link: Specify the URL or site destination that the button should direct to upon being clicked.

Countdown Block

Countdown date: Set the specific date and time for the countdown timer to target, formatted as YYYY/MM/DD HH:MM:SS (e.g. 2025/01/0/1 12:30:00). You can omit the time.

Hide section after the countdown has expired: Optionally hide this countdown block once the timer reaches zero.

Expiration message: Provide a message that will display to customers if they view the pop-up after the countdown has expired.

Signup Form Block

Enable consent checkbox: Add a checkbox for your customers to give their explicit consent before submitting their email for newsletters or updates.

Consent checkbox text: Customize the text alongside the checkbox to clarify what your customers are agreeing to when they check it.