Variant Swatches
Options metaobjects
To customize the options variant buttons of your products you need to follow this simple guide to create the metaobjects in Shopify.
-
In the Shopify Panel go to Settings > Custom Data > Metaobjects > Add definition
-
Add the value Option in the name field
-
Add four fields:
- Name (single-line text)
- Color (color)
- Image (file)
- Description (multi-line text)
-
Once done, save and open Products Metafield. Add Options in the name field and select type Metaobject
-
Select the Metaobject Options we created previously, select List of entries and click on Save.
-
Once done, you will find the Metafield Option in each product page.
-
To add name, color or image just click on Metafiled > Options and than create new entry
-
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.
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
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
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
Description
Will dynamically change the text of the element inside the variant swatches button that has the attribute. Works only with metaobject swatches
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