Variant Swatches

Note

Shopify has announced native Swatches during “Winter 2024 Editions”. Some category of products do support automatically color/image swatches, so if your products do fall in between these categories you do not need to create the following metaobjects, because you can use native swatches that Shopify do create automatically for them.

For all other products you can instead use the solution below!

Options metaobjects

To customize the options variant buttons of your products you need to follow this simple guide to create the metaobjects in Shopify.

1. In the Shopify Panel go to Settings > Custom Data > Metaobjects > Add definition

   

2. Add the value Option in the name field

   

3. Add four fields:

   • Name (single-line text)
   • Color (color)
   • Image (file)
   • Description (multi-line text)

   

4. Once done, save and open Products Metafield. Add Options in the name field and select type Metaobject
   

   

   

5. Select the Metaobject Options we created previously, select List of entries and click on Save.

   

   

6. Once done, you will find the Metafield Option in each product page.

   

7. To add name, color or image just click on Metafiled > Options and than create new entry

   

8. Note that you have to use the same name of the Product Variants you created before. Watch the live sample of these custom variant buttons here.

   

Plus: If you wish, you can add additional fields to the metaobject definition, supported types are:

• Single Line Text field
• Multi Line Text field
• Integer
• Decimal
• Dimension
• Money
• Volume
• Weight

Custom Attributes

Swatches can be connected directly inside the add to cart buttons, on the variant swatches elements using custom attributes:

Background Color

Will dynamically change the background color of the element inside the variant swatches button that has the attribute. Works both with native swatches and metaobject swatches

Name

option

Value

bg-color

Color

Will dynamically change the color of the element inside the variant swatches button that has the attribute. Works both with native swatches and metaobject swatches

Name

option

Value

color

Image

Will dynamically change the image/background image of the element inside the variant swatches button that has the attribute. Works both with native swatches and metaobject swatches

Name

option

Value

image

Description

Will dynamically change the text of the element inside the variant swatches button that has the attribute. Works only with metaobject swatches

Name

option

Value

description

Title

Will dynamically change the text of the element inside the variant swatches button that has the attribute. Works both with native swatches and metaobject swatches

Name

option

Value

title

Additional fields

If you created additional fields for your “option” metaobject definition, you can display them inside your swatches by using the attribute:

Name

option-metafield

Value

key_of_your_metafield

Be sure to change the value of the custom attribute with the effective key of the field you created