Shopify themes, liquid, logos, and UX
Hi everyone,
I'm looking for a custom code (no apps please) that allow me to display a link into the account page, according to a specific customer tag.
I basically want to show a link that is going to redirect a tagged customer to another specific page. However, there will be more than one tag. Eg: Customer tagged "A" should see just the link for "A". If there is no tag, it doesn't show anything.
TIA.
Gui
Solved! Go to the solution
This is an accepted solution.
hey @Guifonte
paste this code in your account page, at end of the file,
{% if customer %}
<script>
var customerTags = {{ customer.tags | json }};
</script>
{% endif %}
<script>
document.addEventListener('DOMContentLoaded', function() {
var links = {
'TagA': 'https://example.com/link-for-tag-a',
'TagB': 'https://example.com/link-for-tag-b',
// Add more tag-to-link mappings as needed
};
var linkToDisplay = '';
customerTags.forEach(function(tag) {
if (links[tag]) {
linkToDisplay = links[tag];
}
});
if (linkToDisplay) {
renderLink(linkToDisplay);
}
});
function renderLink(link) {
var linkElement = document.createElement('a');
linkElement.href = link;
linkElement.textContent = 'Special Link for You'; // Customize this text as needed
document.getElementById('account-page-container').appendChild(linkElement);
}
</script>
and to render the link paste this one to display it on screen.
<div id="account-page-container">
<!-- Customer account details -->
</div>
This is an accepted solution.
hey @Guifonte
paste this code in your account page, at end of the file,
{% if customer %}
<script>
var customerTags = {{ customer.tags | json }};
</script>
{% endif %}
<script>
document.addEventListener('DOMContentLoaded', function() {
var links = {
'TagA': 'https://example.com/link-for-tag-a',
'TagB': 'https://example.com/link-for-tag-b',
// Add more tag-to-link mappings as needed
};
var linkToDisplay = '';
customerTags.forEach(function(tag) {
if (links[tag]) {
linkToDisplay = links[tag];
}
});
if (linkToDisplay) {
renderLink(linkToDisplay);
}
});
function renderLink(link) {
var linkElement = document.createElement('a');
linkElement.href = link;
linkElement.textContent = 'Special Link for You'; // Customize this text as needed
document.getElementById('account-page-container').appendChild(linkElement);
}
</script>
and to render the link paste this one to display it on screen.
<div id="account-page-container">
<!-- Customer account details -->
</div>
Hi there,
Thank you for your reply.
Can you please tell me where to find the account page?
I have attached a screenshot of my theme code settings.
I have just added a custom liquid code directly in the page through the theme customiser.
I come back if to say if that works, thanks a lot
Sure. let me know if its works or not.
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025