Buy me a coffee

(Product) Add Previous/Next

#1. First, use this code to the Custom CSS box

/* product prev next */
.p-prev-next a, .p-prev-next2 a {
    margin-left: 20px;
}

a.p-prev:before {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    display: inline-block;
    transform: rotate(90deg);
    position: relative;
    top: 3px;
}
a.p-next:after {
   content: "\e009";
    font-family: 'squarespace-ui-font';
    display: inline-block;
    transform: rotate(-90deg);
    position: relative;
    top: 3px; 
} 
  @media screen and (max-width:767px) {
    a.p-prev {
        margin-left: 0 !important;
    }
    nav.ProductItem-nav {
        justify-content: flex-end !important;
    }
}

Product Add Previous Next 01 Min
#2. Use this code to Code Injection – Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.p-prev-next').appendTo('nav.ProductItem-nav');
});
</script>

Product Add Previous Next 02 Min
#3. Edit all products > Add a Code Block in Additional Info > Use this code

<div class="p-prev-next">
<a href="/store/p/country-feast-set-3nybt-5hnr6" class="p-prev">previous</a>
  <a href="/store/p/spring-bowl-rltkk-5gn9y" class="p-next">next</a>
</div>

 

Replace this with the previous and next product URL

Product Add Previous Next 04 Min

#4. Result

Product Add Previous Next 05 Min

Product Add Previous Next 06 Min