How to use the Paginator element for your Collection pages

In this article, you will learn about the Paginator element and use it to well organize the Product List on your collection pages.

About the Paginator element

The Paginator element is designed to separate your product list into different pages. 



From the GemPages dashboard > Collection Pages, open your preferred template to edit. You can quickly find the Paginator element on the left sidebar of the Editor, under the Collection section.

Specifically designed to divide products in a collection, the Paginator element can only be used on Collection Pages.

Add the Product List and Paginator elements to your page

Step 1: From the GemPages Dashboard, open your preferred collection template to edit. Locate the Product List or drag & drop a new element if your page doesn't have one.


Step 2: Click on the Product List element to view its configurations in the left sidebar.


Scroll down and toggle on the Dynamic option. This step is necessary to ensure the Paginator functions properly on the live page. 



Under the Number of product section, use the slider or input your preferred product number for one page.



Step 3: Drag & drop the Paginator element below the Product List or any position you want. 



As set by Shopify, the maximum number of products per page is 50. However, we recommend that you keep it under 30 for the optimal page speed.

Click on the Paginator element to view its configurations in the left sidebar, including the Settings and Design tabs.

Configure the Settings Tab

Preview Mode

Preview Mode will always be enabled by default to ensure usability in the Editor.

Page quantity: Enter the number of pages you would like to show on the Editor. 

Please be aware that this page number is only for preview. The actual page number on your live page will depend on the number of products in your collection and the number of products you choose to display per page.




You can determine how the element will be displayed in this section. There are two options you can select from the drop-down menu: Simple and Button.

  • Simple: The page number will be shown as simple text. To change the Spacing between numbers, use the slider or input a number (in pixel) into the mini box.


  • Button: Page numbers will be displayed as buttons. 


Button shape: You can select between the Circle and Square shapes. 
Button size: Adjust the slider or input your preferred size in pixel.
Spacing: Adjust the slider or input your preferred spacing in pixel.


Edit the corresponding text fields to modify the labels for the "Previous" and "Next" buttons.




Color: Pick a color or enter the hex color code for the page numbers and the text.

Active color: Pick a color or enter the hex color code for the active page number.

Font Size: Use the slider or input your preferred size in pixels.

Font Style: Transform the number to be Bold, Italic, or Underlined.




This parameter allows you to determine how the element is positioned on your page. There are three options to choose including left-aligned, centered, and right-aligned.

Extra Class

If you wish to further customize the element with coding, please use this field to add a class name and refer to it in the CSS file.



Configure the Design tab

To style how the element looks, please navigate to the Design tab and follow the instructions in this article


That's it! Remember to "Save" and "Publish" your page to bring the update to the live store.

If you're interested in learning more about the powerful and user-friendly GemPages, feel free to explore the Help Center or get in touch with our customer support via email or live chat.

Was this helpful?