Compatibility: Compatible with any version of Dawn and any Shopify 2.0 FREE themes .
Use the variant image as the image swatch for your product. You can either drop down or radio buttons for the variant picker. You can also add this swatches to your product card so first 4 variant images will show in the collection page.
You can check the demo store here. Password: made4uo
What you are buying:
- A swatch with options instructions to change the style. Please make sure to read {% comment %} in code
- Able to use with select or radios variant picker
- Able to add swatch to the collection cards
- Make sure to assign the color option as first option for this to work
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.
To start:
1. Go to Online Store > Themes > Actions > Edit Code.
2. Open the main-product.liquid file under the Section folder and find the code below.
3. We need to replace the code between the code in Step 2 and the code below, with the code in Step 4.
4. If you have a name "Color" other than "Color", you have to change the option_name. Note: It is case sensitive. You can also change the size of the swatch by change the swatchSize variable.
5. Showing pictures of the variant color will not be enough, we have to provide the name of the color variant they are choosing. Therefore, we need the script below. Go to global.js under the Asset folder and add the code below.
If you want to show the swatch to a product card then proceed with the following steps.
6. Open the card-product.liquid under the Snippet folder. Then find the "card-information". There are two of them, make sure it is the first one. Paste the code below before the "card-information. Click enter to start a new line. See the image below for placement.
Note: Dawn theme has a lot of edits, some old version of Dawn they call the product using "product_card", the latest version, which I use in this tutorial, uses "card_product."
Depending on your Dawn version, you have to change the some of the code in Step 6. To see if you have product_card or card_product, you can check it on the card_product.liquid. See image below.
If you do not have card_product, you can change the code by simply have to click Ctrl + F, and find "card_product", and change it to product_card.
That's it (",)