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

[Ela_V_TSM]

Hi!

We're currently developing a theme, so here's a preview link instead: https://bamkttauqa34f03q-3935153.shopifypreview.com/products/ff-1108-1cwla

Okay currently this is what our product page looks like:

What I wanted to happen is for there to be a grid of images instead of a slider, like the one from the image below:

Any help will be greatly appreciated. Thanks~

[Jasoliya · Accepted solution]

Hi @Ela_V_TSM 

There are no any setting in theme to disable this slider but we can do by custom changes, follow this

1. Asset->theme.js->find this._productThumbnailSlider(); and comment this line

2. Asset-> theme.scss->paste this code at bottom of file;

.product-single__thumbnails{ display: block; }

[Ela_V_TSM]

Hi there!

Thanks for the reply.

I've done what you've recommended, but now the product page looks like this:

It appears vertically on the side instead horizontally below the featured image. Any idea how to solve this? Thanks.

[Alexandru_Derev · Accepted solution]

Hi @Ela_V_TSM,

you need to adjust the styles of the children divs, the ones with the following css classes : "product-single__thumbnail-item product-single__thumbnail-item-product-template".

These divs need to have something like:

float: left;
margin-right:5px;

This will force them to occupy the available space next to each other.

[Jasoliya · Accepted solution]

You can correct with with by just following;

.product-single__thumbnails .product-single__thumbnail-item{     display: inline-block;}

[Ela_V_TSM]

Okaaay this seems to have worked~

@Alexandru_Derev 's solution worked, but I'd have to adjust more stuff compared to the solution @Jasoliya gave.

Here's how it looks now, for everyone's reference:

[SportsAndGeekU]

Hey Jasoliya. I'm propping my site up and wanted to achieve the same thumbnail mod. The first part of your fix worked as expected, but I'm stumbling on this part.

Can you clarify, is this correction applied to the original fix of 

.product-single__thumbnails{ display: block; }

 ...or is this completely overwriting that and inserting (as shown)

.product-single__thumbnails

.product-single__thumbnail-item{display: inline-block;}

...or something else altogether? I've tried and failed a few times so sorry and thanks in advance!

[Jasoliya]

Send me your store url

[SportsAndGeekU]

https://sportsandgeekunique.com/ - I sent the entry password to your jasoliyabrijesh123@gmail.com email.

[Jasoliya]

Sorry but i cant get your mail, send me again or PM me