dawn theme pop up

How to Add a Pop Up on Shopify With Timer

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: Compatible on most Shopify themes, from Debut to Dawn 2.0

The pop up should help your store and not annoy your customers. I created a pop up modal before and decided to make an updated one.

The modal has three buttons. The first button, which is for subscribing, will be able to add the customer's email in your customer list of subscribers. If the user sign up, they will not going to be ask again even they close the browser, unless they sign up with a different device. For the second button, you can set a timer on when you want the user to be ask again. The last one is the "No, thank you" button which I tried to make it small, this will opt the customer and will not be ask again unless they reopen the browser again. 

What is a Pop-Up Modal with Timer?

A pop-up modal with a timer is a small window that "pops up" over the main content of a website, usually to display a special offer, collect email addresses, or provide important information. The timer controls when the pop-up appears, allowing visitors some time to browse before being presented with the modal. This approach is less disruptive than immediate pop-ups.

Why Use a Timed Pop-Up Modal?

  • Improved User Experience: A timed delay gives users a chance to engage with your content before being interrupted, reducing frustration and improving their overall experience.
  • Increased Engagement: By timing the pop-up appropriately, you can capture the visitor's attention at a more opportune moment, leading to higher engagement rates.
  • Effective Lead Generation: Timed pop-ups are a great way to collect email addresses for marketing campaigns, offering incentives like discounts or exclusive content.
  • Promotion of Special Offers: Highlight limited-time deals or special promotions to encourage immediate purchases.
  • Reduced Bounce Rate: By presenting relevant information or offers at the right time, you can entice visitors to stay on your site longer.

What you are buying:

  • Add a pop up modal without an app
  • Pop up will not show again if customer decline
  • Have an option to be ask later

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

Additional Considerations:

  • Timing: Experiment with different time delays to find what works best for your audience. Avoid showing the pop-up too quickly, as this can be disruptive.
  • Content: Make sure the pop-up's content is relevant and valuable to the visitor.
  • Design: Design the pop-up to be visually appealing but not overly intrusive.

 

Steps on how to add Pop Up on Shopify With Timer?

Step #1. Open your code editor

From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code

Step #2. Create a new section file

Open the Section folder and create a new file. Name it "pop-up", then paste the code below. Then click SAVE.

 

Step #3. Open Layout Folder

Open the theme.liquid, then paste the code below before the  {% section 'announcement-bar' %}.

 

Step #4. Save the changes

Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.

Conclusion 

Timed pop-up modals can be a valuable tool for Shopify store owners looking to engage visitors, generate leads, and promote offers.  By implementing a delay before the pop-up appears, you create a less intrusive and more user-friendly experience, increasing the chances of positive interaction.  Whether using a Shopify app or custom code, careful consideration of timing, content, design, and frequency is crucial for maximizing the effectiveness of your pop-up modal without frustrating potential customers.  A well-executed timed pop-up can significantly contribute to your marketing efforts, driving conversions and enhancing the overall customer journey.

Update 07/12/2022: Fix the bug with the "Maybe later" button

That's it (",)

Copied!
Back to blog

5 comments

Hello, before closing the popup is it possible to show a message “Thank you for subscribing”?
I dont get any confirmation message, the popup just closes.

Giacom

Hi @IRVIN CONTRERAS,

The recaptcha only appears if you are doing it inside the theme editor. You can also disable recaptcha in your Preferences.
From you Admin store, go to Online Store > Preferences, and go down to Spam protection

Made4Uo

How can i delete the recatpcha button y always on the buttom left

Irvin Contreras

Hi @CHRIS FERNLEY,
I made updates and fix the bug. Thank you for putting this in our attention.

Made4Uo

I have noticed if you fill in your email address but then decide to click “Maybe Later” it then submits your email address to the customers list.

Chris Fernley

Leave a comment