Shopify themes, liquid, logos, and UX
Hi,
In the theme language settings, it seems there's only a post-submit message if someone has NOT subscribed to our mailing list.
But when a subscribed e-mail tries to sign up again, the page refreshes and does nothing and does not give an error message like "You have already subscribed!"
How can I add a "You have already subscribed!" post-message if someone tries to re-subscribe?
Hi @onyx_au,
Newsletter Language for Already Subscribed users you need to add following code:
Add following script on this file: SALES CHANNELS > Online Store > Themes > Actions > Edit code > Assets > global.js
var live_url = window.location.href;
var result = live_url.includes('form_type=customer');
var input_val = document.querySelector('#NewsletterForm--footer').value.length;
if(result && input_val != 0){
const add_ele = document.createElement("h3");
add_ele.innerText = "You have already subscribed!";
document.querySelector('.newsletter-form__field-wrapper').appendChild(add_ele);
add_ele.classList.add('newsletter_already_subscribe','newsletter-form__message','form__message');
}
Add following CSS code on this file: SALES CHANNELS > Online Store > Themes > Actions > Edit code > Assets > component-newsletter.css
.newsletter_already_subscribe{
color: red;
}
How it will looks like after adding above code in your Shopify Store:
Thank you.
Worked perfectly for me!
Hi @SheetalZadfiya ! Would you happen to have an updated code for the Dawn theme? I tried using the code above to enable the "You've already subscribed!" message, but it doesn't appear to work. Thank you so much in advance!
Hello, I had same issue, id values are different (added random id into the name)
use this one (original line of code is behind // as a comment)
var live_url = window.location.href;
var result = live_url.includes('form_type=customer');
//var input_val = document.querySelector('#NewsletterForm--footer').value.length;
var input_val = document.querySelector('[id*="NewsletterForm"]').value.length;
if(result && input_val != 0){
const add_ele = document.createElement("h3");
add_ele.innerText = "You have already subscribed!";
document.querySelector('.newsletter-form__field-wrapper').appendChild(add_ele);
add_ele.classList.add('newsletter_already_subscribe','newsletter-form__message','form__message');
}
You are the best, this worked for me!!
Hi avaskye,
can you please update me the exact code you used for “Newsletter Language for Already Subscribed Users” for dawn theme.
Thanks.
Hi
@pwfrancis wrote:Hello, I had same issue, id values are different (added random id into the name)
use this one (original line of code is behind // as a comment)
var live_url = window.location.href;
var result = live_url.includes('form_type=customer');
//var input_val = document.querySelector('#NewsletterForm--footer').value.length;
var input_val = document.querySelector('[id*="NewsletterForm"]').value.length;
if(result && input_val != 0){
const add_ele = document.createElement("h3");
add_ele.innerText = "You have already subscribed!";
document.querySelector('.newsletter-form__field-wrapper').appendChild(add_ele);
add_ele.classList.add('newsletter_already_subscribe','newsletter-form__message','form__message');
}
Hello,
line 9693 should be
var input_val = document.querySelector('[id*="NewsletterForm"]').value.length;
in your case if contact id will change (this random number after Contact_), it won't work
I modified the code as you said still it's error message not reflecting.
I am changing in the theme.js as In my theme no Global.js is present and theme.js is the file which is being called in theme.liquid file.
My store URL is https://mayandco.in/
Hi Pwfrancis
any update on it. as I modified the code, still it is not working
in global.js at the end add, I think you added it to theme.js:
var live_url = window.location.href;
var result = live_url.includes('form_type=customer');
//var input_val = document.querySelector('#NewsletterForm--footer').value.length;
var input_val = document.querySelector('[id*="NewsletterForm"]').value.length;
if(result && input_val != 0){
const add_ele = document.createElement("h3");
add_ele.innerText = "You have already subscribed!";
document.querySelector('.newsletter-form__field-wrapper').appendChild(add_ele);
add_ele.classList.add('newsletter_already_subscribe','newsletter-form__message','form__message');
}
just checked, still working in Dawn Theme
What theme are you using? This is for Dawn, maybe newsletter form field have different names than in Dawn so you should adjust them to mach or check if in your theme, this monit will work out of the box, in the settings etc.
My theme is "debut"
Hi, sorry, I didn't use this one, check in theme settings, translate adapt -> default theme content -> newsletter, is there option for already subscribed message? I have only 3: Newsletter: Label, Newsletter: Success, Newsletter: Button Label so in theme itself there is no option to notify user about existing subscription.
for your try this one and check if it is working, if not I don't think I will be able to help you more
var live_url = window.location.href;
var result = live_url.includes('form_type=customer');
var input_val = document.querySelector('#Contact_163955177715547d60-email').value.length;
if(result && input_val != 0){
const add_ele = document.createElement("h3");
add_ele.innerText = "You have already subscribed!";
document.querySelector('.newsletter-form__field-wrapper').appendChild(add_ele);
add_ele.classList.add('newsletter_already_subscribe','newsletter-form__message','form__message');
}
,
@pwfrancis Hi, would you happen to know what code we can use for the Symmetry theme? We're no longer using Dawn, and it seems like this code no longer works :'(
@SheetalZadfiya Hi, would you happen to have the code for Symmetry theme so that those who already subscribed to our newsletter would see a "You've already subscribed!" message? Thank you so much in advance!
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024