Custom Metafield Colors
I finally found a code in the discussions that solved my previous question here but I'm still looking for a way to have each individual metafield appear in a different color
The options will be Pre-Order (dark pink), On The Way (yellow), On Hand (green), Low Stock (orange), and Out of Stock (red)
This is the code
<span class="caption-with-letter-spacing light">{{ card_product.metafields.filter.availability | metafield_text }}</span>and here is what the output looks like
Can anyone help?
https://euphoriaforest.store/collections/kpop-1
What you said can only be done with JavaScript. We only use CSS for simple tasks. So, we can't add conditions. Since your software doesn't have a class that distinguishes colors, the codes I provided are applied to all. Normally, we only provide this to 'premium support' customers, but consider this as a gift to you. 😉 Here, we find a match in the relevant text, and if there's a match, we color it. You can delete the code I sent earlier. Let me know if you can't do it!
The following code will do what you want. You can change the values as you like.
1) Navigate to the 'Edit Code' option in your theme settings, then search for 'theme.liquid' in the search bar.
2) Paste the following code below the '<head>' tag. Please refer to the attached screenshot for guidance.
<script>
document.addEventListener("DOMContentLoaded", function() {
var elements = document.getElementsByClassName("caption-with-letter-spacing light");
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var textContent = element.textContent.trim();
switch (textContent) {
case "On The Way":
element.style.color = "#ffd500";
break;
case "Pre-Order":
element.style.color = "#a53167";
break;
case "On Hand":
element.style.color = "#6dc381";
break;
case "Low Stock":
element.style.color = "#e96631";
break;
case "Out of Stock":
element.style.color = "#dc3545";
break;
default:
break;
}
}
});
</script>
Hi!
You need to give a little more detail. Font color will change or related block?
or is it just as follows?
What you said can only be done with JavaScript. We only use CSS for simple tasks. So, we can't add conditions. Since your software doesn't have a class that distinguishes colors, the codes I provided are applied to all. Normally, we only provide this to 'premium support' customers, but consider this as a gift to you. 😉 Here, we find a match in the relevant text, and if there's a match, we color it. You can delete the code I sent earlier. Let me know if you can't do it!
The following code will do what you want. You can change the values as you like.
1) Navigate to the 'Edit Code' option in your theme settings, then search for 'theme.liquid' in the search bar.
2) Paste the following code below the '<head>' tag. Please refer to the attached screenshot for guidance.
<script>
document.addEventListener("DOMContentLoaded", function() {
var elements = document.getElementsByClassName("caption-with-letter-spacing light");
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var textContent = element.textContent.trim();
switch (textContent) {
case "On The Way":
element.style.color = "#ffd500";
break;
case "Pre-Order":
element.style.color = "#a53167";
break;
case "On Hand":
element.style.color = "#6dc381";
break;
case "Low Stock":
element.style.color = "#e96631";
break;
case "Out of Stock":
element.style.color = "#dc3545";
break;
default:
break;
}
}
});
</script>
Community Blog Articles
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025
Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025
Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025