How to Select Variant Option By Clicking The Image for Dawn and Shopify 2.0 FREE themes

How to Select Variant Option By Clicking The Image for Dawn and Shopify 2.0 FREE themes

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: Dawn 2.5 version and above, and any Shopify 2.0 FREE themes

Someone asked to do a variant select using the thumbnail images. There are lot of video tutorials available but none of them work with Dawn theme or in Shopify 2.0 themes. The answer is not always an APP either. This can be done with a simple snippet code. I also added an option that will select the option using multiple variant images. I used the image alt to do the job. It is tedious work to assign alt to multiple images, but if you already have a CSV file for the product, this can easily be done.

Features:

- Select with multiple images

- Works with either dropdown or radio buttons variant picker

- Accepts both variant option name 'color' or 'colour' (Capitalized or uncapitalized)

Check this demo product. Password: Made4uo

To start:

1. We need to go to our Admins store and open the code editor. Click Online store > Themes > Actions > Edit code.

2. We need to open the Asset folder and look for media-gallery.js. If you don't have this file, this code will not work for you. Open the media-galley.js and find the code below. 

setActiveMedia(mediaId, prepend)

 

3. Let's start in a new line, then add the code below. Then click SAVE.

 this.optionsJSON = this.productJSON || JSON.parse(this.querySelector('#productOptions').textContent);
this.variantsJSON = this.variantsJSON || JSON.parse(this.querySelector('#productVariants').textContent);
const variantSelect = this.parentNode.nextElementSibling.querySelector('variant-selects');
const variantRadios = this.parentNode.nextElementSibling.querySelector('variant-radios');
const activeMediaId = mediaId.split('__main-')[1];

let variantPosition;
const colorOption = this.optionsJSON.find(element => {
if(element.name.includes('color' || 'colour')) {
variantPosition = element.position - 1;
}
})

if(this.hasAttribute('multiple-images')) {
const activeMediaAlt = activeMedia.querySelector('img').alt;

if(variantSelect){
variantSelect.querySelectorAll('option').forEach(option => {
if(activeMediaAlt == option.value) {
option.selected = true;
}
})
} else {
variantRadios.querySelectorAll('input').forEach(option => {
if(activeMediaAlt == option.value) {
option.checked = true;
}
})
}
}else{
this.variantsJSON.forEach(data => {
const dataId = data.featured_media.id;
if(activeMediaId == dataId) {
if(variantSelect){
variantSelect.querySelectorAll('option').forEach(option => {
if(data.options[variantPosition] == option.value) {
option.selected = true;
}
})
} else {
variantRadios.querySelectorAll('input').forEach(option => {
if(data.options[variantPosition] == option.value) {
option.checked = true;
}
})
}
}
})
}

 

4. Next, we need to open the Section folder and open the main-product.liquid. Inside the file, search for "<media-gallery." Below the media-gallery, add the code below.

<script id="productOptions" type="application/json">
{{ product.options_with_values | json }}
</script>
<script id="productVariants" type="application/json">
{{ product.variants | json }}
</script>

 

Continue below if you want multiple image connected to the variant option. Otherwise, just SAVE the main-product.liquid and that is it. 

5. If you have multiple images in a variant option, you need to add the code below next to the "<media-gallery." Please check the video for placement. Click SAVE.

multiple-image

 

6. This is only if you have multiple images associated to the variant option. Go to your Admin screen and click "Products", click the product, then under the Media section. Click on the images and assign the media alt. Please check the video for more information. Make sure to click SAVE.

NOTE: If you don't assign a media alt, this image will not be use to select the variant option. 

That's it (",)

Copied!
Back to blog

Leave a comment