Hello Everyone,
Does anyone know how to add arrows to the product page?
For example
Store URL: www.faithandyou.in
Theme: refresh
Hello,
Please try with this code:
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;
}
If you still face any issues then please let me know.
this navigates to the next product, can you give me the code to navigate it to the next image of the same product