A user is attempting to implement email obfuscation on their Shopify store to protect email addresses from spam bots.
Attempted Solution:
Current Issue:
The discussion remains open with no responses or solutions provided yet.
Hey everyone,
Does anyone know if it’s possible to use email obfuscation in Shopify?
I wanted to use JS conversion but hit a brick wall. I used an example from Email obfuscation: What works in 2025? and modified it for my email but couldn’t make it work in my theme (Craft) code.
Anyone out there have any idea?
And how you’ve tried to implement this?
Should be actually pretty straight-forward.
Add a “Custom Liquid” section to add a <script ...></script> line (or inline the .JS file contents between those tags) and put the obfuscated e-mail wherever you can/want…
Originally I created a text-conversion.js asset. Then in theme.liquid I put {{ ‘text-conversion.js’ | asset_url | script_tag }} I had this in the <head> and also <span id="text-conversion">dsosnna example com</span> (I’ve since deleted these).
I understand about using Custom Liquid but I don’t know how I would make it work. For example, I have my email address in the last row of my FAQ section, apart from inserting the js function what else do I do? I inserted the html but it didn’t work.
My site is https://shoutoutstitches.com
Check https://codepen.io/tairli/pen/emZpVEv
I’ve re-done the code to allow for multiple elements and also to obfuscate a href to produce a clickable e-mail address.
Comments in JS code explain what code does with initial string so you can get an idea how to construct it.
This can go directly into “Custom liquid” block in footer, depending on your theme..
<p>
Please e-mail us at
<a href="mailto:zinwfoy exwample com"
class="text-conversion"
>
zinwfoy exwample com
</a>
</p>
<!-- Code to go into "Custom liquid". Once! -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const domain = 'email.spencermortensen';
const characters2drop = "zwy";
const process = (text) => (
text
// first space is replaced by @
.replace(' ', '@')
// other spaces are replaced by DOTs
.replaceAll(' ', '.')
// some characters are dropped from the string
.replaceAll(new RegExp('[' + characters2drop + ']', 'g'), '')
// and then, EXAMPLE is replaced with domain
.replace('example', domain )
)
document.querySelectorAll('.text-conversion')
.forEach( e => {
e.innerText = process(e.innerText);
if ( e.tagName == 'A' ) e.href = process(e.href);
});
});
</script>
if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
Use approaches like CSS method first/also/fallback for a bit more future proofing as scrapers, and “agents” can or will eventually use javascript as compute prices fall.
And when that happens the code will run and show the address with no friction.
Thanks so much for all your help @tim_1 unfortunately I couldn’t get this to work but I managed to obfuscate my email on my contact form as it’s setup in pages I can show the html in the editor and so I did this:
<span id="text-conversion">dsosnna example com</span></p>
<script>'use strict';
document.addEventListener('DOMContentLoaded', function ()
{
const email = document.getElementById('text-conversion').firstChild;
email.nodeValue = email.nodeValue
.replace(' ', '@')
.replace(' ', '.')
.replaceAll(new RegExp("[s]", "g"), "")
.replace("example", "shoutoutstitches");
});
</script>
I’ve removed my email from all other areas and directed to this page instead. I’ve definitely went around the houses before just doing this in the first place, but you live and learn!
Also thanks @PaulNewton for the heads up about using CSS first, I will at some point do this but right now I need a break from my website lol.