Popup

1. What is a popup?

The pop-up feature in the Eurus theme provides an effective way to capture user attention and convey important messages or promotions. It offers unlimited pop-ups (in both minimal and full style of popup), allowing for easy customization to match your brand's aesthetic. Additionally, it includes features such as countdown timers and scheduling options, enabling you to create engaging and time-sensitive pop-up campaigns to enhance user engagement and drive conversions.

✍️ How to locate the Popup section in Theme Editor:

1. Open the Theme Editor in your Shopify admin (Online store > Themes > Customize).
2. In the left-side panel, scroll down to find the Overlay group.
3. Click "Add section" and choose Popup.
4. From here, you can customize its settings.

2. Types of popups in Eurus theme and how to set up Popups:

In the Eurus theme, you can utilize three main types of popups to enhance your website's functionality and user engagement:

a) Promotion Popup:

• Overview: This type of popup is ideal for showcasing promotions, sales campaigns, or limited-time offers. It can include a countdown timer to create a sense of urgency and encourage immediate action. Additionally, you can incorporate coupon codes to incentivize purchases and boost conversions.
• General Configuration: You can adjust the position of the popup (for desktop display only), add images, position content to the left or right, align content to the left, center, or right, and choose text and background colors.

• Display rules:

Optimize your popup display with Eurus Theme's versatile display rules, allowing you to tailor the appearance based on guest status, mobile preferences, scheduling, and reappearance frequency for an enhanced user experience.

• Admin can choose whether the popup appears for non-logged-in visitors by using the “Show for guests only” config, enhancing their experience with tailored content for different customer groups.
• Eurus theme allows you to optimize the mobile experience by deciding whether the popup displays on mobile devices or not with “Show on mobile” config. It's recommended to show only one full popup at a time on mobile for better user engagement, but you can choose to show minimal popups or display them at different times.
• Activate the “Schedule” config to set specific start and end dates using the 'Countdown timer' block (read the guide below). This is useful for automating when to show or hide popups without manual intervention. For example, to schedule a popup for a Christmas campaign, set the start and end times. The popup will automatically appear and disappear based on the countdown.
• If you want to time the appearance of the popup from when a visitor enters the site, use the “Delay” config (measured in seconds). 
• If a customer closes a popup, the admin can use the "Reappear after" config to determine when the popup will show again, measured in days (offering flexibility from 1 to 30 days).
• Adding Coupon Code: Coupon codes are a powerful marketing tool that encourages users to make a purchase by providing them with a special discount code they can use at the checkout. In the Text block, provide instructions like "Simply enter code coupon_code at checkout" and enter the Coupon code content (e.g., SIMPLY10). This allows customers to copy and use the coupon code easily during checkout.

Example: 

Result:

• Showing Countdown Timer: Countdown timers are effective for promotions with deadlines to encourage quick action. Include a countdown timer block to create urgency for limited-time offers. Admin can set up the time zone, start and end times for the countdown, and style (color) for this block.

Example: 

Result:

b) Newsletter Signup Popup: 

The newsletter signup popup provides a convenient way for visitors to subscribe to your newsletter or mailing list. It helps you capture leads and build a loyal customer base by allowing users to easily opt in to receive updates and promotional content.

Simply add the Email form block to collect newsletter subscriptions.

You can conveniently display Social icons here by adding a Social Icons block to the popup, making it easy for customers to contact you. 

c) Age Verification Popup: 

For websites that contain age-restricted products or content, the age verification popup is essential for ensuring compliance with legal requirements. This popup prompts users to confirm their age before accessing certain areas of the website, helping you maintain regulatory compliance and responsible marketing practices.

Admin can add a Background image, adjust Overlay opacity, and set the popup to reappear after a specific number of days (1-30 days). This feature controls how soon a dismissed popup will reappear.

Conclusion: 

By following these steps and tips, you can effectively set up and customize popups in your Eurus theme to engage users, promote offers, capture emails, and comply with age restrictions.

3. How to show popups in minimal style?

Minimal popups in Eurus Theme are a simplified version designed to show multiple popups without occupying much space on the screen, while also ensuring that important content on the page is not hidden. They feature a small sticky message at the bottom, and users can click it to open the full popup with detailed information or actions. This allows for a streamlined and efficient popup experience, ensuring that important messages are conveyed without overwhelming the user interface.

Minimal popup:

 Full popup:

To showcase popups in a minimal style, follow these simple steps:

• Enable on Desktop or Mobile: Tick the "Enable on desktop" or "Enable on mobile" option based on your preference in the configuration settings.
• Configure Title and Subtitle: Enter the content into the "Title" & “Subtitle” field (Optional). Leaving the title/subtitle field blank will allow the minimal popup to use the text from the heading of the main popup.
• Set Position and Overlay: Admin can choose the preferred position for multiple minimal popups (bottom left or bottom right) by opening Theme Settings > Design > Popup > Minimal popup position (left/right). Alternatively, check "Show popup overlay" if you want the popups to overlay on top of each other.

Example:

Suppose you want to display multiple minimal popups simultaneously. You can set up the popups with distinct content, ensuring that the minimal style conveys the essential message. (To make editing easier, only the selecting popup is shown in Theme editor.)

Tips:

• Make sure to configure both minimal popups and main popups to avoid covering other essential elements that are also sticky on the screen, such as the "back to top" button or chat widget from a chat app.
• If full popups are set up at the same position, they might overlap and cover content. However, when configuring minimal popups at the same location, they will automatically adjust to ensure everything is displayed correctly.

4. How to Set Up the Popup Triggers?

Popups/minimal popup can be triggered based on specific conditions to engage visitors at the right moment. Follow the steps below to configure the popup triggers in your theme settings.

Step 1: Access the Popup Trigger Settings

• From your Shopify Admin, go to Online Store > Themes > click Customize.
• Under the Overlay setting group > click on Popup section.
• You will see the Popup settings section inside the section setting panel.

Step 2: Set up the Trigger Intent

Find the Trigger intent setting and select how the popup should be triggered from the dropdown menu.

• Delay – The popup appears after a set number of seconds.
• Scroll – The popup appears when users scroll down a certain percentage of the page.
• Exit – The popup appears when the user is about to leave the page. (The exit intention will be detected when the mouse is moving toward the browser’s navigation bar).
• Copy to Clipboard – The popup appears when a user copies specific elements on the site, such as a discount code or other selected text.

Step 2.1: Set the Delay (For Delay Trigger)

If you choose Delay in step 2, adjust the Delay slider to set how many seconds the popup waits before appearing.

⚠️ Note: Delay is disabled for previewing in the Theme Editor.

Step 2.2: Set the Scroll Height (For Scroll Trigger)

If you choose Scroll in step 2, use the Scroll height slider to define how far down the page (as a percentage of screen height) users must scroll before the popup appears.

Step 3: Click “Save” to apply the changes.

5. How to display popups in pages?

Displaying Popups on All Pages:

Add the popup to the overlay group will show the popup in any page that has the Overlay group (all page except Checkout page):

Displaying Popups on Specific Pages:

Add the Popup Section to the template group of that page.

Notes: 

• It's important to note that both the template and overlay groups are limited to a maximum of 25 sections, as per the default Shopify settings.
• When a popup is added to a group template, admin can place it in any position without affecting the display order of sections within the group template.