Compatibility: Dawn theme and any Shopify 2.0 FREE themes .
Most of the Shopify store owners are paying for a color swatch app. No need to do that anymore. Stop the monthly payment by following the steps below.
Are you tired of shelling out money for a color swatch app for your Shopify Dawn store? You're not alone. Many store owners have been in the same boat, searching for a cost-effective solution to add color swatches and images to their product listings. Luckily, you can now break free from those monthly payments and take control of your product presentation with our step-by-step guide.
Why Pay When You Can DIY?
Before we dive into the steps, you might wonder why you should bother with DIY solutions. Well, it's simple. Most of the color swatch apps available in the Shopify app store come with recurring monthly fees that can add up over time. By implementing your own color swatch and image solution, you can save those precious dollars for other aspects of your business.
NOTE: There are several ways to enter color swatches; it can be entered using metafields, but I don't find it convenient entering product color for each product. That is why I wrote this code. The code will also accept not only color but images as well. Multiple designs available, see images below.
Our solution goes beyond just adding color swatches; it allows you to incorporate images, providing your customers with a comprehensive view of your product variations. Whether you sell clothing, accessories, or any other items where color and design matter, this solution will elevate your Shopify Dawn store to the next level.
With this DIY Dawn color swatch and image solution, you can:
- Save money by eliminating monthly app fees.
- Provide a visually appealing and interactive shopping experience.
- Showcase your product variations effectively.
- Customize the swatch shapes, sizes, and styles to match your brand.
To start:
- Go to your Online store > Themes > Actions > Edit code
- Go to Snippet folder and create a snippet, we will name it "color-swatch".
- Open the newly created snippet and paste the code below. Click SAVE
4. We have to go to the Section folder and duplicate the main-product.liquid by creating a section and name it, "product-color". Copy/paste the code from the main-product.liquid to newly created product-color.liquid.
5. Next, we will duplicate the product.json under the Template folder. Create a product template, json format, and name it, "swatch-template." Open the both the product template and copy/paste the code from the product.json to product.swatch-template.json.
6. We need to change the main-product section to product-color, as what we name our new product section.
7. Go back to the product-color.liquid under the Section folder. In the Section folder. Find and open the main-product.liquid.
Find the code {%- when 'variant_picker' -%}. Delete the code between the 'variant_picker' code and the {%- when 'buy_buttons' -%}. Then paste the code below. Click SAVE
8. Go to Config folder and open the settings_schema.json and paste the code before the last bracket, ']'.
9. Go to the admin view. NOTE: Your theme has to be the 'live theme' before you can see the newly created template. Click the Products below the Orders and change the theme template under the online store at the bottom right.
NOTE: Use Color Hex only. Recommended image size: 200px x 200px.
If you want to have this apply to all of your products, skip steps 5, 6, and 7, then instead of opening the newly created section, you open main-product.liquid.
You are done. All left to do is upload your images, enter your color in the theme editor and images. Make sure your image names are in lower case. See the video on how to do this.
If you have questions, you can reach me at "chat with us".
5 comments
Any chance you could update this code with the templates updates?
Variants are now used by rendering product-variant-picker and product-variant-option. I managed to adapt your code but the “disabled” state doesn’t work anymore. “Checked” are fine.
Thank you!
Kindly,
Audrey L.
Hi @Amanda,
In the new Shopify editor, the shift + tab does not work anymore
Hi @Igor Leshchencko,
Thank you (",)
Hi @Michelle,
The code works as it should. Please make sure you follow the instructions
Hi
The Shift+Tab is not working for me so the code remains the same when copied
thank you for your big work!
Hi there, the code doesn’t seem to work. Are you able to update this? :) thanks!