Add color swatches with the Charge theme

Our template allows for installing Shopify color swatches manually. No need to buy a plugin.

The ability to show the product option “Color” in swatches will help you to offer a seamless shopping experience to your customers. As soon as they've got the opportunity to view different colored products without using a long-lasting drop-down, users start adding products to their cart.

With the Charge theme, you can enable color swatches in the Featured Collection section, collection pages, and search pages. Go to Online Store - Themes and click on Customize. You have to enable swatches in the theme's general settings first. Go to Theme settings - General and put the checkbox Enable color swatches.

You can also show/hide the color swatches on the product page in the different product blocks or even sections like Similar Products, Recommendations, and Complementary Products. You have to find the required section/block configuration and put the checkbox “Enable color swatches”.

To allow customers to see the product variants in colors, please select Color swatch in the Variant Picker  Type dropdown. You can find it under the Product Information.

Since the 1.6 version, it is possible to render color swatches based on images

The theme supports the following image formats: PNG, JPG, and JPEG.

Note: the swatch images must have the same name as the Color name.

See some examples of using the feature:

• The Color name is AcriliceArtCreation-720. Then the swatch image must have the name CuloriAcriliceArtCreation-720.png.
• The Color name is DARKGREENCOPPER. Then the swatch image must be saved as DARKGREENCOPPER.jpg (or png or jpeg).
• The Color name is could-be-anything-color-name, so save the swatch image name as could-be-anything-color-name.jpeg.

Since the 1.9 version, it is possible to render color swatches based on the HEX code

To use the HEX code you have to enable the color swatch list in the Charge theme configuration and then type the color name with its hex code in the format below:

colorBlack:#0000

Another example:

The color name (colorBlack) uses the color option name of a product variant.