Hi,
I am trying to create a variant that displays multiple image swatches for a specific product on my prestige theme, but it just shows as a white icon when I have uploaded the image. Any ideas how to resolve this?
Hi @isSalon ,
Could you kindly provide us with your store URL and, if applicable, the password, so that our team can offer you the necessary support?
Could you share which product you’re creating the swatches for but having the issue?
Here are the steps you can follow:
1, Navigate to Online Store > Themes > Edit Code.
2, Locate and open the base.css (or theme.css, custom.css) file.
3, Paste the code snippet provided below at the bottom of the file, then save your changes.
.ColorSwatchList li:nth-child(1) .ColorSwatch {
background: url("https://www.issalonvancouver.com/cdn/shop/files/White_Blonde_80_633f1ee7-618f-476c-b20b-732c59272ed1_grande_jpg_400x.webp?v=1709500236");
}
.ColorSwatchList li:nth-child(2) .ColorSwatch {
background: url("https://www.issalonvancouver.com/cdn/shop/files/AshBlonde_60Natural_grande_jpg_400x.webp?v=1721953980");
}
.ColorSwatchList li:nth-child(3) .ColorSwatch {
background: url("https://www.issalonvancouver.com/cdn/shop/files/BeigeBlonde_90Natural_79d6ffaf-a2de-41b7-a882-ab3aea73875f_grande_jpg_400x.webp?v=1721953991");
}
.ColorSwatchList li:nth-child(4) .ColorSwatch {
background: url("https://www.issalonvancouver.com/cdn/shop/files/DirtyBlonde_18Natural_3e231b20-4a3b-4ccd-89d3-89c0e336fae1_grande_jpg_400x.webp?v=1721953999");
}
You can get the image URL for each variant by right-clicking on the corresponding image > Copy image address
Here is the result
We hope this assists in resolving the issue.
If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!
It got it to work – but where do I edit them? I need to add about 60+ more.
How can I remove the space between the icons?
You can remove the space between the images by adding this code snippet
.ColorSwatchList .HorizontalList__Item {
/* You can adjust this value according to your preference */
margin: 5px;
}
Here is the result
Can I make the swatch boxes bigger?
so in order to add more I just need to copy and paste the file into the theme in order of the names of the searches to match?
You can make the swatch boxes bigger by adding this code snippet
.ColorSwatchList .ColorSwatch {
/* You can adjust this value according to your preference */
width: 50px;
height: 50px;
}
Here is the result
And yeah, you’re right. To add more, you just need to copy and paste the code with the corresponding image URL and order number. It’s quite boring, but it gets the job done 
.
1 Like
Super Helpful! Thank you!
The only problem is – I now get the error message that I cant add more than 100 variants. Is there a way I can have it so the customer selects the size and the colour instead of have multiple products with no size option?
I have 54 colour options, and 5 size options.
- is there a way to remove the dots under the photo carousel?
Hi @isSalon ,
You can remove the dots under the photo carousel with this code
.Product__SlideshowMobileNav .flickity-page-dots {
display: none;
}
/* If you want to hide the arrows as well, please uncomment this code */
/* .Product__SlideshowMobileNav {
display: none;
} */
Here is the result
Regarding the limitation of having more than 100 variants, consider splitting this product into multiple products. For instance, you might create a separate product for each size. Alternatively, you could explore third-party applications that manage variant data in a separate database, which could help accommodate your needs.
We hope this assists in resolving the issue.
If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!
I added a new product with different swatches – but the swatch example doesnt reflect the new colour, but when its clicked it shows the correct one. How would I go about fixing this? Do I just continue to add to that same original code in theme.css?
-
Is there a way I can add likes (buttons) in the size section (below shipping line) that will link to the other product page?
-
How can I customize the text of Size and Color?
Hi @isSalon 
In case you need to display multiple image swatches reliably and exactly as intended, you can use a product options app like Easify Product Options. The app allows you to create image swatch options and upload images directly for each value, so it doesn’t rely on the theme’s swatch logic.
I’ve created a similar demo to help you better visualize how it works:
- This is the result:
- This is the app setting:
You simply need to create an Image Swatch option, add the corresponding values, and assign an image to each one. This ensures the swatches display correctly on the product page without showing blank icons and without requiring complex configuration.
The app is designed with a user-friendly and intuitive interface, so you can set everything up in just a few minutes without any coding or technical work. In addition, you can flexibly customize the display to match your store’s design. If you need any help during setup, the support team is responsive and always ready to assist you in getting everything running smoothly.
{% for variant in product.variants %}
<div class="swatch-item {% if variant == product.selected_or_first_available_variant %}active{% endif %}"
data-variant-id="{{ variant.id }}"
style="
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
border: 2px solid transparent;
display: inline-block;
margin: 4px;
">
{% if variant.image %}
<img
src="{{ variant.image | image_url: width: 100 }}"
alt="{{ variant.title }}"
style="width: 100%; height: 100%; object-fit: cover;"
/>
{% endif %}
</div>
{% endfor %} add css .swatch-item {
transition: border-color 0.2s;
}
.swatch-item:hover,
.swatch-item.active {
border-color: #000 !important;
}document.querySelectorAll('.swatch-item').forEach(function(swatch) {
swatch.addEventListener('click', function() {
document.querySelectorAll('.swatch-item').forEach(s => s.classList.remove('active'));
this.classList.add('active');
const variantId = this.dataset.variantId;
const variantSelect = document.querySelector('select[name="id"]');
if (variantSelect) {
variantSelect.value = variantId;
variantSelect.dispatchEvent(new Event('change'));
}
const url = new URL(window.location.href);
url.searchParams.set('variant', variantId);
window.history.replaceState({}, '', url);
});
}); add the variant images in admin and add this code it will work for all products
Hi @isSalon,
I hope you are doing well. If you are open to trying a third-party app, you can try the Inkybay – Product Personalizer app to show multiple image swatches for a single product on the product page.
With Inkybay’s Product Option feature, you can create multiple swatch options and show them as an image swatch or a color swatch. You can show the option as a radio/swatch/dropdown. You can also add extra pricing for your options. All customer selections are automatically saved with the order, so you receive everything clearly in the order file.
Inkybay also lets you add other advanced options such as text fields, file upload options, and custom free size/ preset size.
The best part is that no coding is required, and a simple setup. It offers a free 21-day trial so you can explore it and see how it works for your product.