It is possible to include custom pagination in order to show the amount of available pages, and enable direct navigation to those pagenumbers.
The image below shows how such a pagination might look:

How it works

  • The pagination works based on the following principles:
  • It shows all pages up till a max of five, so: 1 | 2 | 3 | 4 | 5
  • When there are more then five pages, it shows first 5 and last: 1 | 2 | 3 | 4 | 5 … 10
  • When the current page is higher then five, it shows the first page and a middle section with three pages: 1 … 5 | 6 | 7 … 15
  • When showing the last page, it shows the last five and first page: 1 … | 6 | 7 | 8 | 9 | 10
  • When the current page is not the first page, the previous button is available.
  • When the current page is not the last page, the next button is available.

Available extensions

The pagination exists of the following set of myshop extensions which can be used to show the navigational buttons (previous/next) and show the individual page numbers appropriate for the current page:


The following code can be used to show the pagination in the” productlist template.”:

<div style="myshop-has:previous-page">
        <a style="myshop-action:previous-page" class="myshp_list_navigation_button_next">
                <span style="myshop-resource:prev">
<span style="myshop-has:pagina">
        <div class="myshp_list_pagination">
                        <li style="myshop-repeat:page-links">
                                <span style="myshop-is:page-link-separator"> <span class="myshp_list_pagination_item_separator">...</span> </span>
                                <span style="myshop-not-is:page-link-separator">
                                        <span style="myshop-is:page-link-active">
                                                <a style="myshop-action:page-link" class="myshp_list_pagination_item_active">
                                                                <span style="myshop-label:page-link-number"></span>
                                        <span style="myshop-not-is:page-link-active">
                                                <a style="myshop-action:page-link" >    
                                                        <span style="myshop-label:page-link-number"></span>
<div style="myshop-has:next-page">
        <a style="myshop-action:next-page" class="myshp_list_navigation_button_prev">
                <span style="myshop-resource:next">


Was this helpful?

Yes No
You indicated this topic was not helpful to you ...
Could you please leave a comment telling us why? Thank you!
Thanks for your feedback.

Post your comment on this topic.

Post Comment