select variant by clicking the image

Automatic Select Variant Option Using Product Images

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.

Please note that the code may not be compatible with any currently installed apps.

Compatibility: Dawn 2.5 version and above, and any Shopify 2.0 FREE themes

Looking to add an extra level of interactivity to your product pages? With a variant select feature that uses thumbnail images, you can give your customers a unique browsing experience - and the good news is, it's not as complicated as it may seem!

While there are plenty of video tutorials available online, they often don't work with newer Shopify themes like Dawn 5.0. And while some may suggest downloading an external app, that's not always necessary either. With a simple code snippet, you can implement the thumbnail image variant select feature yourself.

In addition to the basic functionality, I've added a feature that allows for the selection of multiple variant images using the image alt feature. While assigning alt tags to multiple images can be time-consuming, it's a straightforward process if you already have a CSV file for your product.

Please note that this feature won't work with apps that change the product options. Additionally, for products with several options, always make sure to put the variant to select first in the variant selection. This will make it easier for the code to respond to the selected image, especially since an image can be used several times in the options. Before you begin, make sure to uncheck the "Hide other variants' media after selecting a variant" option in your theme editor, and use either the "thumbnail carousel" or "thumbnails" option. Additionally, make sure to assign an image to every variant option and use the image alt tag. If you're already using image alt tags for SEO purposes, contact us to discuss other options.

To see the feature in action, check out our demo product with the password "Made4uo." 

So, what are you waiting for? Enhance your product pages today with this engaging and interactive variant select feature using thumbnail images!

What you are buying:

  • Select the product option using multiple thumbnail images
  • Works with either dropdown or radio buttons variant picker
  • Updates the product information, eg. price
  • We need to use the image ALT 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. 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. 

 mediaToSwitch.querySelector('button').addEventListener('click', this.setActiveMedia.bind(this, mediaToSwitch.dataset.target, false));  

Then insert the code below it. Please refer to the image for placement

<

 

3. Let's start in a new line, then add the code below, after the closing curly bracket. Please refer to the image for placement. Then click SAVE.

<

Code Placement:

code placement

 

4. Next, we need to add the code in the media-gallery. Please check which version of Dawn do you have.

For Dawn below 8.0 version, 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.

For Dawn above 8.0 version, open the product-media-gallery.liquid under the Snippet folder, add the code below after the ">", please refer to image below

media gallery

<

Continue below if you want multiple image connected to the variant option. Otherwise, just SAVE the main-product.liquid or product-media-gallery.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 image for placement. Click SAVE.

<

 

For Dawn below 8.0 version, you have to open the main-product.liquid under the Asset folder:

multiple-image

 

For Dawn below 8.0 version, you have to open the product-media-gallery.liquid

media gallery multiple images

 

6. 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 the same with the variant option. Please check the image for more information. Make sure to click SAVE.

Image alt insertion

 

Step 3 will open the window below. Add the image alt the same as the option. E.g. Option is "White", add a media alt "White." This is case sensitive. 

Image alt text

 

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

That's it (",)

 

Copied!
Voltar para o blogue

2 comentários

Hi @Jasmin,

I understand your concern. I hope you read the use of alt tag explained in this page prior to purchase (images provided as well). Unfortunately, to keep the code still a non-developer friendly, we need to utilize the alt tag to call from the backend. We can however add some code to show different tag for image and different tag for SEO. Another way is to upload the images as a variant metafield but this will require more work. You can contact me for this issue using Chat with us.

Made4Uo

Hey there, I purchased your code snippet and it is great in it’s own right! However, my concern is that it is using alt tag which should be reserved for SEO. Do you have a code snippet that uses that image linked to the variant?

Thanks in advance

Jasmin

Deixe um comentário