How can we help?

Step 1: Ensure Superfields Is Installed and Set Up

• Make sure that you’ve already installed and set up the Superfields component in your Framer project.

• Ensure that your collection list is synced and set up correctly in Framer. The collection should be positioned off the canvas, ready to receive pagination.

Step 2: Add the Pagination Component

• In your Framer project, go to the Superfields plugin.

• Select and add the Pagination component to your collection.

• Paste it into your project where you want the pagination to appear.

You can style the pagination buttons as desired within your collection list, adjusting the design to match your site’s aesthetic.

Step 3: Adjust Pagination Settings

• Go to the top level of your collection (where you’ve added the pagination).

• Under the Pagination settings, choose Load More from the options. This will display the "Load More" button that’s default in Framer.

Since we won’t be using the "Load More" button for this case, remove it to avoid redundancy.

Step 4: Set the Pagination Control

• In the pagination settings, adjust the control for the number of items per page.

  • For example, if you want only two items per page, set it to load 2 items at a time.

That’s all you need to do for basic pagination!

Step 5: Preview Your Pagination

• Once everything is set up, go ahead and preview your site.

• You should now see the Next and Previous buttons for pagination, and only two items will be loaded at a time.

Conclusion

You’ve successfully added pagination to your Framer CMS using Superfields! This allows for better content management and user experience, especially when dealing with large amounts of content. Customize the buttons and behavior as needed, and enjoy a more dynamic, user-friendly site.