Using the Color Metafield in a Shopify Theme

This tutorial is outside Shopify support if your experience errors or issues. If you need direct assistance, you can contact me and I will see what I can do to help.

Resources used:

Adding Color Metafield

  1. Create the color metafield

    Create the color Metafield in the Admin underĀ Settings > Metafields

  2. Add the definition for the metafield

    Enter the name, namespace, description and type.

  3. Note the metafield full name

    Write down the full metafield name for direct reference

  4. Duplicate and Edit Code

    Be sure to duplicate your theme and then edit the code on the new copy of your theme.

  5. Edit the Product template

    Depending on what you are hoping to code. Try to find the product-template.liquid file to add code. Use the code refence below to add to the theme.

  6. Test changes

    Edit a product to test the code changes and be sure to preview the theme you edited.

          {%- comment -%}
             variable to hold color
          {%- endcomment -%}
          {%- assign product_color = product.metafields.my_fields.color -%}
          {%- comment -%}
             Color Metafield and attributes
          {%- endcomment -%}
          {%- if product.metafields.my_fields.color -%}
          <p><b>Color (default): </b> {{ product.metafields.my_fields.color }} <div style="display: inline-block; background-color:{{ product.metafields.my_fields.color }};width:10px;">&nbsp;</div></p>
          <p><b>Color (red): </b> {{ }}</p>
          <p><b>Color (blue): </b> {{ }}</p>
          <p><b>Color (green): </b> {{ }}</p>
          {%- endif -%}