In Shopify Theme Color Swatches are the best way for potential buyers to get a feel batter for the colors of your products. With just a few of clicks, they can see how the colors will look in different products with different situations.
This makes it easier for them to choose the best color goods according to their needs.
One of the best things about using Shopify Theme Color Swatches is that you will have a perfect sense of the colors available, and you would make the perfect and best choice for your product.
Color swatches are very small samples of color that can be used upon an e-commerce store or a website to help customers visualize and select what products they want to buy.
On a whole, the color swatches are good additions that can benefit any e-commerce business interested in optimally upgrading the shopping experience and finalizing sales at their online store or website.
Step 1:- Follow these steps Shopify admin > products > select any product which you want to create swatches then after selecting the options where you can add the color options for particular products with value( add “Option Name” and “Option Values” for e.g Size and color.)
Step 2:- Then after following these steps to create the meta fields -> Add in the meta field click on SETTINGS scroll down to META FIELDS then click on variants and from variance add a definition by clicking ADD DEFINITION name it COLORS and in namespace add in color.values now from select content type select a color and save.
Step 3:- Then after adding this metafield value to the product variant which we created in the first step.
On the Product, page click that and from each variant click on edit now in this orange color variant select a picture which is orange color click on the done scroll down to meta fields select the color orange, and save. Now repeat the process with the remaining color variants.
Step 4:- Then after adding the custom code for swatches in the DAWN theme then go to Shopify admin and click on Action and go to Edit code and search the main-product.liquid file under the section folder.
After that search the following code in the main-product.liquid file.
|
<label for=”{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}”> {{ value }} </label> |
Replace the below code in place of the above code
|
{% if product.variants[forloop.index0].metafields.custom.color.value and option.name == ‘Color’ %} <label for=”{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}” style=”background-color: {{product.variants[forloop.index0].metafields.custom.color.value}}”> </label> {% else %} <label for=”{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}”> {{ value }} </label> {% endif %} |
in the preview page, you can see the update of color swatches look like the below image.
