How to Change into Different Variants Options

Changing to different swatch styles varies depending on niche.
Written by Jonathan Diaz
Updated 10 months ago

Navigate to the Shopify Admin Page -> Theme Editor -> Theme Settings -> Product Page -> General Settings -> Swatch Style -> Choose Swatches Style

   ------------

  1. Label - displays all the variants into TEXT
  2. Variant Image - displays all the variants into IMAGES
  3. Use Variant Swatches (Dropdown Selector) - unchecking this option would disregard all the Swatch Style options and turn into Dropdown Variant.
  4. Color - displays Colors, it will turn into their respective colors.



    If you are to add "non standard color" you need to upload image with color name.

    Example: Color is "Rose Gold" then you need to upload 100*100 image with name "rose-gold.png"

    Basically, you have to upload image with small letter name (need to be exactly the same with the variant name) and also if there is space in color name then they have to use - instead of _ in image name

    Example, if the color name is "Heather Forest" then you have to put an image with name "heather-forest.png"

    Non Standard Colors - such as: light-red, red-blue, mint-blue and etc.
    Standard Colors - such as: Blue, Red, Green, Orange and etc. (automatic)

Other Useful Information:

How to Change Specific Texts - Change Specific Texts in the Theme

How to Change Specific Colors - Change Specific Colors in the Theme

Different Add To Cart Options - Change the General Add to Cart Button to different styles/ layout

Variant Swatch Style Options - Learn how to change the variants swatches to different styles.

Custom Link on ATC Button - Redirect the Add to Cart Button to a Certain Link

TAGS: variations, variants, variant options, swatch style, swatch styles, label, variant image, variant swatches, color swatches, swatches, variant dropdown, color swaches, swaches, swatches, colour, colours, colour swatch, color swach, product variations, product variants, product variation, variant switches
Did this answer your question?