About Collection Pagination
Collection pagination is a method used to divide products in a collection into multiple pages. This keeps the page organized and enhances load times, improving the overall user experience.
In Shopify, collection pages are used to display products grouped by a specific category or theme. By adding a Collection Paginator to your collection pages in GemPages, you can ensure that customers can effortlessly browse through the entire collection, page by page.
Learn more about this element here: Collection Paginator.
Add Collection Pagination with Collection Paginator Element
Step 1: Create a Collection in Shopify
Before setting up pagination in GemPages, you must create a collection in Shopify. Follow these steps:
Log in to your Shopify admin dashboard.
Navigate to Products > Collections from the left-hand menu.
Click the “Create collection” button.
Configure Collection type settings:
- Manual Collection: Manually add products to the collection.
- Automated Collection: Set conditions to automatically add matching products.
Fill in other necessary information. Click “Save” to create your collection.
Your collection is now ready to be displayed on a collection page.
Step 2: Open or Create a New Collection Page in GemPages
Open the GemPages dashboard in your Shopify admin.
Find the collection page you want to edit. If none exists, click the “Create New Page” button and choose “Collection Page” as the template.
Click the Collection Page and choose “Start from scratch” or select a template to edit.
Now you can start designing your collection page.
Step 3: Add a Product List Element
Inside the GemPages editor, locate the left-hand Element Library.
Search for the Product List element.
Drag and drop the Product List element onto your collection page.
Configure the product list settings:
- Connect it to the Shopify collection you created earlier.
- Set the number of products to display per page (e.g., 12, 16, or 20).
- Customize the layout and style of the product list.
Check out our article about the Product List Element for more information.
Step 4: Insert the Collection Paginator
In the GemPages editor, search for the Collection Paginator element in the Element Library.
Drag and drop the Collection Paginator below the Product List element.
Configure the paginator:
- Choose a style that matches your site’s theme (e.g., arrows, numeric pagination).
- Adjust the spacing, alignment, and other design settings as needed.
Save your changes by clicking the Save button at the top-right corner of the editor.
