Sell services the people need the most
Build to last
Shopify features and tools
Create A Customizable Pop-up - Works with Dawn Theme

Create A Customizable Pop-up - Works with Dawn Theme

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

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

How to create a discount modal section that can be customize. 

This pop up works with Debut theme and also with Dawn Theme. 

To start:

1. Set up the EmailJS first, please see the link for more instructions how to set up your EmailJS
2. Go to your admin Shopify store
3. Click "Themes", "actions", "edit code"
4. Find Section folder
5. Create a section and name it as "discount-modal"
6. Copy and paste the code below, then click SAVE



7. Go to Layout folder and click theme.liquid
8. paste the code below before the </body>, then click SAVE

 

If you want the discount modal to only appears at the home page. Paste the code below instead

 

All left to do is "Customize theme." Let me know if you have questions (",)

 Update 10/23/21: I fix the CSS so it will work with Dawn Theme. I also added an option the hide the email field. Also, added an option at step #8 so pop up only shows in the home page

Copied!

Struggling with instructions?

Don't worry, we've got you covered for a reasonable price.

Contact us through "Chat with us" for a quote.

Relax as we handle it for you!

Back to blog

5 comments

Unfortunately, this code is old. We do have other pop up modal that will not appear once the customer opt out. You can see the code here https://made4uo.com/blogs/shopify-tutorial/pop-up-modal-with-timer

Made4Uo

How can I just display the popup one per session (not on everypage)

Edward Carroll

Hello, I just followed your directions to a T for creating the pop up only on the homepage. Where do I go to then edit the pop up? Or where will I see it happen? I clicked the preview store button, and I didn’t see anything pop up. I also don’t see any way to edit it in the Customize Theme space. Is it CSS and HTML coding only?

Kaydee Miller

@deepak you can place this code {% section ‘discount-modal’ %} in the index.liquid inside section folder instead placing it in the theme.liquid

Made4uo

how to show only front page

deepak

Leave a comment