💡 Pagination like the ones used on major e-commerces sites

Tips
1

Hi Bubblers,

You may have asked yourself at some point:
“How can I build a pagination component like the ones used on major e-commerce sites like Shopee, using Bubble?”

Well, maybe you haven’t asked that—but now you’re curious, right? Either way, that’s the tip I want to share in this post :nerd_face:

The need came up because our designer included this kind of pagination in a Figma mockup for a client project, and there was no convincing him otherwise :sweat_smile: So we had to build the component in-house here at Yowpi.

At first, I thought, “Surely someone’s already made this—should be easy to find on the forum…”
But I couldn’t find anything decent and free, so I dove into the Bubble editor and built it from scratch.

image
image436×330 43.7 KB

After a few intense minutes, here’s what I came up with:

image
image359×463 7.14 KB

Initial state – positioned on the first page:
image

Clicking the ellipsis paginates in increments of 5 (this is configurable):
image

Last page state:
image

To make sharing easier, I copied the component into one of my test apps, which has the editor open for viewing. I also added a brief explanation of how it works.

Here’s the link:
:backhand_index_pointing_right: https://mrtrettin-test.bubbleapps.io/version-test

Hope this is useful to someone out there!

3 Likes
2

This is cool. Thanks for sharing it.

I tested it out and I think it looks great and the idea of ellipsis is awesome. One thing I noticed is when starting, if on page 1 and clicking the elipsis for first time, the number of numbers increases and expands the width. It would be better if it remained the same the the width of the element remained the same.

1 Like
3

Hey @boston85719 ,

Thanks for taking the time to review!

VĂ­deo sem tĂ­tulo
Are you referring to the total width of the pagination component?
If so, I see what you mean—and I agree, it might look cleaner if the width stayed consistent. That said, I’ve noticed that many e-commerce sites behave the same way, so I tried to stay true to that pattern.