Skip to content
Customize Variant Buttons

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.

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

    Smootify Docs

  2. Add the value Option in the name field

    Smootify Docs

  3. Add four fields:

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

    Smootify Docs

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

    Smootify Docs

    Smootify Docs

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

    Smootify Docs

    Smootify Docs

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

    Smootify Docs

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

    Smootify Docs

  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.

    Smootify Docs

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

option
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

option
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

option
image

Description

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

option
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

option
Title