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!
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
How can I just display the popup one per session (not on everypage)
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?
@deepak you can place this code {% section ‘discount-modal’ %} in the index.liquid inside section folder instead placing it in the theme.liquid
how to show only front page