I want to change a specific section background based on selected variant in Shopify. I tried it in many ways, right now i was using this code with metafields:
{% assign variant.metafields.custom.product_color.value = "product_color" %}
{% case product_color %}
{% when product_color == 'olive' %}
.product-page--top-panel {background: #b4b999;}
{% when product_color == 'pink' %}
.product-page--top-panel {background: #e4b5bd;}
{% when product_color == 'light-blue' %}
.product-page--top-panel {background: #aabac7;}
{% endcase %}
The solution is not working as i want it to be since the class gets overwritten by the colors. I'm not familiar with jquery or javascript that much so i couldn't fix the problem.
How can i make this work?