#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; } }
#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>
#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
#4. Result