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.
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.
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.
Display
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.
Text
Edit the corresponding text fields to modify the labels for the “Previous” and “Next” buttons.
Styles
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.
Alignment
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.
