Show swatch color product from a metaobject/metafiled

[EdgarCast]

I have a product uploaded in which I have added a color variant from a metaobject. I have done several tests to show the color but I can’t. Can someone help me solve it .

This is the code I’m testing. It returns the variants but I cannot access the color of the metaobject.

{%- for option in product.options_with_values -%}
  {%- if option.name == 'Color' -%}
    
      **{{ option.name }}**:
      

        {%- for value in option.values -%}
          {% assign variant = product.variants | where: "option1", value | first %}
          {% assign color_metaobject_reference = variant.metafields.shopify.color-pattern %}
          {% if color_metaobject_reference %}
            {% assign color_metaobject = color_metaobject_reference.value %}
            {% if color_metaobject %}
              {% assign color_rgb = color_metaobject.color %}
              - {{ value }}
              

            {% else %}
              - {{ value }}

            {% endif %}
          {% else %}
            - {{ value }}
          {% endif %}
        {%- endfor -%}
      

    

  {%- endif -%}
{%- endfor -%}

This is my product configuration:

My metaobject deffinition:

Inside color:

[BSSCommerce-TC]

Hi @EdgarCast ,

To display variant metafields on the product page in the Shopify Dawn 2.0 theme, follow these steps:

Step 1: At your Shopify Admin, please go to Online Store > Themes > Edit code and Access product-template.liquid File:

Step 2: Look for the code section where product variants are displayed, often in a loop. Ensure that the metafields exist and are named correctly for the code to work.

For example, if your metafields are named “color” you can use the following code:

{{ variant.metafields.global.color }}​

Or on your test code

{%- for option in product.options_with_values -%}
  {%- if option.name == 'Color' -%}
    
      **{{ option.name }}**:
      

        {%- for value in option.values -%}
          {% assign variant = product.variants | where: "option1", value | first %}
          {% assign color_metaobject_reference = variant.metafields.global.color %}
          {% if color_metaobject_reference %}
            {% assign color_metaobject = color_metaobject_reference.value %}
            {% if color_metaobject %}
              {% assign color_rgb = color_metaobject.color %}
              - {{ value }}
              

            {% else %}
              - {{ value }}

            {% endif %}
          {% else %}
            - {{ value }}
          {% endif %}
        {%- endfor -%}
      

    

  {%- endif -%}
{%- endfor -%}

Hope this can help you.

If our suggestion is useful, please let us know by giving a like or mark as a solution. Thank you

[fkji]

This doesn’t work at all, you can check it with

{{ variant.metafields.global | json }}

and you’ll get an empty result.

[vasanth0791]

Hi @EdgarCast

Here is the solution for liquid to render the color option metaobject to view in swatch color or image from the content in admin settings.

To apply your code any theme you this liquid

{%- for option in product.options_with_values -%}
{%- if option.name == ‘Color’ -%}

{%- for value in option.values -%}

{% assign swatch_color = value.swatch.color %} // This code gets the color from the metaobject in admin content settings from color setup.

{% assign swatch_image = value.swatch.image %} // This code gets the color from the metaobject in admin content settings from color setup.

{%- if swatch_color -%}

{{ value }}

{%- elsif swatch_image -%}

{{ value }}

{%- endif -%}

{%- endfor -%}

{%- endif -%}

{%- endfor -%}

Use this code as per your convenient to replace the swatch liquid your theme.

Thanks.

Hope this can help you.

If our suggestion is useful, please let us know by giving a like or mark as a solution. Thank you

[oribenez]

I’ve tried the above solutions and none worked

[Marius_Nicola]

this is how you get all the colors from shopify–color-patern

{% assign all_colors = shop.metaobjects[“shopify–color-pattern”] %}

let’s presume you have to draw the red product option

{% assign option_value = “red” %}

here’s how you can get the actual hex code of the color

{% assign color_code = back_colors[option_value].color %}

now you can use it in a css variable or in style or whatever you need.

good luck.

[MatthewGerdan]

Does anyone know how to make code like this work on a localised version of the site?

i.e. when the option name isn’t Color anymore and it becomes something like Couleur.

I know just checking against the localised options for Color would work but was kinda hoping for a way that wouldn’t break when new languages or changes to localisations are made