PrestaShop How-To: Associate Products with Color Swatches using Combinations
Products come in all shapes and sizes — don’t forget different colors too! It’s important to know how to use and create product combinations within your PrestaShop store. Creating combinations can be achieved when you have products that have different attributes. One of these types of attributes, product colors, is one of the most common. However, it is also one of the most confused combinations. In this How-To, we will provide step-by-step instructions to explain how you can associate products with color swatches by using combinations.
Step 1: Navigate to a product, and go to the combinations tab.
Above Image: This is where you will see all of the combinations that are currently associated with the product.
Step 2: Add a new combination, or edit an existing one.
Combinations are the varieties that exist in a product. If you were selling a band t-shirt, you wouldn’t just sell one variation of the t-shirt. You’d, for example, want to sell it in three sizes: Small, Medium, and Large, and you’d also sell it in different colors: Black, Red and Blue. So if you were to set this up in PrestaShop, the combinations you’d create would be like this: Small/Black, Medium/Black, Large/Black, Small/Red, etc.
Above Image: Here is the place in PrestaShop where you can add or modify these attributes, such as the colors/sizes in the last example. Choose an existing color from the drop down.
If you wish to add a new color that is not listed in the drop down, you can see the next step which will tell you how to do this.
Step 3: If you need to add color values
To Add A New Color: Go to “Catalog -> Product Attributes” and add a new value. You can then specify the value (The name that will show up in the store) and set a color through a color picker wheel. Don’t forget to hit save (I’m sure we’ve all been there!).
Need More PrestaShop Help?
We are the only certified PrestaShop partners in California, and all work is completed in-house. Send us a message to find out about our maintenance plans, or receive a free estimate. Want to learn more? Check out some of our other Presatshop Tutorials!
