Shopify has recently added a color swatch feature, which is an important and great feature in any ecommerce site. Previously, most users used color swatch apps or had a developer add the feature for them.
As a developer, I personally handle this type of work for many of my clients. However, merchants have the ability to finish this task without using any sort of apps or being required of hiring a developer to write code for their themes.
What we need?
You cannot do this with any random theme! To gain these features, you must have an updated theme, such as Dawn 15.0.1 or higher.
Your theme (or product template) should have JSON template as well as it should support metafields.
Follow the bellow steps to enable color swatch in your shopify theme.
Step 1:
Login to your shopify dashboard and click on products from left sidebar.
Now select one of the product for edit, where we’ll add some variants.
Step 2:
Now select a category for your product.
This category section is newly added!
Step 3:
Now scroll down to the Category metafields and click on Color to create a category metafield for color swatch.
Now we need to define our colors, to do that- click on the color input field. It’ll open a popup. If you dosen’t have any color defined, then simply click on- add new entry to add a new color.
When it’s done, you’ll able to select the color from the dropdown list, like we did here-
Step 4:
Now we need to add the color variants. So, scroll above a bit and find Variants. Now add size and color variants from here!
This should be added those color by default you selected from color metafield. However, you can add/remove colors from here as well.
When everything is done, click on save.
Step 5:
Now we need to go for theme customization. Here I’ll show you for Dawn theme customization.
Now from your theme dashboard, go to Sales channels > Online store > Themes
Now select a theme you want to customize, then click on customize button. It’ll open a theme customizer.
Step 6:
Now go to product template.
Step 7:
Now click on variants block to customize.
Now click on dynamic source icon, then color.
Finally, on the right side you’ll see the changes-
Now click on save to make the changes!
So that’s all you need to do this for enable your color swatch in your shopify theme.