Product Variant
You add variants to a product that comes in more than one option, such as size or color. Each combination of option values for a product can be a variant for that product. For more information, see Variants.

Setup Color Variant

01: Advanced Color:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings -> General.
Scroll to Swatch and choose Type as Advanced Color.

When selecting this option, there are 2 cases::
If the color name is a basic color (http://www.w3schools.com/tags/ref_colornames.asp) then the color will be displayed automatically.
If the color name is a special name (not a basic color), then you need to upload a PNG image with a certain naming convention.
The naming convention for PNG images:

02: Metafields:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings -> General.
Scroll to Swatch and choose Type as Metafields.

*How to add a new Metafields?
From your Shopify admin, go to Settings -> Custom data.
Click Variants → Add Definition.

Please enter the correct Namespace and Key as we noted below.
Name: Variant Color
Namespace and key: custom.variant_color
Select content type: Text
*How to insert content for Product Metafields?
From your Shopify admin, go to Products -> All products.
Find and choose the product that you want to edit.
Find and choose the variant that you want to edit.
In the Metafields, you need to insert "Color codes" or "Image with PNG format" for "Variant Color".
Image with PNG format



Color codes



03: Default:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings -> General.
Scroll to Swatch and choose Type as Default

04: Metaobjects:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings -> General.
Scroll to Swatch and choose Type as Metaobjects.

*Connect a variant to a product or category metafield
From your Shopify admin, go to Products.
Click the product that you want to edit.
In the Category section under media, select the category that matches your product.

In the Variants section, click + Add options like size or color.
If a compatible category or product metafield is available to connect to, then select it. The option values are automatically filled with any entries you have added to the metafield. You can select more option values or create new ones

Optional: If you want to add custom option values, then click Edit, and then click Add new entry. Fill out the entry fields, and then click Save.

Click Save to save the product.
Last updated