How do I assign colour variant to product image for that specific colour on dawn theme 15.0 - code

[Skye25]

Hi,

Just wondered if anyone can help me out as I am struggling to find a way to edit the code on my dawn theme 15.0 so that the different colour variants are assigned to different product images, so that if the customer clicks on the orange colour, the orange product will appear on screen instead.

Thanks and please help me out !

Kind regards,

Skye

[beauxbreaux]

I did figure out how to do this. Tomorrow I will dig through an old dawn theme to see what was set up. I know it was both meta fields and a little code. Essentially, it checks to see if the variant exists, if it does it then checks to see if it is an image or a color. Then if it is an image it displays the image and if it was a color it displays the color. Each of these variant colors that you click will then display the variant associated with the color chosen. I also changed the styling of the variant shape to a circle instead of the pill shape. It has been a while sense I looked at this code. I will probably just download a fresh Dawn them and compare the code on my test Dawn where I made these changes. If no one is able to help you out in the meantime, I can absolutely look into this tomorrow when I have a little more time.

[Shadab_dev]

@Skye25 great feature this but will need some customization. But if you wanna go the no code way, all you have to do is add featured images for all your variants in the product admin.

Then inside the customizer of your product template check the box to which the arrow points in the image below. This will show the particular image of the selected variant. Only limitation with this method is that you wont be able to show extra images for a particular color. This will show only the large image.

If this helps your case in any way please do like and accept it as a solution. Also if you need better customization or any related queries feel free to reach out at

Email ME
Buy Me A Coffee, If you feel i deserve it. Will be a motivating factor.

Thanks anyways.

[Skye25]

Hi @beauxbreaux first of all thanks so much for coming back to me on my question, really appreciate it!

Okay, so just to confirm - if I redownload a fresh dawn theme then the problem of assigning a colour to the product image will work then? I can try this.

Thanks and let me know.

[Skye25]

And if I had assigned the different variant colours to a product image in the product section, I was able to select the colour variant and it will be assigned to the correct product image, however there is a problem - all my product images for that one product is strangely not allowed to be displayed.

So it’s either one or the either. So that’s why I’m trying to find a way to code it, so that works for me.

Thanks for your input though!

[Shadab_dev]

@Skye25 See you cannot add more than one image for a single variant. So for like a tshirt of size small and color red you can add 1 image as is shown in the image below

But here in the media section inside the product admin you have all the images shown for all the variants.

So do you want a feature where suppose you select a white shoe so all the available white shoes are shown, if you choose red all shoes of red color to be shown in the products. Let me know if i am getting this right? for example

[Skye25]

Hi @Shadab_dev ,

Thanks I know that you cannot add more than one image to one variant of the product. But I have an issue:

When I add all the product images in the media section below and when I also add just one product image for different colour variants, so that if the customer for example clicks the orange colour on the website for this product, it will be assigned to the orange phone case ..

Here I have added all images in the product admin in the media section

And here I’ve only assigned one image to different colour variants

And because of this, now I have encountered a issue when I do this. I am able to click on the colour variant and it will be automatically be assigned to that orange phone case image for example. But on my website, it doesn’t display all my product images that I have listed in the product admin > media section. In total I should have 15 product images listed on the website but it’s only showing 4 out of 15 product images, before it was just 2 images now it’s 4. Please see below screenshot of what is currently displayed on my website:

But if I click on orange colour variant on the website for example, even though the orange phone case image is not listed with the rest of the images on the website, this will automatically appear if selected.

And I am trying to find a way where I can list all the product images on the website for just one product with all the different colour options ‘silicone phone case’ but also, when the customer clicks on for example orange colour variant on the website, it directs them to the orange phone case. I don’t want any of the images to disappear if the customer selects orange colour, I still want all the product images to stay on the page but if the customer selects orange colour, it carousels them to the orange phone case.

So to give an overview, there’s two things I want the product page on my website for the ‘silicone phone case’ to do:

1. To display all the product images listed in the product admin > media section

2. When the customer selects the colour variant (i.e orange) on the website, the product page for silicone phone case will carousel them to the orange phone case image, without any of the product images listed disappearing from the page.

If it helps I can also give you the product link to my website: https://admin.shopify.com/store/6ef9a2-6a/themes/162216411468/editor?previewPath=%2Fproducts%2Fsilicone-cardholder-case&section=template–21570375418188__main

Thanks and let me know if you need any more clarification on anything else! Thanks for your help by the way really appreciate it!

Skye

[Shadab_dev]

@Skye25 man really appreciate you trying to explain this to me. You definitely wrote a long one here .

I kind of get it and don’t get it at the same time. Let’s get there step by step.

Before I coded for you a feature which gives you all products or product images from media for a single color. So for example all white shoes if white is selected, all block shoes if black is selected. But i believe you don’t want that you want all the images to be shown no matter what color is selected. This is your first requirement.

And secondly you want on selection of variant it will highlight that product.

Let me know if I got it even a little bit.

[Skye25]

@Shadab_dev no worries! Yes, that’s right.

So just to clarify, I want all the product images on the website to be displayed. Also, I want, when the customer selects the orange colour (for instance), the website will move and direct them to the orange phone case without any of the images disappearing from the site.

So that the customer can select and see the orange phone case they have picked in more detail but also I want the website to display all product images for silicone phone case to give the customer an overview of all variations offered. So I don’t want any images disappearing.

Hope that makes sense

Happy to also give a call to you if you like if unsure or we can jump on a quick teams call and I can show you what I mean if unsure.

[Shadab_dev]

@Skye25 things are a bit more clear than before with your clarification. Thank you for that. Let me try on this one with what I have in mind.

We can definitely jump on a call after that.

Thanks

[beauxbreaux]

I think also just showing an example of a website that is doing what you are saying would help. For me this is extremely confusing lol.

The only thing I can think of that you mean is that you want image swatches for each color of the phone. When you click the image swatch, that phone will appear as the featured phone. All of the other images are also displayed (this is a default feature you just need to upload the images to the main section as well as the variant image).

I will show you some pictures of the dawn theme I tried to recreate what I think you mean. Ignore the huge white space - this image is taken with the product page zoomed out so the proportions are a bit off.

[Shadab_dev]

@Skye25 exactly this is default that all the images show up no matter if you are displaying on thumbnails or stacked.

Still will give a look at the site link you provided

[Skye25]

@Shadab_dev That’s wonderful thanks! Please let me know if you need anything else.

@beauxbreaux This is exactly what I mean and I have tried to upload all the images in the product admin (media) section, and have also added the images for the different variants. But when I go back to the website, it doesn’t display all the images I have uploaded in the media section for this product and when I click on the variant (i.e orange) , it will then show me the featured product (ie. orange phone case). Even though you mentioned this is a default feature in the dawn them, it doesn’t work for me for reason.

I want the product page in my website to display all images and when the customer clicks on the variant, it will automatically direct them to the featured product.

I have attached a link to website which I think would be good for reference:

https://auramma.com/collections/avant-basic-iphone-cases/products/linear-wavy?variant=44671777308885

You can see on this website that all the images for this product is displayed and if the customer clicks on the green, it will automatically direct them to the green featured product. But on my website, even though I have uploaded all the product images and have attached a product image for each variant in the product admin (media and variant section), it doesn’t display all my product images.

Thanks both! Please let me know if anything else need clarifying on, happy to explain as many times as I need.

[Shadab_dev]

@Skye25 I am unable to open the product link you provided earlier. And the problem you are facing will need code modifications or customization inside the customizer and for that will need the store access.

If it’s ok you can send me the collaboratior access so that I can request access from you.

And by the way kind of understood what u wanted but the reference site just makes it crystal clear

Thanks

[Skye25]

Hi @Shadab_dev ,

Yes sure! I have just updated my settings so anyone can send me collaborator request now.

Thanks and please let me know if anything else.

[beauxbreaux]

I downloaded a new dawn theme just to see what the default settings are. Most of what I showed you can be done without any code. The part that will require code (as far as I know) is showing the main photo first by default. So I did notice if you use the same photos for your variants and your features photos it ends up just showing you the variants. How I got around the was literally just duplicating the images one labeled for variant images and 1 labeled for the featured photos. Then of course the main photo with a picture of all the products is optional but I like the way it looks showing all the colors.

Here is the steps I followed:

Create a new product (just go ahead and start from scratch to make sure everything is covered)

Add new products to the main section:

Then of course move the Main image into the Main image:

Go to the Category Metafields section and Select color. After selecting color click Add new entry at the bottom:

This is how they should be filled out:

Then just keep doing the same thing for all the rest:

Until it looks something like this:

Next go down to the variants and add photos for the variant. Make sure you upload new photos that have a different name. Something like variant-red just so you can keep an eye on what images are actually showing up. This will give you a better idea for troubleshooting just incase mistakes are made.

Next if you want to show the main photo first the code I edited was the product-media-gallery.liquid. You would want to make a copy of the original dawn theme if you have made any changes to your dawn theme (code wise) that you want to keep. Otherwise, if this is a blank slate it doesn’t really matter that much if you mess up because you can just download a new dawn theme.

This is the code for the media gallery:

{% comment %}
  Renders a product media gallery. Should be used with 'media-gallery.js'
  Also see 'product-media-modal'

  Accepts:
  - product: {Object} Product liquid object
  - variant_images: {Array} Product images associated with a variant
  - is_duplicate: {Boolean} Prevents rendering uneeded elements and duplicate ids for subsequent instances

  Usage:
  {% render 'product-media-gallery', is_duplicate: true %}
{% endcomment %}

{%- liquid
  if section.settings.hide_variants and variant_images.size == product.media.size
    assign single_media_visible = true
  endif

  assign media_count = product.media.size
  if section.settings.hide_variants and media_count > 1 and variant_images.size > 0
    assign media_count = media_count | minus: variant_images.size | plus: 1
  endif

  if media_count == 1 or single_media_visible
    assign single_media_visible_mobile = true
  endif

  if media_count == 0 or single_media_visible_mobile or section.settings.mobile_thumbnails == 'show' or section.settings.mobile_thumbnails == 'columns' and media_count < 3
    assign hide_mobile_slider = true
  endif

  if section.settings.media_size == 'large'
    assign media_width = 0.65
  elsif section.settings.media_size == 'medium'
    assign media_width = 0.55
  elsif section.settings.media_size == 'small'
    assign media_width = 0.45
  endif

  assign id_append = ''
  if is_duplicate
    assign id_append = '-duplicate'
  endif
-%}

[Skye25]

Hi @beauxbreaux ,

Thanks so much for this! I have applied all instructions on my website for this now and now all seems work like I want it and that’s great! really appreciate your help on this

Just I have a small issue with this section below:

Is there a way of displaying the different colour variation in colour pills format instead of small image of phone cases instead like this:

Thanks and look forward to your reply!

[beauxbreaux]

Oh yeah, that is super easy.

-Go back to your product page

-Now under the category metafield section click on the color and it will open up this:

-Just click the clear button and it will replace it with the default color. If for some reason you color is not found because it has a weird name just make sure you have a color selected under the color tab and something selected under base color and leave the image blank and you are set.

[Skye25]

Hi @beauxbreaux ,

That’s perfect thanks!

We got there in the end, thanks so much for your help!

[SMH2020]

Hello! I have been looking all day, I would like the information on how to show only red shirts if you select red and white shirts if you select white. Currently all color images are showing. Everything I have found is for dawn 14.0 or earlier, there is nothing for 15.0 yet. Any help would be appreciated!