Liquify Pro
Log in

Welcome to the Liquify Community

Updated 3 weeks ago

Color Swatch Product Page

HHH
·
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-band

Thank you !
Attachments
Capture_decran_2024-11-26_a_15.34.39.png
Capture_decran_2024-11-26_a_15.35.57.png
H
j
12 comments
HHH
I have tried this code too " <template x-if="option.toLowerCase() === 'color'">
<div class="color-swatch-wrapper">
<div
class="color-swatch"
x-bind:style="{ backgroundColor: variants.find(variant => variant.options.includes(variantName))?.color }"
x-on:click="setVariant(variantName)"
:class="{ 'selected': selected_or_first_available_variant.options.includes(variantName) }"
></div>
</div>
</template>"

but nothing is showing except the div so I think it's only missing the style because it detects if the variable is a color option or no
Attachment
Capture_decran_2024-11-26_a_15.56.24.png
jjonas.halbstark
Hi @HH 🙂
at bandwerk we have a stylsheet where define all the colors from a variant metafield:
<style> {% for optionValues in product.options_with_values %} {% if optionValues.name == 'Color' %} {% for option in optionValues.values %} .colorway-{{ option | handleize }} { background-color: {{ option.variant.metafields.custom.colorway_color.value.color }};} {% endfor %} {% endif %} {% endfor %} </style>
jjonas.halbstark
and on the swatch istself we add the class like this: x-bind:class="'colorway-' + variantName.toString().normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase().trim().replace(/\s+/g, '-').replace(/[^\w-]+/g, '').replace(/--+/g, '-')"
jjonas.halbstark
the complicated code is to handleize the option name
HHH
Good evening Jonas, thank you for answering ! I'm be honest with you my knowledge on this is very limited, I don't know where to put it on my section exactly .. should I send you my code ?
jjonas.halbstark
ah yes sorry. So the css/style should be somewhere inside the section and the x-bind on the div where you want the color to show up. Does that help?

Do you have a metafield wehre you add the color of the variant already? Then you need to replace the object here with your keys: option.variant.metafields.custom.colorway_color.value.color
HHH
yes absolutely make sense, according to the code you sent me, do I need to create a custom meta field? because Shopify generates fields according to product categories, and treats it as a variant - this is the field I wanted to retrieve

Please see attached my screenshot (sorry some of them are in french)
Attachments
Capture_decran_2024-11-29_a_11.40.56.png
Capture_decran_2024-11-29_a_11.43.14.png
Capture_decran_2024-11-29_a_11.41.34.png
jjonas.halbstark
Hi @HH ah nice 🙂 yes that works to.. instead of selecting the metafield you can also use the swatch like this:
{{ option.swatch.color }}
jjonas.halbstark
<style>
{% for optionValues in product.options_with_values %}
{% if optionValues.name == 'Color' %}
{% for option in optionValues.values %}
.colorway-{{ option | handleize }} {
background-color: {{ option.swatch.color }}};}
{% endfor %}
{% endif %}
{% endfor %}
</style>
jjonas.halbstark
did that work @HH?
HHH
Hi Jonas thank you again for the update, I'll let you know when I'll try it again ! (today maybe or later)
jjonas.halbstark
Did it work ?:) @HH
Add a reply
Sign up and join the conversation on Discord