Product Color And Text Color Metafields

What Is This?

These are two custom color fields that enable you to add custom background and text colors to your products.

How Do I Set This Up?

Create the Metafields

1. From your Shopify admin, go to Settings > Custom data.
2. Select Products.
3. Click Add definition.
4. In the Name field, enter "Color". The Namespace and key field will automatically generate as "custom.color", don't edit this.
5. Optional: In the Description field, enter a description for your metafield values. We suggest "Color associated to this item. It will be utilized as a background color in many product-based sections".
6. Click Select content type, and then select Color.
7. Make sure One Value is selected
8. Click Save, and then click the arrow icon to go back to view the list of all product metafields
9. Click Add definition.
10. In the Name field, enter "Text Color". The Namespace and key field will automatically generate as "custom.text_color", don't edit this.
11. Optional: In the Description field, enter a description for your metafield values. We suggest "Pairs with the Color product metafield, where that is the background color and this is the text color. Make sure there's enough contrast between the two."
12. Click Select content type, and then select Color.
13. Make sure One Value is selected
14. Click Save.

Shopify provides details about creating metafields here

Supply Data for the Metafield

1. From your Shopify admin, go to Products
2. For every product, select it and scroll to the bottom of the page where you will see the metafields you added in the first set of instructions. Select each field and choose a color for each, where Color is the product's background color and Text Color is the product's text color. Make sure there's enough contrast between the two. Use a contrast checker to double-check your work.

Display the Metafield Data on your Site

There are many sections that enable you to display these custom colors. Follow the instructions for each below.

Enable By Setting

Each of the sections below will have a setting called "Show background color", "Theme section with the product color" or "Theme collection slideshow with product colors", toggle it on. If you've followed all of the instruction sets above, and you've supplied data for the product you're currently previewing, then you will see your Product Colors display

1. 1. Collection Teaser
   2. Main List Collections
   3. Featured Collection
   4. Featured Product
   5. Main Collection Grid
   6. Multicolumn
   7. Shop the Look

Main Product

This section handles the color metafields differently than the ones listed above. By default, if you've supplied color data for the product, those colors will display on the Main Product section. However, you can turn that off in order to use custom theming by unchecking the "Use product metafield color for theming" option. Additionally if that box is checked but there are no colors added to the product via metafields, then the section will use the default section theming instead. 



When using section theming, the right side of the section will use the "Background" color and the "Text" color values. While the left side of the section will use the "Secondary text" and "Secondary background" values.