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

Solved
Excursionist
37 2 4

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

Success.

Shopify Partner
1765 289 374

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
1 Like
Excursionist
37 2 4

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
Highlighted

Success.

Shopify Partner
1765 289 374

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
1 Like
Excursionist
37 2 4

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 Partner
1765 289 374

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

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

0 Likes
Shopify Partner
1765 289 374

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