Product Swatch

Shopify Dawn Image / Color Swatches - Shopify 2.0 themes

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

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.

Why Use Color Swatches in Shopify Dawn? Color swatches convert the traditional dropdown menu for product variants into a more visually engaging and user-friendly format. This not only improves the user experience but also provides a clearer view of the available product options.

Benefits of Adding Color Swatches:

  • Enhanced Visual Appeal: Provides a more attractive and engaging way to display variants.
  • Improved User Experience: Makes it easier for customers to view and select product options.
  • Better Product Display on Collection Pages: Shows potential customers the variety of options available right from 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.

If you have product-variant-picker.liquid file under the Snippet folder, follow the instructions below:

2. 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:

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.

 

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. 

1. 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.

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. 

Dawn color swatches code 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. 

Dawn color swatches to card_product or product_card

 

That's it (",)

Copied!
Back to blog

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.

Made4Uo

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,

Jun Hwang

Leave a comment