Solved

Change email form tooltip text

Emi5
Visitor
3 0 0

Good afternoon, 

I am trying to change the tooltip text for the email form (newsletter signup) specifically. My store language is Norwegian, but for some reason this specific tooltip is not translated. 

I've checked in the language editor (Online store -> Themes -> ... -> Edit default theme content), but I am not able to find this specific tooltip. I've also done some searching in the theme code without any luck. 

For some reason it feels like the solution is probably right in front of my nose, but I'm unable to see it. Hopefully some of you awesome forum wizards can show me!

 

This is how the tooltip looks in my store, which is Craft theme with minimal changes, when I hover over the input field:

Emi5_0-1713881114041.png

And this is how it looks when I try to submit the form without any contents:

Emi5_1-1713881511370.png

 

As you see, the text "Please fill out this field." is in English. I want to translate it to Norwegian.

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2133 610 475

This is an accepted solution.

Hey @Emi5,

I am testing this on Dawn theme, so I don't know if you are on the same theme.

 

Change 1

 

Look for newsletter.liquid in your code files. Then look for the part that says

<input id="NewsletterForm--{{ section.id }}"

Mine is at line 58.

ThePrimeWeb_0-1713882453197.png

 

Then add the part as shown in the screenshot below and change the parts where it says "Enter whatever..." within the quotes

title="Enter whatever you want here for the hover part"
oninvalid="this.setCustomValidity('Enter whatever you want here for when you hit enter')"

ThePrimeWeb_1-1713882857247.png

 

Change 2

 

If this is the newsletter in the footer. Then look for footer.liquid

 

Again, look for the same

<input id="NewsletterForm--{{ section.id }}"

and add the part as shown in the screenshot below and change the parts where it says "Enter whatever..." within the quotes

title="Enter whatever you want here for the hover part"
oninvalid="this.setCustomValidity('Enter whatever you want here for when you hit enter')"

ThePrimeWeb_2-1713882957940.png

 

 

 

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 4 (4)
Emi5
Visitor
3 0 0

Thank you so much for being willing to help me with this, Digibuzz!

I am only using the default email signup form provided by Shopify in the Craft template, no other platforms or apps. If relevant, I only have the apps Inbox (for chat), Avada cookie consent (for cookie pop-up message) and Judge.me reviews (for customer product reviews) installed. I don't think any of them should do any changes regarding to the newsletter signup form.

Emi5_0-1713883379377.png

 

ThePrimeWeb
Shopify Partner
2133 610 475

This is an accepted solution.

Hey @Emi5,

I am testing this on Dawn theme, so I don't know if you are on the same theme.

 

Change 1

 

Look for newsletter.liquid in your code files. Then look for the part that says

<input id="NewsletterForm--{{ section.id }}"

Mine is at line 58.

ThePrimeWeb_0-1713882453197.png

 

Then add the part as shown in the screenshot below and change the parts where it says "Enter whatever..." within the quotes

title="Enter whatever you want here for the hover part"
oninvalid="this.setCustomValidity('Enter whatever you want here for when you hit enter')"

ThePrimeWeb_1-1713882857247.png

 

Change 2

 

If this is the newsletter in the footer. Then look for footer.liquid

 

Again, look for the same

<input id="NewsletterForm--{{ section.id }}"

and add the part as shown in the screenshot below and change the parts where it says "Enter whatever..." within the quotes

title="Enter whatever you want here for the hover part"
oninvalid="this.setCustomValidity('Enter whatever you want here for when you hit enter')"

ThePrimeWeb_2-1713882957940.png

 

 

 

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Emi5
Visitor
3 0 0

It works! And what a fast reply! Thank you so much, ThePrimeWeb! 😄

BrewBrains
Shopify Partner
137 23 29

Hi @Emi5 ,

 

In order to change the text on hover and add custom text follow the steps below:

1) Edit code > newsletter.liquid 

2) add title="Custom text" (you can put whatever text you want to display) as shown in the screenshot below. 

 

Screenshot 2024-04-23 at 8.23.27 PM.png

But if you want it dynamic then some customization is required in the code.  You can add it to the Locales json file and use it like in screenshot below. 

 

BrewBrains_1-1713882986454.png

Below is the screenshot for reference:

 

BrewBrains_2-1713883348430.png

 

 

If you need any further assistance or have any queries, feel free to contact me. 

 

Was my reply helpful? Click Like to let me know!

Was your question answered? Mark it as an Accepted Solution and click like. 

 

 

 

 

Was I helpful?

Buy me a coffee


Sandesh Paudyal |

| Shopify Partner


Need help with your store?

 sandeshpaudyal99@gmail.com

For quick response - Message Me : +9779851353732