How to add image swatches on Dawn theme product page?

[EdgarPateno]

Hi,

We are using the Dawn theme.

We want to have IMAGE SWATCHES on the product page like this photo below.  

Please help.

Take care

[Jenny-Arena]

Hi Edgarpateno,

It would be my pleasure to help you. Please share your site URL, I will figure out your problem and help you with the best solution here.

[PageFly-Victor · Accepted solution]

Hi @EdgarPateno

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

you need to change the display structure of the variant.

You can check out my method

- first, need to insert the image with the following code

  you go to theme => edit => main-product.liquid . then search for the keyword "variant-radios" and then you will see the structure as shown in the image. you need to replace the old code with {%comment%}old code{%endcomment%}. then paste the new code in

 <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">

         {% for variant in product.variants %}   

                  % if variant.title== value %}

                       <img name={{ value }} src='  {{ variant.image | image_url: width: 40  }}  '/>

                  {% endif %}

         {%- endfor -%}

</label>

- the next step you access the file base.css and paste this code at the end of the file

variant-radios label{

  border:none !important;

  background:transparent !important;

  border-radius:0 !important

}

.product-form__input input[type="radio"]:checked + label{

  border:solid 2px black !important

}

Best Regards;

Pagefly

[EdgarPateno]

@PageFly-Victor, THANK YOU SO MUCH FOR THIS SOLUTION.

Take care 

[PageFly-Victor]

I glad when can help you 😍

[Therijo]

Hey @PageFly-Victor , 

Thanks for this, it helped me too! The only problem I'm having with this is that when clicking a swatch, the page wants to center/align the image with the selection box border and it ends up moving/shaking the rest of the images in that row, as well as the content (text, buttons, etc.) on that side of the page.

Is there a way to force the swatches to be static while clicking through selections so that they don't move or shake the rest of the content when changing from one swatch to another?

[PageFly-Victor]

Can you share URL and password and I will check it , after I will give you code to fix it

[PageFly-Victor]

Hi @Therijo

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

-Go to Online Store->Theme->Edit code

-Asset-> base.css  paste the below code at the bottom of the file.

#ProductInfo-template--14972541829163__main .product-form__input input[type=radio]+label{border:none !important}

.product-form__input input[type=radio]:checked+label:before{

border: solid 2px black!important

}

.product-form__input input[type=radio]+label:before{border-radius:0 !important}

Best Regards;

PageFly

[sdsahil]

Hi,

Does this method still works for dawn 7.0.1? this is the result I got:

[nicko170]

This only works if you have Color as the only variation - if you want to have say Color and Size, the code is a little different - but it can still work - even thought it doesn't look very pretty.

Try this:

<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
  {% if option.name == 'Color' %}
      {% assign found = false %}
      {% for variant in product.variants %}
          {% for opt in variant.options %}
              {% if opt == value %}
                  {% if found == false and variant.featured_image %}
                      <img src="{{ variant.featured_image | image_url: width: 40 }}"
                           alt="{{ value }}" loading="lazy" width="40" height="40">
                      {% assign found = true %}
                  {% endif %}
              {% endif %}
          {% endfor %}
    {% endfor %}
  {% else %}
      {{ value | escape }}
  {% endif %}
</label>

 

Found some bugs, but the code updated above now.

You'll also want to add this CSS to base.css.

.product-form__input input[type='radio']:checked + label {
  color: rgb(var(--color-foreground))!important;
}

[MrPAtul]

Sir, can you please provide me the solution for the same problem for Dawn 12.0 theme! 

[MRamzan]

I have done this by following this video. Without App you can add swatches into your store.

[MRamzan]

I have solved it without using any App.

Here is the video which you can follow: