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.

Ella offers 2 type for Product Variant: Dropdown and Square / Rectangle / Swatch. For more information, see Swatch.

Setup Color Variant

Ella offers 3 type for Color Variant: Default, Advanced Color and Metafields.

01: Advanced 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 Advanced Color

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.

02: Metafields:

There are 2 ways to set up the special colors:

• By uploading a png image

• By metafields

1. If your products have custom colors/ special colors, you can follow below instruction:

• 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

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

2. If your products have custom colors/ special colors use Variant Metafield, you can follow below instruction:

• 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?

1. From your Shopify admin, go to Settings -> Custom data.

2. Click Variants → Add Definition.

3. 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

• Color codes

• You need to make sure your color codes are correct: http://www.w3schools.com/tags/ref_colornames.asp. If the color code does not exist on the w3schools site, it will not show up on your site.

• Allows use of 3 formats: HEX, RGB and HSL.

03: Default:

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.