Welcome to CodeCrew Infotech
How To Add Color Swatches In Shopify Dawn Theme
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.
With the Shopify Theme Color Swatches are designed to give you a perfect sense of the colors available, so you can make the perfect and best choice for your product.
Color swatches are small samples of color that can be used on an e-commerce store or website to help customers visualize and select the products they want to buy.
Overall, color swatches can be a useful tool for any e-commerce businesses looking to improve the shopping experience and increase conversions on their 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.
You may also like
