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

Solved
Excursionist
38 2 5

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:Annotation 2019-07-11 143000.png

 

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:Annotation 2019-07-11 143128.png

 

Any help will be greatly appreciated. Thanks~

Email: ela.v.tsm@gmail.com
0 Likes
Highlighted

Success.

Shopify Expert
2220 376 466

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; }
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
1 Like
Excursionist
38 2 5

Hi there!

 

Thanks for the reply.

 

I've done what you've recommended, but now the product page looks like this:Annotation 2019-07-11 143000.png

 

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

Email: ela.v.tsm@gmail.com
0 Likes

Success.

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.

Alex Dereveanco | CMO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
1 Like

Success.

Shopify Expert
2220 376 466

You can correct with with by just following;

.product-single__thumbnails .product-single__thumbnail-item{     display: inline-block;}
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
1 Like
Excursionist
38 2 5

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:

Annotation 2019-07-11 143000.png

Email: ela.v.tsm@gmail.com
1 Like

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!

0 Likes
Shopify Expert
2220 376 466

Send me your store url

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

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

0 Likes
Shopify Expert
2220 376 466

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

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