Color swatches setup

About:

This documentation presents the step by step process on how to set up your swatches.

Step 1:

Go to the Product Description backend and scroll down to "Category Metafields".

Step 2:

If you've not used the "Color" metafield before, press on the "+Color". This action will directly add the Color metaobject in the backend and will allow you to quickly create the colors you're going to use in your store.

Step 3:

Click on the newly created field "Add color" to add a new entry or select a pre-existing color.

Info: You can create a new entry depending on your colors and color naming choice, or use the default colors provided by Shopify

Note: It is important to use the exact same name for the colors as you've named your Color Variant

Step 4:

By clicking on "Add a new entry", a new page will appear where you'll have to enter:

A color name (the same as the intended variant color's name)

A color value (you can either pick the color from the table or use the hex code if you already have it)

An image (can be used instead of the color value)

A base color - this is used by Shopify to keep track of the colors and help their software with filters and other color-related functionalities.

A base pattern - this should be left on "Solid"

After filling out the form, hit "Save".

Step 5:

Click on your color variants:

Step 6:

Connect the color variants dynamically by clicking on the "Stacked coins" symbol:

The metafield you're going to connect the variants to must be "Color":

When the colors are dynamically connected, the stack coins symbol has a "Checked" symbol on top:

After this is done, the theme will automatically recognize that for this particular product, the color variants' colors are coming from the metafield in the backend.

Step 7:

Go to the theme and assign the color swatches to your "Color" variant inside the Theme's Settings > Product cards > Swatches.

Info: If you don't use specific color naming like "XYZ123" and you already have a list with all of your colors, you can go to the store's "Content > Metaobjects > Colors" page and add the colors directly. After doing so, all you have to do is repeat Step 3 on each of your products.

Contact Us