This article will guide you through the process of setting up color swatches. This guide uses an example attribute called grid_color. The names and swatch values may differ depending on your setup.


  1. Log into the admin panel.
  2. On the left hand side, click Stores and then Product(under Attributes).
    1. 19011505.png
  3. You should now see a page called Product Attributes that has a table.
  4. Under the column Attribute Code, enter the name of the grid dimension in Counterpoint and press the Search button.
    1. 19011507.png
  5. Click on the attribute called grid_<name of grid dimension>.
    1. For example, if the grid is "color", then you would click on grid_color.
  6. You should now see a page that looks like the following:
    1. 19011498.png
  7. Under Attribute Properties, change  Catalog Input Type for Store Owner to Visual Swatch.
    1. 19011501.png
  8. Under Manage Swatch, you should now see another field called Swatch. Click on the box under Swatch.
    1. 19011502.png
  9. Then, you should be presented with three options:
    1. 19011503.png 
      1. Choose a color – You will get to select which color represents the value from a color wheel.
        1.  19011504.png
          1. Click on the color on the left or use the values on the right to set the color.
          2. Then press the button surrounded in red to set the value.
    2. Upload a file – You can upload an image to represent the swatch.
    3. Clear – Unsets the Swatch value.
  10. Repeat step 8 for the other colors.
  11. Press Save.