I want to configure color swatches with color metafields, because in different products in my store there are variants with the same color name. Could someone please tell me how to do this?
pw: cliagi
Hi @Tetpf ,
Let’s say, you’ve created a color metafeld with the following settings:
It can be displayed on the product page like this:
with the following Liquid code snippet:
{% assign color_from_metafield = product.metafields.my_fields.color %}
{% if color_from_metafield %}
{% assign swatch_height = 30 %}
{% assign swatch_width = 30 %}
<div class="color-swatch"><span>Check out the cool color:</span><br><div style="display: inline-block; background-color:{{ color_from_metafield }};height:{{swatch_height}}px;width:{{swatch_width}}px"> </div></div>
{% endif %}
Don’t forget to replace the namespace and key used in this code to match your actual color metafield. Yet another cool thing is that you can change the size of the color swatch by editing the values of “swatch_height” and “swatch_width” variables.
Where in snippets should I add this code?