Set up Swatches in Product Options



Product Options 2.0 allows you to use swatches with your options. Swatches provide your customers with the ability to visually select the colour of the product they wish to receive; instead of using a text-based menu.

Note: Swatches are included in the Premium version of Product Options. Visit Change Your Price Plan in Product Options to learn how to upgrade.

To set up swatches with your options, please follow these steps:

  1. From Shopify's admin, select Apps.


  2. Select Product Options by Bold.

    Select Product Options by Bold

  3. Select Options.


  4. Select Create Option Set.

    Create Option Set

  5. Enter an Option Set Name.

    Enter an Option Set Name

  6. Select Select Products.

    Select Products

  7. Select Products or Dynamic List.

    Note: Product Options uses an advanced version of the product selector to choose your items. Visit Navigating the Product Selector for more information on how to use this selector.

    Select Products or Dynamic List

  8. Select either your products, or the conditions of your dynamic list.

    Note: Selecting "Products" in the previous step will have you choose each item you want to associate this option set with. Selecting "Dynamic List" will have you choose a more refined list of items using the conditions.

    Select Products or List Conditons

  9. Select Save Selection.

    Select Save Selection

  10. Select Create new option.

    Note: If this option already exists within Shopify, it's a great time-saving feature to choose Pick from existing, select an option that has already been created, and select Use Option here instead.

    select create new option

  11. Enter a Name.

    enter a name

  12. Under "Type", select Swatches (Multiple Choice).

    select swatches multiple choice

  13. Enter System Name.

    Note: System name is an internal name used by the app; it is not visible to your customers.

    enter system name

  14. Enter Help Text.

    enter help text

  15. Under "Values", enter your first Value Name (ie. Red).

    enter the first value name

  16. Select the + symbol.

    enter the + symbol

  17. Select Upload an Image or Pick Colours.

    Note: Choose "Pick Colours" to select from a colour wheel, choose "Upload an image" to use an image under 2MB. If you are using images and not the colour wheel, you can skip to step 24.

    select an option

  18. Select Pick Colours again.

    select pick colours

  19. Select your Colour.

    Note: To change the palette to a different colour entirely, use the slider below the colour wheel. You can enter a HEX value instead if you prefer. You are also able to select multiple colours.

    select colour

  20. Select Done.

    Note: You may need to select Done twice, as the first selection actually closes the colour wheel.

    select done

    1. Select the Selected checkbox if you want this option to be selected by default (optional).

      select selected

    2. Select Adjusts price if you would like that value to be a different price (optional).

      select adjusts price

    3. Select Create a Charge to charge a different amount for this option and enter the $ Amount (optional).

      select create a charge

    4. Select Use an existing variant in your shop if you have a variant already set up for this option, and select Select Variant (optional).

      Note: This will take you through the product selector to choose an existing variant, just like in steps 5 and 6, although you will only be able to select one option here.

      select an option

    5. Under "How do you want to handle quantities?", select (optional):
      • Option quantity matches product quantity,
      • Customer can choose option quantity,
      • Add one option item per product in the cart,
      • Add one option item for the entire cart; or
      • Add one option per line item.

      Note: Visit: What do the "How do you want to handle quantities" options mean? for a detailed explanation of these options.

      Select an Option to Handle Quantities

  21. If your "Value" has "Nested Values", enter them (ie. Yellow is available in Small, Medium, Large) (optional).

    nested values

  22. Enter a Value.

    enter a value

  23. Select the + Symbol.

    select the + symbol

  24. Select Upload an Image

    Note: Adding multiple swatch images can affect the load times of your product pages. We recommend uploading no more than 30 images to a given swatch.

    select upload an image

  25. Select the Upload Image Box.

    select the upload image box

  26. Use the File Manager to select your image.

    Note: Your image can be no more than 2MB.

    select your image in the file manager

  27. Select Open.

    select open

  28. Select Done.

    Select done

  29. Repeat the preceding steps until you have entered all values.

    repeat the steps

  30. Select Save.

    select save

  31. Select Save Option Set.

    select save option set

The swatches will then display on your product pages similar to this:

Swatches Example

Helpful Links:

0 out of 0 found this helpful



Please sign in to leave a comment.