Swatches

Color Swatches

Color swatches appear as clickable swatches on the product page. These swatches also display on the product card when the user hovers on desktop devices.

Note: The default option names are Color and Colour. However, you can use other names like Material, Style, or any option you want. Please read this article for more information.

Set up

1. In your Theme Editor, go to Products in the top bar and select a product Template to edit from the dropdown menu.
2. In the side panel, under the Product page section, click Variant picker to open its settings.
   • If the Variant picker block doesn’t exist, click + Add block and select the Variant picker block.
3. Check the Show color swatches option to display color swatches.

To add color swatches to your product page, you can use one of the default colors or add a custom color image.

Set up swatches with default colors

To display a default color, name your product variant one of the default colors on this list. Your variant name must match a color name from this list exactly. From your Shopify Admin:

1. Go to the product you want to display color swatches.

2. Find the Variant block and click +Add options like size or color.

   

3. Add the Option name. This is the type of option. The default options names supported by Frame are Color and Colour. If you want to use a different option name please read this article.
4. Add Option values. This is the name of each option. To use a default color, the option value must match a color name from this last exactly.
   1. (Optional) To show an image instead of a color, click the image icon to select a variant image.
5. Click Done.
6. Click Save.

Set up swatches with custom images

If you don't want to use a default color, you can use a custom image instead. You'll need to create these images yourself in a software such as Photoshop or Illustrator. Only PNG images work. Also, your image file name must match your variant name. For example, a product variant named Heather Grey will need an image with the file name heather-grey.png

1. Create a PNG image file with your custom color or print. We recommend a minimum size of 50 x 50px.
   • The name of the file must match the variant name and be lowercase. If your color variant is Navy then your file name must be navy.png

   • If the color name has a space, such as Pale Blue Grey, then the file name must be hyphenated, pale-blue-grey.png

     
     
2. On your Shopify Admin go to Content > Files.
3. Click Upload files and add all of your custom images.
4. Go to the product you want to display color swatches.

5. Find the Variant block and click +Add options like size or color.

   

6. Add the Option name. This is the type of option. The default options names supported by Frame are Color and Colour. If you want to use a different option name please read this article.
7. Add Option values. This is the name of each option. It must match the file name of your custom image swatches, without hyphens. See the table below for examples.
   1. (Optional) To show an image instead of a color, click the image icon to select a variant image.
8. Click Done.
9. Click Save.

Honey offers two types of swatches: Swatches, and Variant images:

1. In the Theme editor, go to Products and select a Product Template to edit from the dropdown menu in the top bar.
2. In the side panel, under the Product information section, click Variant picker to open its settings.
   • If the Variant picker block doesn’t exist, click + Add block and select the Variant picker block.
3. Go to the Variant picker type selector and pick Buttons.
4. Select the Swatch type you desire.
   • Default: This will display variants as default buttons (text only).
     
   • Swatches: This will display clickable swatches. You can use default colors or custom images.
     
   • Variant images: This will display clickable swatches. It will show the variant images you selected for each product variant.
     

Color Swatches

Color swatches appear as clickable swatches on the product page.

Note: The default option names are Color and Colour. However, you can use other names like Material, Style, or any option you want. Please read this article for more information.

Set up swatches

If you selected Swatches as your Swatch type, please follow these instructions.

Set up swatches with default colors

To display a default color, name your product variant one of the default colors on this list. Your variant name must match a color name from this list exactly. From your Shopify Admin:

1. Go to the product you want to display color swatches.

2. Find the Variant block and click +Add options like size or color.

   

3. Add the Option name, the default options names supported by Honey are Color and Colour, if you want to add a different option name please check the topic Product.
4. Add the Option values with the same name as one of the default colors.
5. Click Done.
6. (Optional) To show a specific image when the swatch is selected, go to the Variants block and click the image icon to select a variant image.
7. Click Save.

Set up swatches with custom images

If you don't want to use a default color, you can use a custom image instead. You'll need to create these images yourself in a software such as Photoshop or Illustrator. Only PNG images work. Also, your image file name must match your variant name. For example, a product variant named Heather Grey will need an image with the file name heather-grey.png

1. Create a PNG image file with your custom color or print. We recommend a minimum size of 50 x 50px.
   • The name of the file must match the variant name and be lowercase. If your color variant is Navy then your file name must be navy.png

   • If the color name has a space, such as Pale Blue Grey, then the file name must be hyphenated, pale-blue-grey.png

     
     
2. On your Shopify Admin go to Content > Files.
3. Click Upload files and add all of your custom images.
4. Go to the product you want to display color swatches.

5. Find Variants block and click the Add options like size or color.

   

6. Add the Option name. This is the type of option. The default options names supported by Frame are Color and Colour. If you want to use a different option name please read this article.
7. Add Option values. This is the name of each option. It must match the file name of your custom image swatches, without hyphens. See the table below for examples.
   1. (Optional) To show an image instead of a color, click the image icon to select a variant image.
8. Click Done.
9. Click Save.

Variant Images

If you selected Variant images as your Swatch type, please follow these instructions.

In the theme editor:

1. Go to the section where you want to apply this configuration .
   1. This setting is available in the following sections:
      1. Product information (inside the Product template)
      2. Featured product
      3. Shop the look
2. Find the Variant picker block and click to open its settings.

3. Go to the Color swatch type dropdown and select Images.

   

4. Click Save.

To display variant images, you must upload an image to each variant.

1. On your Shopify admin, go to the product you want to display variant images.
2. Scroll down to the Variants block and click the image icon to select a variant image.
3. Select an image and click Save.
4. Ensure that your product template is set to the one you updated in the previous step.
5. Finally, ensure your option names are defined in the theme. By default, 'Color' and 'Colour' are defined. However, if you want to use a different option name, please define it using these steps.