Hi everyone, I've been trying for a hours to code a way of displaying the colors swatch of my product. I have two color display options, the first via a color-setting section that translates the name of a color to a HEX Code ,or in Image and then integrates it into a class (in case the customer wants to personalize their colors via specific names). The second option is to retrieve the color meta fields generated by shopify for products in certain product categories. It's in the second option that I'm having trouble assigning these colors to my product page.
I've tested this code ‘ <template x-if="option.toLowerCase() === 'color'">
{% for option in product.options_with_values %}
{% if option.name == 'Color' %}
{% for value in option.values %}
{% assign swatch_color = value.swatch.color %}
{% assign swatch_image = value.swatch.image %} {% endfor %}
<div
class="color-swatch"
style="{% if swatch_color %}background-color: {{ swatch_color }};{% elsif swatch_image %}background-image: url('{{ swatch_image }}');background-size: cover;{% endif %}"
></div>
{% endif %}
{% endfor %}
</template> ’ but as in the screen there's a display error.
I have tried many options, with AI, and I don't know the simpliest way to do it if someone can help me !
And I think that on this site you use the same logic, which I'd also like to incorporate. I haven't found any other discussions on colour swatch ..
https://bandwerk.de/products/vintage-bandThank you !
