Store Page Pagination

Description

• adding pagination to store page, pagination with arrows/numbers
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Click Gear icon on Store Page

Next, click Advanced > Page Header Code Injection

#1.2. Add this code to right box

<!-- 08.26c25v6 Store Page Pagination -->
<script>
window.StorePagePaginationOptions = {
  itemsPerPage: 4,
  paginationTextSizeDesktop: '30px',
  paginationTextSizeMobile: '18px',
  paginationTextColor: '#000000',
  activePageTextSizeDesktop: '30px',
  activePageTextSizeMobile: '18px',
  activePageTextColor: '#e21b23',
  enableActivePageUnderline: true,
  activePageUnderlineColor: '#e21b23',
  paginationArrowSizeDesktop: '34px',
  paginationArrowSizeMobile: '18px',
  paginationArrowColor: '#000000',
  disabledArrowColor: 'rgba(0, 0, 0, 0.25)',
  paginationMarginTopDesktop: '72px',
  paginationMarginTopMobile: '32px',
  gapBetweenPaginationButtonsDesktop: '56px',
  gapBetweenPaginationButtonsMobile: '18px'
};
</script>
<script src="https://code.beaverhero.com/store/0826c25v6storepagination.js"></script>

#2. Customize

#2.1. To change number style, change line 05 – 10

paginationTextSizeDesktop: '30px',
  paginationTextSizeMobile: '18px',
  paginationTextColor: '#000000',
  activePageTextSizeDesktop: '30px',
  activePageTextSizeMobile: '18px',
  activePageTextColor: '#e21b23',

#2.2. To change arrows style, change line 13 – 16

paginationArrowSizeDesktop: '34px',
 paginationArrowSizeMobile: '18px',
 paginationArrowColor: '#000000',
 disabledArrowColor: 'rgba(0, 0, 0, 0.25)',

#2.3. To change underline color, change line 12

activePageUnderlineColor: '#e21b23',

#2.4. If you need to tweak more you can use this AI Assistant (designed for Squarespace sites)