About Collection Paginator
The Collection Paginator is specifically designed for Collection Pages to simplify browsing through extensive product lists.
Instead of displaying all products on a single page, it creates a series of pages that users can navigate using Previous, Next, or numbered links. This improves both user experience and website performance.
Collection Paginator Element Settings
The Collection Paginator Element offers several customization options to fit your store’s design and functionality needs. Here’s a breakdown of its settings:
Preview Mode
Adjust the Page Quantity to preview different scenarios, such as 5, 10, or 20 products per page.
Display
Layout: Choose between Simple Layout or Button Layout for navigation.
- Simple Layout: Displays plain links (e.g., “Previous 1 2 3 Next”).
- Button Layout: Adds buttons for navigation. Customize the button shape (circle, square) and size to align with your design.
Item Spacing: Adjust the spacing between pagination items to avoid overcrowding and ensure readability.
Text
Previous/Next Text: Customize the text labels for navigation (e.g., “Back” instead of “Previous”). This is useful for localizing the paginator or adding a personalized touch.
Paginator Text
Modify text styles for numbered pages, including font type and size, font weight, etc,…
Choose Color
- Normal Color: Set the default color for inactive pagination elements.
- Active Color: Highlight the current page with a distinct color to improve visibility.
Align
Adjust the horizontal alignment of the paginator (Left, Center, or Right) to fit your page layout.
Configure the Advanced tab for the Collection Paginator Element
For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.
