How to Configure Swatches

OVERVIEW

Swatches are a setting that requires a bit of work to configure.  However, once configured, this could be a powerful tool to help convert customers that are looking for custom options for the product they are interested in.

Configuring swatches alone will not make them appear to your customers.  Using this feature allows a designer to include the swatch in the viewset for your store. 

REQUIREMENTS

The following pre-requisites will be necessary to accomplish the goals of this article:

• Have one or more products in mind that may require a swatch option
• Have store administration access in your Hotcakes Commerce store
• Have a Hotcakes Commerce store ready to modify products

GETTING STARTED

If you haven’t done so already, login to your store using a store administration account.  This could be a CMS “admin” or “superuser” account as well.  Add a product that you wish to have swatch-friendly options for, such as different colors and/or textures.

HOW TO CONFIGURE SWATCHES

The first thing you need to do is determine which product(s) that you want to support swatches.  It would be highly suggested to determine if any products will share the same colors/textures, because you can share swatches across as many products as you want. 

In this example, we are going to use one of the sample products, the laptop.  Laptops often will come with options for different colors.  In order to specify that we want to support one or more colors, we need to choose the Choices feature.

Swatches are supported using pretty much any of the choice types.  For this example, we’ll choose radio button list. 

Name the choice whatever you want, but make sure you check the checkbox for “Show color swatches for this option” and add any kind of colors or patterns that you want here.  Save your changes. 

You should note that these choices that you are adding will need to match a swatch file in the store file system.  You’ll learn more about this in the related documentation below.

Scroll to the bottom of the product edit view and enter a folder name for the swatches.  If this is your first time configuring swatches, there likely is not a folder already created for you to use yet – so you can name it anything that you want.  It’s probably a good idea to choose a very general name, like “Common-Colors-Patterns” shown in the example below.

Otherwise, you should check in the store data files to see which swatch folders might exist.  There is related documentation below to help you with swatch files.

Once you save your changes, the folder name will be parsed by the store to remove and/or replace any invalid characters in the folder name.  You should note this, as you might need to use a different version of the folder name than you thought.

This is all that you have to do from a product management perspective.

To continue configuring swatches, you should see the related documentation below on how to manage the swatch files.