How to display specific variant images in Impact theme?

[vishwa312]

Hello,

I am using Impact theme for my store. I have different images for all colors and sizes variants. I want when user click on brown and 11*7 size it will show only that size and color images .I tried many thing but nothing works for me. I have 4 different images for each size and color.

My sore link: https://storageshedshop.com/products/11-ft-x-7-ft-wood-plastic-composite-heavy-duty-storage-shed-pen...

[Sweet_Savior_3]

Hello @vishwa312 

Welcome to Shopify Community.

Firstly kindly please check your theme features, as some theme already have this feature.  

If your theme doesn't have this feature, than it can be set via image alts. Here's an example: https://orendashop.ch/products/viking-necklace

But this needs to be hard coded in the theme using theme's default code. Thus I would recommend you to seek help from a developer at reasonable cost to set this up in your store. 

Let me know if I can be helpful in anyways.

Thanks

[vishwa312]

Thank you. In my theme alt text is working but the thing is it's only work for color variant but I want same thing for both color and size variant it is  impossible for both variants using alt text? 

[Sweet_Savior_3]

Hello 

It is not impossible, but no theme give this facility to group image with two variant option, but here alt can be designed in such way that it uses both the selected variant options, this will need tweaks with Liquid and JS both.

[vishwa312]

Ohk. Thank you. 
I have another issue if you can help. I want buttons in one line I have total six button but when I give CSS to second line buttons it goes up on first line I want 3 button in one line and another 3 in second line. I tried some css but it's not working.
you can see here my store: https://storageshedshop.com/products/11-ft-x-7-ft-wood-plastic-composite-heavy-duty-storage-shed-pen...

[Sweet_Savior_3]

Which buttons are you talking about ? Please give a screenshot.

[vishwa312]

sure. 

 when I try to give css for size 3 button inline it goes up with color buttons.
My store link:https://storageshedshop.com/products/11-ft-x-7-ft-wood-plastic-composite-heavy-duty-storage-shed-pen... 

[Sweet_Savior_3]

This is what I see on my end:

I think you are working in a preview theme. Please share the URL.

[vishwa312]

Yes I am working on preview theme.
check this: https://storageshedshop.com/?_ab=0&_fd=0&_sc=1

go to proform collection and then go to any product 

[Sweet_Savior_3]

Hello But again this is not the preview theme URL. You can paste the URL from here >> 

[vishwa312]

sorry.

check now: https://storageshedshop.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=167070695713

[Sweet_Savior_3]

Thanks

Can you please wrap the all the color buttons in one div and all the size elements inside one div

This will solve the issue.

[vishwa312]

Thank you. I tried this but when I give common div class but it's take separately for all the buttons not able to give common div for all the buttons. Can you please tell me how do I give common class for all three buttons.
liquid code for color button:

{%- when 'button' -%}

{%- if block.settings.text != blank -%}
<div class="colors">
<div class="product-info__button" {{ block.shopify_attributes }}>

{%- render 'button', content: block.settings.text, href: block.settings.link, size: block.settings.size, style: block.settings.style, stretch: block.settings.stretch, background: block.settings.background, text_color: block.settings.text_color -%}

</div>
</div>
{%- endif -%}

 preview link: https://storageshedshop.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=167070695713

[Sweet_Savior_3]

is it possible to provide the code editor access ? I will directly make the change in the code.

[vishwa312]

I don't know how to give you code editor access. Is it possible if I can share product page file?

[Sweet_Savior_3]

But I will have to check the setup. 

You can send the site URL and collaborator code to the inbox mentioned in the signature.

[farid-movsumov]

Hi @vishwa312 I hope you already solved this problem for your shop. I would like to share the solution for people coming from search. 

We have built Rubik app to solve the problem of displaying only images of selected variants even if you use multiple options like color and size and need to attach images to each combination of these selections. I also recorded video and explained how it works. With this solution you don't have to touch alt_text of images which should be used for SEO purposes only. 

[Hey_Jak]

Here is a free guide to understand the concept, show only selected variant images