Venture - Replace Slider with photo grid on product page.

Solved
Tourist
7 0 1

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

Success.

Shopify Expert
658 162 195

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 1

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

Success.

Shopify Expert
658 162 195

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 1

Thank you so much! it works.

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