How to display specific variant images in Impact theme?

vishwa312
Tourist
27 0 2

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...

 

Replies 15 (15)

Sweet_Savior_3
Shopify Partner
1158 94 112

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

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
vishwa312
Tourist
27 0 2

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
Shopify Partner
1158 94 112

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.

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
vishwa312
Tourist
27 0 2

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
Shopify Partner
1158 94 112

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

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
vishwa312
Tourist
27 0 2

sure. 

buttons.JPG

 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
Shopify Partner
1158 94 112

This is what I see on my end:

Sweet_Savior_3_0-1712767902957.png

 

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

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
vishwa312
Tourist
27 0 2

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
Shopify Partner
1158 94 112

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

Sweet_Savior_3_0-1712769581934.png

 

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
Sweet_Savior_3
Shopify Partner
1158 94 112

Thanks

 

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

Sweet_Savior_3_0-1712774234632.png

 
 

 

This will solve the issue.

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
vishwa312
Tourist
27 0 2

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 -%}

color.JPG

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

 

Sweet_Savior_3
Shopify Partner
1158 94 112

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

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
vishwa312
Tourist
27 0 2

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

Sweet_Savior_3
Shopify Partner
1158 94 112

But I will have to check the setup. 

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

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!