Multiple Images for separate Material and Color Variants Dawn 15.0.0

Multiple Images for separate Material and Color Variants Dawn 15.0.0

mazenm
Tourist
7 0 2

Hey everyone,

I have a sandal product that I have available in 3 colors and 2 materials. So I should have 6 different variations of the same product, but I can only add one main image for each. All the tutorials I have found so far only help in the cases of one type of variant, which is usually color, but if I need to have a variant of one color that has two materials, then none of the solutions work. I asked gpt, but I couldn't find the code in the files that needed to be replaced. 

 

I need the code to use the alt text or file name to assign the photos to the right variant in this format:

alt text in the following format: Gender Product_Type SKU Material Color Position

Replies 5 (5)

Shadab_dev
Shopify Partner
1396 72 151

Please share your url and also explain may be with a visual representation of what you are looking for just for a better understanding.

 

Best

Shadab

Buy me Coffee, if you feel i was helpful. Email Me here or WhatsApp me with this link for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
mazenm
Tourist
7 0 2

https://trefir.com/en/products/dr-klompa-womens-comfort-sabo-154556?variant=41616691920944

 

Here is a link with an example, I removed the previous code I had that only worked with multiple images of each color. Basically, the material and color variants are separate objects that each have multiple instances that are related to each other. I want to also add that sometimes I might have a black slipper in leather and faux leather, but that same slipper in brown is only available in faux leather. This edge case doesn't need to have a solution, since I think I know how to fix it be default, but if there is a solution that takes this edge case into account as well, then great. Thank you!

Screenshot 2025-01-18 at 12.29.26 PM.png

Shadab_dev
Shopify Partner
1396 72 151

From what i understood the default behaviour seems pretty much the solution that you set the availability of the brown slipper in leather to be 0 which will make it available or we can probably add code that when the slipper is brown we can remove the leather option altogether or just disable it

Buy me Coffee, if you feel i was helpful. Email Me here or WhatsApp me with this link for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
mazenm
Tourist
7 0 2

The default behavior can let me pick a photo to show, but not disable the button and that also is only an edge case and not the main issue, which is showing multiple images for each variant, when there is two variant categories

mazenm
Tourist
7 0 2

I fixed it with my own code, but if anyone else runs into the problem. Basically I followed this video and then modified the code to take a second variant separately and just check for both the right color and material and show the images that fit both criteria

 

https://www.youtube.com/watch?v=i4DPKJ-zJgY&t=212s