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

Solved
Shopify Partner
1776 292 380

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
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
1776 292 380

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
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
1776 292 380

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
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
1776 292 380

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