Using the “Colour Swatches Pro” extension you can change the entire shopping experience for your customers based on a few simple configuration changes when used with different attributes. I will demonstrate this by showing you how to create a new configurable product.


The two I will cover in this tutorial are “Text Swatch” and “Dropdown”  type attributes, using these attributes you can get very different outputs following the same technique to create the initial product.


Firstly if you haven’t already you will need to create the attributes for use in these products, do note that you can only have one catalogue input type per attribute. (I will show the way both options will display if you are unsure which to use) “Dropdown” or “Text Swatch”selection as below:




Once these have been created, some values added, under “Advanced Attribute Properties” the scope has been set to “Global” and it has been added the the attribute set then you are ready to start.


You will need to create a new configurable product, to do this you will need to go to “Sales” > “Products” > “Add Product” (click the down arrow to get the option to choose the type of product you would like to add.)



From there you will be presented with a page to add the new product, you will need to expand the “General” tab and add information to the required fields as well as picking a category for the product. Once this has been done you can proceed down to the “Configurations” section and click the “Create Configurations” button.



You will be presented with a screen that firstly asks you to select the attribute(s) you would like to use, also making sure you choose the correct attribute for the catalogue input type you require. If you are creating a product that is only available in one variant, one option to be selected by the customer (like "size"), then you could just select that one attribute. But if you have two options, like “Size” and “Colour” select both of them by ticking your requirements, then click Next in the top right corner.



You will need to now select the attributes values that apply to the product you are creating so all of the possible configurations can be created, for example in the screenshot below there will be a Black, Blue, Neutral & Red item each in size Small, Medium & Large, once you are happy with your selections, again proceed to the next step with the Next button.



This next screen gives you ability to add individual or apply the same data elements to your variants, alternatively, this can be skipped by leaving everything as “Skip xxxxx at this time”. Once the configurations have been created you will be able to add the information to them.



Finally you will be shown the products that are about to be created and once you are happy with these all you need to do is click “Generate Products” in the top right hand corner. Which will then give you the option to add an image with the “+” change the price, name, quantity and weight, once this has been done you can save in the top right hand corner and once completed it should look like below.



Now you have the product set up and categorised this is where you will see the difference in catalogue input type, we can compare some pages to demonstrate the differences in layout. For example shown below is the category page, on the left is the “Dropdown” and the right is the “Text Swatch



As you can see, the “Text Swatch” shows the sizes available on the category page but the “Dropdown” doesn’t allow this. The benefit of this is if that the product only has a single option then the customer can add this to cart directly from the catalogue page.


However when clicking into the product page of an product that has multiple options then again there are options to have this displaying differently, as shown below you have the option to show “Size” as either as a dropdown or as a matrix but you can also set up your other attributes as a dropdown, for example “Colour” could be a dropdown if required but in this example I have kept the “Colour” the same in both as a “Visual Swatch” so that the user can see the colour of the item if a photo of that colour isn’t available. Shown below is the same product but configured differently.



Each one has positives and negatives, the dropdown for instance is easy to navigate for all users and is good for when the customer would only want to add 1 or 2 versions of this product to the basket, any more than this and this is where the matrix is more suitable, however it lacks the usability of having the attribute shown on the catalog page. Conversely the matrix display is good because it shows more information about the product like available quantity, all the sizes available for instance and users can easily add multiples of each size to the basket however some users may be daunted by this layout and find the dropdown easier.


The way that these options are configured are all using simple dropdown selections in the configuration of the extension, a few to consider using are given below.


The matrix can be enabled/ disabled/ enabled for specific products (In “For Specified Products”, to activate a matrix for a particular configurable product. Go to Admin Panel > Catalog > Select a needed configurable product and navigate to “Display Last Attribute” setting and set it to “Yes”.)



If you are using just one dropdown attribute then you can show the price of each option in the dropdown as well as the price difference between each item which can be used as an up-sell technique as people may look at a version of a product and see that for only £xx.xx they can get a better / bigger / faster item they may choose to do so.



Another feature that may be worth considering is the preselect feature which would allow you to ensure that when the user clicks into the product page the first option of each attribute is selected so for an item of clothing would likely be Size / Colour or the cheapest option so if a combination of the item is on sale the user will be presented this first without having to try all different options to find this.




If you are unsure about the use of this extension with a specific setup or if you would like more information on this topic, please contact Liquidshop support.