Pagination Styles Section

What This Sidekick Query Does

Build a configurable pagination section for my Shopify theme that replaces default collection pagination with a styled component. The section should support three pagination modes selectable via a setting [PAGINATION_MODE]: numbered (traditional page number links), load-more (a button that appends the next page of products via AJAX), and infinite-scroll (automatically loads the next page when the customer scrolls near the bottom with an offset of [SCROLL_OFFSET] pixels). For numbered mode, display page numbers with ellipsis for large ranges, previous and next arrow buttons, and highlight the current page with background color [ACTIVE_BG_COLOR] and text color [ACTIVE_TEXT_COLOR]. Inactive page buttons should use background color [INACTIVE_BG_COLOR] and text color [INACTIVE_TEXT_COLOR]. For load-more mode, display a button with text [LOAD_MORE_TEXT], background color [BUTTON_BG_COLOR], and a loading spinner that replaces the text during fetch. For infinite-scroll mode, display a loading spinner centered below the product grid while fetching. All modes should use the Shopify paginate tag with a page size of [PAGE_SIZE] products. Include settings for button border radius [BORDER_RADIUS] pixels, font size [FONT_SIZE], spacing between numbered buttons [BUTTON_GAP] pixels, and alignment [ALIGNMENT] (left, center, right). Provide complete Liquid, CSS, and JavaScript for all three modes.

Expected Output

Tips to Improve Results