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 the Color Swatch value in the Variant Picker type. You can find it in the Product Information.
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 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.
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 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.
Comments
0 comments
Please sign in to leave a comment.