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
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.
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
{% for variant in product.variants %}
% if variant.title== value %}
<img name={{ value }} src=’ {{ variant.image | image_url: width: 40 }} '/>
{% endif %}
{%- endfor -%}
- 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
3 Likes
@PageFly-Victor , THANK YOU SO MUCH FOR THIS SOLUTION.
Take care
I glad when can help you 
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?
Can you share URL and password and I will check it , after I will give you code to fix it
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
1 Like
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:
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;
}
2 Likes
Sir, can you please provide me the solution for the same problem for Dawn 12.0 theme!
1 Like
I have done this by following this video. Without App you can add swatches into your store.
I have solved it without using any App.
Here is the video which you can follow:
Hi @EdgarPateno 
If you’d like to display image swatches (small images for each color) directly on the product page like in your example, Easify Product Options can fully achieve this without requiring any modifications to the Dawn theme code.
I’ve created a similar demo to help you better visualize how it works:
- This is the result:
- This is the app setting:
First, simply create a “Color” option in the app and add values such as Orange, Green, and Blue. For each value, upload a corresponding image (e.g., an orange tent, green tent, blue tent). As a result, the colors will be displayed on the product page as image swatches, just as you expect.
When customers click on each image, the corresponding Color option will be selected and the chosen value will be displayed (e.g., “Choose your color: Orange”). This approach provides a more visual and intuitive experience compared to the default dropdown.
The app is designed to be user-friendly and easy to navigate, so you can set it up quickly without any technical knowledge. If you need any assistance during the configuration process, the support team is always available to help you achieve your desired setup.