Compatibility: Compatible with any version of Dawn and any Shopify 2.0 FREE themes .
In the visually-driven world of online retail, presentation is everything. For Shopify store owners using the Dawn theme, color swatches offer a dynamic way to showcase product variations. This blog will guide you through adding Dawn color swatches to your store, enhancing both product and collection pages with a more interactive and visually appealing display.
You can check the demo store here. Password: made4uo
What is Variant Image Color Swatches?
Variant image color swatches are visual representations of the different color options available for a product. Instead of a dropdown menu or text labels, customers see small colored squares (or circles) that correspond to each variant's color. Clicking on a swatch changes the displayed product image to the image associated with that color variant.
Why Use Variant Image Color Swatches?
- Improved User Experience: Color swatches provide a more visually appealing and intuitive way to select product variants, especially colors. They are much easier to understand at a glance than text-based options.
- Increased Conversions: A better user experience can lead to increased conversions. Customers can quickly see the available colors and make their selection without any confusion.
- Reduced Cognitive Load: Visual cues are processed more quickly than text, reducing the cognitive load on the customer and making the selection process more efficient.
- Enhanced Product Presentation: Color swatches make your product pages look more professional and visually engaging.
- Better Mobile Experience: Color swatches are particularly useful on mobile devices, where screen space is limited.
Additional Considerations:
- Color Representation: Ensure the color swatches accurately represent the actual product colors. Hex codes are generally preferred for defining colors.
- Image Association: Correctly link each color swatch to the corresponding variant image. This is crucial for the functionality to work.
- Swatch Size and Shape: Choose an appropriate size and shape for the color swatches. They should be large enough to be easily visible but not so large that they overwhelm the design.
- Mobile Responsiveness: Ensure the color swatches look good and function correctly on mobile devices.
- Accessibility: Use ARIA attributes to make the color swatches accessible to screen readers. Provide alternative text for the swatches.
- Fallback: If a variant doesn't have an associated image, consider having a placeholder or default image display.
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.
Steps on how to add Variant Image Color Swatches?
Step #1. Open your code editor
From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code
If you have product-variant-picker.liquid file under the Snippet folder, follow the instructions below:
Step #2. Snippet Folder
Go to the Snippet folder instead and open the "product-variant-picker.liquid" file. Replace the code with the code below.
NOTE: Please see the option names in the code, if your option name for color is not "Color", "Style", or "Colour", please add the name with a comma in between in the code. It is case sensitive. You can also change the size of the swatch by change the swatchSize variable.
If you DO NOT have product-variant-picker.liquid file under the Snippet folder, follow the instructions below:
Step #2. main-product.liquid file
Open the main-product.liquid file under the Section folder and find the code below.
Step #3.
We need to replace the code between the code in Step 2 and the code below, with the code in Step 4.
NOTE: If you have a name "Color" other than "Color", "Style", or "Colour", you have to change the option_name. It is case sensitive. You can also change the size of the swatch by change the swatchSize variable.
Resume the instructions here depending on which theme version you have.
Step #1. Resume
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.
Step #1. 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.
Last Step. Save the changes
Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.
Conclusion
Implementing variant image color swatches in your Shopify store, particularly within the Dawn theme, offers a significant improvement to the user experience, especially for products where color is a key purchasing factor. By replacing text-based variant selection with visually appealing color representations, you streamline the browsing process, reduce cognitive load, and ultimately encourage conversions. While the implementation may require some coding knowledge and attention to detail, the benefits of a more intuitive and engaging product presentation make it a worthwhile investment. Remember to consider the additional points discussed to ensure your color swatches are accurate, accessible, and responsive, contributing to a more professional and user-friendly online store.
That's it (",)
Copied!
2 comments
Hi @Jun Hwang,
Thank you for the purchase. We cannot replicate the issue. We also check the view in apple device. Please contact us using the “Chat with us” for faster reply.
Hi,
I just bought the variant image code and it works perfect.
The only problem I’m having right now is that mobile and small screen is ok but when the screen expands or view from desktop, the image height decreases and I’m seeing an white spaces top and bottom of the image variant.
Can you please let me know what could possibly trigger this error
Thank you,