Solved

Custom Metafield Colors

euphoriaforest
Tourist
14 0 1

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

Screenshot (45).png

 

Can anyone help?

 

https://euphoriaforest.store/collections/kpop-1

Accepted Solution (1)
TerenceKEANE
Shopify Partner
383 70 61

This is an accepted solution.

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.

 

TerenceKEANE_0-1713432750037.png

 

shopify.head.jpg

 

<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>

 

 

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you. --> Our Website
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

View solution in original post

Replies 7 (7)

TerenceKEANE
Shopify Partner
383 70 61

Hi!

You need to give a little more detail. Font color will change or related block?

 

or is it just as follows?

TerenceKEANE_0-1713338145699.png

 

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you. --> Our Website
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
euphoriaforest
Tourist
14 0 1

Just as your photo shows would be nice😀

TerenceKEANE
Shopify Partner
383 70 61

Hi,

 

I could only see the 'On Hand (green)' option. Could you please provide an example of the other options on a single 'Collections' page? Additionally, if you add the following codes to 'base.css,' the 'On Hand (green)' section will be modified.

 

“Pre-Order (dark pink), On The Way (yellow), Low Stock (orange), and Out of Stock (red)”

 

span.caption-with-letter-spacing.light {

    color: green;

}

 

 

Terence.

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you. --> Our Website
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
euphoriaforest
Tourist
14 0 1

Hi, I updated the collection so the first 5 products each have one of the options and I added the code to the base.css

 

https://euphoriaforest.store/collections/kpop-1

 

Thank you for helping me so far! Hopefully, you can find a solution 

TerenceKEANE
Shopify Partner
383 70 61

This is an accepted solution.

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.

 

TerenceKEANE_0-1713432750037.png

 

shopify.head.jpg

 

<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>

 

 

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you. --> Our Website
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
euphoriaforest
Tourist
14 0 1

Thank you so much! It worked perfectly! I'm so grateful for your time helping me

TerenceKEANE
Shopify Partner
383 70 61

You're most welcome! It was just a small thing for me 😊

 

I'm not entirely sure what level of support you're looking for, but if you require fast and detailed coding assistance, please let me know.

 

We offer the Unique "Premium Support" plans at affordable rates, including monthly, quarterly, bi-annual, and annual options. In addition to coding support, we also provide professional SEO reports at regular intervals, Advanced animation (Advanced CSS and JavaScript) coding assistance, Expert Consulting, Dedicated Custom Front-End Service and Coding, and Unique Mobile Premium Features. If you're interested, you can check out the link in my signature. Feel free to reach out via private message if you have any questions. 😉

Terence.

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you. --> Our Website
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites