Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I want help from you that i have created an email popup form for my customer to get coupon code for the first order. when my customer enter the email he will get the coupon code for the discount. i have creted the popup but it genrate the coupon code. but i want to connect with the shopify discount coupon code, i mean when customer enter email it show the that coupon code that i have creted in the shopify discount.
You may try Klaviyo app, it has this option
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Yes, i have tried much apps but i did not get the solution. the issue is that i want to add an icon in the header with the account icon and when anyone click that icon the popup will show to submit the email and get coupon code. all is done but i want to show the coupon code from the shopify coupon code that i have created in the discount code. so that this code can be use at the time of checkout.
This is the code for the popup
<!-- Email icon -->
<div id="email-icon" class="header-icon" style="cursor: pointer; display:flex; align-items:center; justify-content:center; height:100%; padding: 0px 10px">
{% include 'icon-email' %}
</div>
<!-- Email popup -->
<div id="email-popup" class="email-popup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background-color: #fff; width:450px; height:300px; border: 1px solid #ccc; z-index: 999;">
<div style="display:flex; justify-content: flex-end; width:100%;">
<button id="close-email-popup" style="padding: 5px; cursor: pointer; width:30px; height:30px; color: white; border-radius: 5px; border: 1px solid; color: #521C70;">X</button>
</div>
<h2 style="color: #521C70; font-weight:700; ">Enter your email for 15% off your first order</h2>
<p>Enter your email for 15% off your first order</p>
<input type="email" id="email-input" placeholder="Enter your email" style="margin-bottom: 10px; padding: 12px 10px; width:100%; border: 1px solid; border-radius: 5px; ">
<button id="submit-email" style="padding: 5px; cursor: pointer; width:100%; background-color: #521C70; color: white; border-radius: 50px; border: none; padding: 12px 10px;">Submit</button>
</div>
<!-- Coupon popup -->
<div id="coupon-popup" class="coupon-popup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background-color: #fff; width:450px; height:300px; border: 1px solid #ccc; z-index: 999;">
<div style="display:flex; justify-content: flex-end; width:100%;">
<button id="close-coupon-popup" style="padding: 5px; cursor: pointer; width:30px; height:30px; color: white; border-radius: 5px; border: 1px solid; color: #521C70;">X</button>
</div>
<h2 style="color: #521C70; font-weight:700; ">Your 15% off Coupon Code</h2>
<p id="coupon-code">YourCouponCode123</p>
<button id="copy-coupon" style="padding: 5px; cursor: pointer; width:100%; background-color: #521C70; color: white; border-radius: 50px; border: none; padding: 12px 10px;">Copy Coupon</button>
</div>
<!-- Include the email and coupon popup scripts -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const emailIcon = document.getElementById('email-icon');
const emailPopup = document.getElementById('email-popup');
const closeEmailPopupButton = document.getElementById('close-email-popup');
const submitEmailButton = document.getElementById('submit-email');
const couponPopup = document.getElementById('coupon-popup');
const closeCouponPopupButton = document.getElementById('close-coupon-popup');
const copyCouponButton = document.getElementById('copy-coupon');
emailIcon.addEventListener('click', function () {
emailPopup.style.display = 'block';
});
closeEmailPopupButton.addEventListener('click', function () {
emailPopup.style.display = 'none';
});
submitEmailButton.addEventListener('click', function () {
// Handle email submission and coupon generation logic here
// For now, let's just hide the email popup and show the coupon popup
emailPopup.style.display = 'none';
couponPopup.style.display = 'block';
});
closeCouponPopupButton.addEventListener('click', function () {
couponPopup.style.display = 'none';
});
copyCouponButton.addEventListener('click', function () {
// Copy coupon code logic (same as provided in the previous response)
const couponCodeText = document.getElementById('coupon-code');
const couponCode = couponCodeText.innerText;
const tempInput = document.createElement('input');
tempInput.value = couponCode;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
// Provide some visual feedback to the user
copyCouponButton.innerText = 'Coupon Copied!';
setTimeout(function () {
copyCouponButton.innerText = 'Copy Coupon';
}, 2000);
});
});
</script>
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024