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.

Pizzon offers 2 type for Product Variant: Dropdown and Square / Rectangle / Swatch.

Steps:

1. Go to Customize -> Choose Default product template in the dropdown of editor window to open theme editor of product page.

2. Click Add block from Product Information -> Choose Variant Picker

Setup Color Variant

Pizzon offers 2 type for Color Variant: Basic Color, Advance

1. Basic Color

1. From your Shopify admin, go to Online Store -> Themes.

2. Find the theme that you want to edit, and then click Customize.

3. Click Theme settings -> General.

4. Scroll to Swatch and choose Type as Default

For more information, see Adding images to product variants.

2. Advanced Color

'Advanced Color' use color name or image with PNG format. use image with PNG format from metafields.

1. From your Shopify admin, go to Online Store -> Themes.

2. Find the theme that you want to edit, and then click Customize.

3. Click Theme settings -> General.

4. Scroll to Swatch and choose Type as Advanced Color

After that, please upload an image with the same name as the color name (Go to Settings → Files -> Upload Files).

Naming convention: Lower cap and use a hyphen "-" to replace white space if your color image name has the white space. For example: your special color will have this name: "Holo Rainbow", you will upload the png image is holo-rainbow.png

You need to make sure your color name match with the color name at:

http://www.w3schools.com/tags/ref_colornames.asp. If the color name doesn't exist on the w3schools website, it will not display on your site.

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?

1. From your Shopify admin, go to Products -> All products.

2. Find and choose the product that you want to edit.

3. Find and choose the variant that you want to edit.

4. In the Metafields, you need to insert "Color codes" or "Image with PNG format" for "Variant Color".

• Image with PNG format

After that, please upload an image with the same name as the color name (Go to Settings → Files -> Upload Files).

Naming convention: Lower cap and use a hyphen "-" to replace white space if your color image name has the white space. For example: your special color will have this name: "Dark Gray Custom", you will upload the png image is dark-gray-custom.png