[intro] When you have completed this Guide, you will be able to add Colour Swatches to your Products, both manually via the Add/Edit Product window and via a spreadsheet using the Import/Export System. [/intro]

[summary]

[/summary]

What are Colour Swatches?

On the EKM online shop platform, Colour Swatches are different kinds of Variants, which can be applied to Products with Variants where colour is key.

Online, colours are labelled with hex codes, which are used in coding to create websites and in graphic design. If you’ve not seen a hex code before, they are a hashtag symbol and six digits, comprising of letters and numbers, like this:

  • #000000 = Black
  • #ff00000 = Red
  • #0078ff = Blue
  • #4ad811 = Green

How to find out what your hex codes are

Before you begin, you ideally need to have the hex codes for each of your different Variants. If you already work with a graphic design program such as Photoshop, you can easily find out what your hex codes are there. However, if you’re not using a graphic design program yourself, you can also find out what hex codes your colours are quite easily using a free extension on Google Chrome (an extension, if you’ve not used one before, is an app you can add to your Google Chrome browser which will help you perform specific tasks. Many of them are free of charge and very useful!).

If you click here, you can install the ColorPick Eyedropper extension to Google Chrome. When installed, you’ll see it as a little colour wheel symbol in the top right-hand corner of Google Chrome:

To use the extension, simply click the colour wheel symbol and hover your cursor over an online image to see what colour it is, like this:

Therefore, to get the hex codes for the Variants of a new product, you can upload the Product Images to the File Manager, and then view each one, using the ColorPick Eyedropper extension to find out what colour your Product Variants are.

For best results, ensure that your Product images are well-lit so that the colour is as ‘true’ as it can possibly be.

Adding Colour Swatches in the Add/Edit Product window

1. To add Colour Swatches manually, you need to first open the Add/Edit Product window for the Product you would like to add Swatches to and click the Variants tab:

2. Click the green Add Variant button:

3. Click Create Variant under Colour Swatch:

4. Add a name for the Variant in the field provided and click the green Add button:

5. You then need to click in the field provided to type in the name of the colour and then click the coloured box to select your colour from the Colour Picker window. You can do this manually by dragging the circle in the larger window and using the slider to the right of that, or alternatively, if you have the hex code for the colour, simply add that to the field before clicking the green Add button. Click the Update button when all of your colours have been added:

6. You then need to click the green Save button on the bottom right-hand side of the Add/Edit Product window:

Adding Images to each Variant Choice

7. If you wish to add images for each colour choice, click Edit to the far right of your first colour choice:

8. You’ll see, in the top left of the Add/Edit Product window, a notification to let you know which Variant Choice it is that you’re currently editing. Click the Images & Photos tab:

9. Start with the Image furthest to the left, click the Edit button to assign a different image to the Variant Choice. Select Choose Existing if you’ve already uploaded the Product Image to the File Manager, or Upload New if not:

[tips]Ideally all of these images should be the Product from different angles and not all of the same image! The more images you add to a Product or Product Variant directly influences the chances of a sale as customers like to take a good look at items before they purchase.
The main Product Image should be the Product face-on, but any additional images can show the Product being used or worn, with close-up images of any fine details or features. [/tips]

10. When you have finished adding the images, click the green Save button on the bottom right-hand side of the Add/Edit Product window, and then click Return To Master Product on the top right-hand side:

11. Repeat this process for your other Variant Choices by clicking the Edit button:

12. When you have completed the process for each of your Variant Choices, click the Save & Close button on the bottom right-hand corner of the Add/Edit Product window:

When your changes have been applied to the front end of your EKM online shop, visit the Product Page to see the Colour Swatches:

Adding Colour Swatches using spreadsheets

It’s also possible to add Colour Swatches to existing Products using spreadsheets. Before you begin, you need to have installed the Import/Export System and set up Colour Swatches on one Product already to use as a guideline. By following the steps below, you will add a completely new Product to your EKM online shop with Colour Swatches for each Variant using a spreadsheet. For a more advanced Guide to adding new Products with weights, attributes and other details, read this Guide.

Before you begin, upload all of the Product Images to the File Manager in bulk by using this Guide if you’ve not done this before.

1. Export your Products to a spreadsheet (including all fields when prompted), and delete all rows from the spreadsheet apart from those containing your template Product:

2. In the A (Action) column, enter ‘Add Product’ for the first row, and then ‘Add Product Variant’ for each Colour Swatch in the row beneath, like this:

3. In the CategoryPath column, add in the name of the Category where you would like the Product to be added. Leave the ID column blank (as it’s a new Product to the system, it won’t have an ID until it has been uploaded), add the Name of the Product into the D column, and a Description in the F column, like this:

4. Remember, the Description only needs populating on the ‘Add Product row, and not any of the ‘Add Product Variant’ rows. You then need to add in the Price in the I column:

5. At this point, you need to get the addresses for the images from your File Manager. It’s helpful here to colour the rows of your spreadsheet so you can tell which Variant Choices you are adding information to as you work across the columns, like this:

In this example, my T-shirt Product is available in three different colours - red, yellow and green. Yellow is the Default Variant, which is why both the ‘Add Product’ and an ‘Add Product Variant’ row are coloured yellow.

6. Open the File Manager in the back end of your EKM online shop and copy the addresses for each of the Product Images you want to apply to each Variant Choice, and past them into columns K-O, like this:

7. You then need to scroll across your spreadsheet to column U. Populate only the ‘Add Product’ row (the first yellow row) for columns U, V, X and AB, like this:

8. Scroll further across to columns AD, AE, AF, AG and AP. You then need to complete the ‘Add Product Variant’ rows (the lower three) like this, making sure that the hex codes for your different colours are correctly added in column AG with a hashtag symbol, like this:

9. You then need to scroll to the far left of your spreadsheet and delete the rows containing your template Product, leaving you with just your new Product and its Variants:

10. Save your spreadsheet, and open your browser, returning to the Import/Export System on the Features page of you EKM online shop. Click Import from File:

11. Click Choose File to select your saved spreadsheet:

12. When you see the spreadsheet’s title, click the green Upload button:

13. When you see the name of your spreadsheet in the list, click it:

14. Then you need to click Test For Errors:

15. Your spreadsheet should return no errors, like this:

[warning] If your spreadsheet has errors, click the Warnings And Errors header to see these detailed. Amend your original spreadsheet and upload the amended version to your EKM online shop before testing for errors again. [/warning]

16. Click Start Import Process:

17. When the Import has finished, click the green Done button:

18. Wait for your shop to update, and then check the front end to see your new Product with Colour Swatches on your EKM online shop:

[tips] If you already use drop-down style Variants on your existing Products and want to convert them to Colour Swatches instead, use this Guide. [/tips]

[more]

[/more]

[contact] If you need our help with your EKM online shop, contact your Ecommerce Expert or the Customer Support Team, who will be able to point you in the right direction. We're open from 8am-6pm weekdays and 9am-5.30pm weekends. If you'd like to suggest a feature or an upgrade on any of the EKM platforms, please let us know on the EKM Suggestions Board. If you have a non-account-specific question to ask the EKM Team, join us in the EKM Community. [/contact]