Colour Swatches

Colour swatches are a common feature of eccomerce website, and are used to indicate that colour options are available on a per product basis. An overview of this new feature, along with a tutorial on how it can be used is detailed below.

This feature was developed following your input on the following uservoice ticket:

Colour swatches work in conjuction with the existing option set functionality, please read the tutorial below for directions on how to set up swatches on your site, please note that a design tweak may be required for the swatches to display on your site. If you would like any further information on this feature, or would like it activated, please contact Support.

Configuring Colour Swatches

Please inform the support team before creating colour swatches, a design tweak may be required on your site before they will be displayed on the frontend of the website.

When adding swatches to your LiquidShop, you will need your swatch images in place ready to upload, these will need to be roughly 30 x 30 pixels in size.

Step 1. Navigate to Products, and then to Option Sets, and identify the option set you would like to convert to a swatch option set, if you would like to view a tutorial for creating the initial option set, please follow this link.

Step 2. Click the colour swatch icon, this is found between the edit pencil and the delete icon, this will convert the existing option set to the swatch option set. 

Click here for a screenshot of this process.

Step 3. Now click on the magnifying glass icon for your option set, this will display the options within the set. Choose which option you would like to assign a swatch image to and then click the edit pencil for that particular option.

Step 4. Click the browse icon and navigate to your swatch image on your computer, they will need to be roughly 30 x 30 pixels in size. When you have selected the image, click Update.

Click here for a screenshot of this process.

Step 5. Repeat steps 3 and 4 for all options that require a swatch image, when you have uploaded all images go to the frontend of your website and navigate to a product (in category view) with the swatch option set assigned, the swatches will now be displaying below the product title. You may need to press CTRL and F5 to view the change.

Click here for a screenshot of the end result.