Help Center
    Help Center
  1. Creating your site
  2. Advanced features
  3. CMS
  4. Connecting user input elements to the CMS
    5. CMS: Adding and Setting Up a Pagination Bar

CMS: Adding and Setting Up a Pagination Bar

5 min read
Use a pagination bar to provide visitors with a simple and intuitive way to browse through a large collection of items within a repeater or gallery. A pagination bar lets visitors navigate through 'pages', or sets of items displayed on a dynamic page. The dataset's 'Maximum items displayed' field determines the maximum number of items that appear in each 'page'. 

The number of pages displayed by the pagination bar is calculated based on the total number of collection items retrieved by the dataset and the 'Maximum items displayed' field. For instance, if you have 50 visible items in your collection and you've set the 'Maximum items displayed' field to 10, your pagination bar will display 5 pages (50/10=5). Each page represents a set of items, and the pagination bar allows your visitors to navigate through these sets. 
Important:
Pagination bars are not yet available in the Studio Editor. Vote for this feature if you would like to see it in the future. 
Before you begin:

Step 1 | Add and customize a pagination bar

Add a pagination bar to your site and customize it to match your design needs. 

To add and customize a pagination bar:

  1. Go to your editor.
  2. Go to the relevant dynamic page that can list multiple items:
    1. Click Pages & Menu  on the left side of the editor.
    2. Click Dynamic Pages.
    3. Click the relevant dynamic page that can display multiple items.
      Note: Pagination bars are not relevant for dynamic item pages that can only display 1 item at a time. 
  1. Add a pagination bar: 
    1. Click Add Elements  on the left side of the editor.
    2. Click Interactive.
    3. Click Pagination Bar. 
    4. Click and drag the pagination bar you want to use onto the page. 
  1. Customize the layout and design of the pagination bar: 

Step 2 | Connect to the CMS

Connect your pagination bar to the same dataset that connects to your repeater or gallery. Then resize your pagination bar and test it out in preview mode. When it's ready to go live, publish your site. 

To connect the pagination bar to the CMS:

  1. Click the pagination bar. 
  2. Click the Connect to CMS icon .
  3. Click the Choose a dataset drop-down and select the same dataset that connects to your repeater or gallery. 
  1. Click and drag the edges of your pagination bar to resize it. 
  2. Click Preview to test your pagination bar. 
  3. Click Publish if you are ready to make the changes go live. 

Did this help?

|
In this article
  • Step 1 | Add and customize a pagination bar
  • Step 2 | Connect to the CMS

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched