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.

Enable swatches

With the Charge theme, you can enable color swatches easily in theme configuration.
First, you have to enable swatches in Theme Settings- General. You can see the option Enable color swatches here. It means swatches will be shown on the product card in featured collections.

Then, if you want swatches to be shown in product filters both on the Collection and Search pages, go to the Collection (Search) - Filters and enable Show color as swatches to see results like this one.

On the Product page you can choose the type of Color swatch in the Variant picker. You can also see added blocks like the Complementary and Product recommendation. They offer the separate settings for the product card where you can enable the display of color swatches.  You have to find the required section/block configuration and put the checkbox in Show color swatches. 

Show color swatches based on images

Since the 1.6 version, it is possible to render color swatches based on images. Charge 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 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.

Show color swatches based on the HEX code

Since the 1.9 version, it is possible to use the HEX code for swatch thumbnails. First, you have to enable the color swatch list in the Theme Settings - Color swatches. Then type the color name with its hex code in the format below:

colorBlack:#0000

Note: The color name (colorBlack) corresponds to the color option name of the product variant.

Since 3.0.0 version, we added the opportunity to list the possible option(variant) names.