Shopify themes, liquid, logos, and UX
We are seeing that a high percentage of people who see "We have sent an email to XXXX please click the link included to verify your email address." notification on registration, do not see the notification. They are attempting to register several times and getting confused.
We will update the CSS to make the box more visible, but we'd also like to add copy to the page to explain better to the customer.
I don't see how to edit the copy in the box in the image above.
We were thinking we could include an {% if %} in the template to output some additional copy when the form is in this state.
However, I can't find info on how to read the state of the form or what state the above would be.
Open to other approaches as well.
Thanks!
Hi @dilphinkickme!
You should be able to edit the copy for the error message in question by editing the language settings for your store's theme. You can find the language settings in the Shopify admin under Online Store > Themes > (current theme) > Actions > Edit languages. Most Shopify themes will store this error message in Checkout & system > Errors, but it might be easier to simply type in "verify email" in the 'Search translations' field to find the setting faster.
If you're willing to consider a paid app that would allow you to easily customize your store's registration form (including error messages), then I would suggest taking a look at Customer Fields.
Hopefully this helps!
Thank you @Kyle_W. I appreciate you reaching out and teaching me a little about the Shopify interface and forms. I didn't know that section of the theme editor existed.
Do you know how to read that specific error in the liquid templates?
The user is not reading the text, so we want to create our own <div> and copy to guide them better, but need to capture the form.error that is being used to generate that message.
In pseudo-code we would expect something like:
{% if form.error == 'verify_email' %}
<div> magic copy </div>
{% endif %}
Looks like the copy comes from "Errors" > "Verify email" in the template editor interface.
Ah, looks like this solution is all we have based on the form.errors docs:
{% if form.errors %}
{% for field in form.errors %}
{% if form.errors.messages[field] contains "Email is invalid." %}
Show something else...
{% endif %}
{% endfor %}
{% endif %}
Thank you @Mark11
You're most welcome, @dilphinkickme!
The solution you've referenced should allow you to add your own special message. Just make sure to use the proper string for the `contains` operator, like so:
{% if form.errors %}
{% for field in form.errors %}
{% if form.errors.messages[field] contains "verify" %}
<div>Special message</div>
{% endif %}
{% endfor %}
{% endif %}
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024