Add page numbers in addition to "Next" and "Previous" - Debut Theme

Highlighted
New Member
3 0 0

Hey guys, looking for some assistance on this.

 

I'm using the Debut Theme and I want to include navigatable page numbers either in addition to the "Next" and "Previous" page buttons or just as itself. I have some experience with HTML and CSS but Liquid is essentially brand new to me as I just started this project within the last 2 months, although I am getting the hang of the language rather quickly. I've tried searching through these community forums, on google as a whole, and looking at the pagination reference page from Shopify with no luck.

 

Does anyone have any pointers? I'm not necessarily looking for you to do all the work as I would like to learn this as well.

 

Thanks in advance, Logan

0 Likes
Highlighted
Shopify Expert
804 67 187

You can use the Paginate object to get the current page. Then add +1 to show the next page number (and use the paginate.next variable for the url), etc.

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Theme Scientist (A/B testing app).
Creator of Order Automator (app that auto tags + fulfills orders, send emails).
Creator of Tip Jar (add a tip button to your store).
Creator of Shopify Analyzer (free performance analysis tool).
My team also builds custom apps and automated solutions.
Enjoy the adventure!
1 Like
Highlighted
Shopify Staff
Shopify Staff
1200 118 305

Hey there, @lclose 

 

Bo here from Shopify Support! 

 

I checked in with our theme team regarding this as Debut is a Shopify Supported theme. They were able to confirm that this is a customization that would qualify as apart of your 60 minutes of free design time. The coding of this is rather lengthy and complicated, and so, they would like to do this for you. If you would like me to go ahead and escalate this to our team for you, please do let me know and I can reach out to you via email.

 

All the Best,

Bo

Bo - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
3 0 0

Thank you for the link! I'll keep reading through that Pagination reference page and see if it starts making sense to me.

0 Likes
Highlighted
New Member
3 0 0

Hey Bo,

 

I would like to learn this on my own at the moment, as this has been a goal of mine since I was a freshman in high school web design a few years back, but if it proves to continue stumping me I will for sure take you up on that offer!

0 Likes
Highlighted
New Member
6 0 0

Hi @Bo,

I could definitely use some help on this. 

We now have over 700 products, even we categorise them, there are still a lot of <previous< and >next> the customer has to go through.

Would it be possible for you to help me?

Thank you!

0 Likes
Highlighted
New Member
16 0 0

Hi @Rubsw, you can try to head to this folder and add the following coding.

Head to Snippets > pagination.liquid

 

ADD: 

<div class="pagination">
{{ paginate | default_pagination | previous: '&laquo; Previous', '&larr;' | next: 'Next &raquo;', '&rarr;' }}
</div>

 

Hope this helps

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1200 118 305

Hey there, @Rubsw 

 

If you're using a free theme from Shopify, then our Support team might be able to help you with this tutorial. Although Shopify can help you with many customizations, some kinds of customizations aren't supported. This would be a supported change. Can you please provide me with a link to your store and confirm the name of the theme that you are using? 

 

All the Best,

Bo

 

Bo - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
6 0 0
Hey @Bo,

Thank you very much for your offer. My store is
https://www.pu-rist.com/

We are using debut theme.

Since we have already adapted Selina3 ‘s solution, I wonder if we can make use of the shopify help for another more complicated issue?

Best,
Rubsw

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1200 118 305

If you have another issue you would like help with instead please reach out to support directly. If you go to this page and click Contact Support you will be prompted to either login or continue without a store. Once you have selected an option you will be asked to ask about a topic. Search for your query and relevant help docs will populate as well as the option to proceed to the chat.

 

All the Best,

Bo

Bo - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

1 Like