[Venture Theme] Product image grid below product featured image on Product page

Solved
Shopify Partner
1933 321 406

Add this css in theme.scss

.product-single .photos{ flex-wrap: wrap; }
.product-single .photos__item--main{order: initial;}
.product-single .photos__item--thumbs{flex: 1 1 auto;}
.product-single .photos__item--thumbs .product-single__thumbnails{display: flex;flex-wrap: wrap;}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
2 Likes

That almost did the trick. What I'm seeing now:

  • For my item with 14 thumbnails, it is displaying properly/as expected.
  • For my other items with just 2 or 3 thumbnails, the main image window has shrunken to the size of the thumbnails.
0 Likes
Shopify Partner
1933 321 406

On this product you have uploaded very small image but you can solve by this:

add this css:

.photos__item.photos__item--main{width:100%;}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes

That last modification didn't make any visible changes to the main product image.

 

I have to call it a night, but I'll attempt again first thing in the morning. I sincerely do appreciate all of the help you've provided!

0 Likes
Shopify Partner
1933 321 406

You have not added code yet, add my last code and let me know if not work.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes

That's strange that it's not showing as live on your side, it's showing as written in my theme.scss.liquid as:

 

.product-single__thumbnails {
display: inline-block;
}
 
.product-single .photos{flex-wrap: wrap;}
.product-single .photos__item--main{order: initial;}
.product-single .photos__item--thumbs{flex: 1 1 auto;}
.product-single .photos__item--thumbs .product-single__thumbnails{display: flex;flex-wrap: wrap;}
.photos__item .photos__item--main{width:100%;}

 

 

...and to confirm via View Page Source, the following is showing as published:

 

.product-single__thumbnails{display:inline-block}.product-single .photos{flex-wrap:wrap}.product-single .photos__item--main{order:initial}.product-single .photos__item--thumbs{flex:1 1 auto}.product-single .photos__item--thumbs .product-single__thumbnails{display:flex;flex-wrap:wrap}.photos__item .photos__item--main{width:100%}

(For reference, the latest publish of that file should result in the URL ending with .../theme.scss.css?1104 )

0 Likes
Shopify Partner
1933 321 406

You have added wrong code:

replace with this

.photos__item.photos__item--main{ width: 100%;}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
2 Likes

I apologize again for my ignorance on this one. It appears my spacing of that final line was preventing that last part from working.

 

I've updated and all products are showing as expected! Can't thank you enough for all of your assistance on this one, THANK YOU!

0 Likes