Color options

With the Color options functionality in Instant Commerce you can visually represent the color swatches that you have set up for your products in Shopify.

How to setup color options

To set up color options, you:

1. Set up the color options in Shopify,
2. Import the color options into Instant Commerce, and
3. Pick representation colors for your color options.

Set up color options in Shopify

Before you can use color options in Instant Commerce, you have to set them up in Shopify.

1. Open your Shopify store and go to Products.
2. Click a product that has color options.
3. Scroll to Options and click Add another option.
4. Under Option name enter a name for this option in the default language of your Shopify store.
5. Enter the color options for this product under Option values.
6. Save your changes.
7. Repeat these steps for each product that has color options. Make sure you pick the same Option name at step 4 for each product. If multiple products share a color, make sure you give these colors the same name with each color.

info

Instant Commerce recognizes color options with the same name (e.g. "Black") for different products as one color option applied to different products. This means that you can only pick one representation color for that color option.

If you offer two or more products in different shades of the same color, give them more specific names (such as "Anthracite" and "Midnight" instead of "Black") so that you can pick a different representation color for each of them.

Import color options into Instant Commerce

Next, you have to import your color options into Instant Commerce.

1. Open your Instant Commerce store and go to Product options > Color options.
2. Click on the Import Shopify color options button and enter the Option name that you used in Shopify for the color option.

Please note that this process can take longer depending on the size of your product inventory in Shopify.

The color options might not show until you refresh the page.

Pick representation colors for your color options

Once the import has been completed, you will see a list of all color options that have been imported from Shopify into the overview screen. These will be labeled No color set. This means there isn’t an actual color attached to this variant yet.

1. Open your Instant Commerce store and go to Product options > Color options.
2. Click the Pencil icon for one of the color options.
3. Select the type of color fill this option has:
   • Solid
   • Two tone
   • Gradient
4. Enter the color code(s) for this color variant or click the Palette button to use our color picker to select the color(s).
5. Save your changes.
6. Repeat these steps for each color option.

Add translations

If you have set up translations for your store, you can add translations to your color options.

1. Open your Instant Commerce store and go to Product options > Color options.
2. Click the Pencil icon for a color.
3. Enter all necessary translations.
4. Save color.

To add translations for the Option name:

1. Open your Instant Commerce store and go to Product options > Color options.
2. Click the Pencil icon on the top right corner next to the Option name.
3. Click Add additional translations.
4. Enter the translations for the languages of your store.
5. Start import.

Change a color's name

If you want to change a color's name, you need to change the name in Shopify. Then click the Fetch product color button on the Color options page in Instant Commerce.

1. Open your Shopify store and go to Products.
2. Click a product that has the color option for which you want to change the name.
3. Change the color name under Option values.
4. Save your changes.
5. Repeat these steps for each product that has the color option for which you want to change the name.
6. Open your Instant Commerce store and go to Product options > Color options.
7. click the Fetch product color button.
8. Pick a representation color for the color options with new names.

caution

• If you want to change the Option name in Shopify, make sure you change the Option name for all products.
• Changes won't be fetched unless you change the Option name in Instant Commerce on the Color options page in the top right corner as well.
• After you change the Option name in Instant Commerce, only the products in Shopify that have that Option name will display the localized color representations. If there are products in Shopify that still have an Option name that is different than the one selected in Instant Commerce, they will only show the color names entered in Shopify.
• When you fetch the product colors for a new Option name, your previously imported colors won't be removed.

Edit color options

In Instant Commerce, you can change the translations, type of color fill, and the color(s) representing your color options. To change these things, click the Pencil icon for the color option for which you want to change them. Change them and Save color.

Removing a color variant

To remove a color option, click on the Trash can icon for the color option you want to delete.