Adding next/previous arrow to product page picture

Store Design
1

Hello,

I am using Ventura theme. I have multiple pictures for each product. When a customer clicks on product picture, picture becomes full size but there is no next/previous button to see other pictures. Customer should go back to see other product pictures.

How can I add next/previous button to Product page images?

Thanks

2

@Emrahgnl

Venture theme doesn’t support modal slideshow for images, it loads only one image in modal.

You need custom edits in your theme to add this functionality.

3

Thanks for your reply. I know that Ventura theme does not support it. I am
trying to find out the code that I can use to add this functionality. I wan
wondering if anyone has it. Thanks

4

@Emrahgnl

There is need to add slideshow script and implement it for product page, it is not something simple that can be shared via this format.

5

Yes, please this would be very helpful…

6

Hi, Try this code it will work for you mate

Add this code in main-product.liquid file line number 33 :

{%- liquid
assign previous_product = collection.previous_product
assign next_product = collection.next_product
if previous_product or next_product
else
assign collectionList = product.collections[0].handle
assign previous_product = nil
assign next_product = nil
assign last = collections[collectionList].products_count
for p in collections[collectionList].products
if p.handle == product.handle
assign prev = forloop.index | minus: 2
assign next = forloop.index
if prev >= 0
assign previous_product = collections[collectionList].products[prev].handle
endif
if last >= next
assign next_product = collections[collectionList].products[next].handle
endif
break
endif
endfor
endif
-%}


{%- if previous_product -%}

<---------

{%- endif -%}
{%- if next_product -%}

--------->

{%- endif -%}

Add CSS in the base.css file :

#nextpre{
display: flex;
justify-content: flex-end;
margin-right: 6%;
}
.next-prev-icon{
margin: 0 0 20px 20px;
padding: 5px 10px;
font-weight: 500;
color: #fff;
box-shadow: #0003 0 20px 30px;
background-color: #000;
border-radius: 10px;
text-decoration: unset;
width: 100px;
text-align: center;
font-size: 15px;
}

7

hi i just this this into my code exactly as you said but something changed