Venture - Replace Slider with photo grid on product page.

Solved
Highlighted
Tourist
7 0 3

I'm using the venture theme and on the product pages instead of having the product images to the left of the screen viewed in a slider I would like it to be at the bottom of the main product image with no slider. 
I have found one person who made a similar post
https://community.shopify.com/c/Shopify-Design/Venture-Theme-Product-image-grid-below-product-featur...
However, I don't understand what the first step is and I was unable to get this to work. Any kind of clarity on how to get this to work would mean a lot. 
Here is a link to my site.
 https://0gmc0okps5ftz4zk-27595636789.shopifypreview.com


0 Likes
Highlighted
Shopify Expert
667 170 215

This is an accepted solution.

Hi, @kittkat ,

This is Evita from On The Map.

 

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

.product-single .photos {
    display: block;
}
.product-single .slick-arrow {
    display: none!important;
}
.product-single .slick-track {
    display: flex;
    height: auto!important;
   flex-wrap: wrap;
}
.product-single__thumbnails.slick-vertical .slick-slide {
   width: calc(100% / 4)!important;
}

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
Tourist
7 0 3

Hey thanks so much for responding. This is exactly what I'm looking for however I am getting an error. 
The images do appear on a grid however when i select one of the images they all disappear. 
It seems like I can only select the first 3 images without it disappearing. 
Here is the link to the updated edit on the site 
https://a9n1amkwhtn6gio8-27595636789.shopifypreview.com
If you click on koala you can see what I mean. 

0 Likes
Highlighted
Shopify Expert
667 170 215

This is an accepted solution.

Ah yes, add this code too:

.product-single__thumbnails .slick-track {
   transform: none!important;
}
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
Highlighted
Tourist
7 0 3

Thank you so much! it works.

1 Like
Highlighted
New Member
1 0 0

Hi Dear,

The website looks great after using this code but on the mobile, it should stay the same (slide) because we see just 3 images. it will be much appreciated if you could provide something to keep it as it was on the mobile( slide) and change it just the website (grid)

0 Likes
Highlighted
Pathfinder
105 1 17

Hi,

Just applied this CSS code (thanks to @OTM's 10.17.2019 post) to change the way product images are displayed. Find that Venture is an interesting theme, but not the product pages! The code given by @OTM seems to work well for desktops, but mobile view is limiting the number of product images displayed to 4: main image and 3 thumb images. This means that if a product has 7 images, mobile viewers can't see half of them! Any ideas to fix mobile view of Venture product pages would be appreciated.

Skoory, the curious squirrel of TTL CIC - - a Company limited by guarantee with charitable objectives.
"Finally, if you quote a source, choose one with a name that is easy to pronounce...mental effort is aversive." Thinking Fast and Slow
0 Likes
Highlighted
New Member
1 0 0

any resolution to this? 
after looking for an hour finally used this solution and it works great except on mobile the image grid cuts off after 4 images as said above. 
any help would be appreciated. 

0 Likes