Before you proceed: |
When a customer logs into their account on your website they'll usually be shown a table displaying the orders they have placed.
By default, your theme will be set to show all the orders that a customer has placed. If your customers have placed a very large number of orders then you may want to add pagination onto this table to help load the page faster.
Instructions for adding pagination to this page are below:
1. You will need to add a setting orders_per_page to your theme's settings.json file. This is best placed in the 'other settings' section.
| { "label": "Orders per page displayed on account home", "name": "orders_per_page", "type": "text", "defaultValue": 12 } |
2. You'll then need to set the number of orders per page on the theme settings page.
3. You'll need to use the page editor to edit the account_home.twig file.
The following variables are available to implement pagination:
orders_per_page Returns the orders set per page
total_pages Returns the number of pages of orders
current_page Returns true if the page is the current page
order_count Returns the total number of orders
4. The following code will implement basic pagination...
| {% if total_pages > 1 %} {% for page in 1..total_pages %} <a href="/account?page={{ page }}" class="{{ page == current_page ? 'current' : '' }}">{{ page }}</a> {% endfor %} {% endif %} |
If your theme is built using the Bootstrap Framework you can take advantage of the pre-styled links by using the following mark-up...
| {% if total_pages > 1 %} <nav aria-label="Page navigation"> <ul class="pagination"> {% if current_page > 1 %} <li class="page-item"> <a class="page-link" href="/account?page={{ current_page - 1 }}"> Previous </a> </li> {% else %} <li class="page-item disabled"> Previous </li> {% endif %} {% for page in 1..total_pages %} {% if page == current_page %} <li class="page-item active"> <a class="page-link">{{ page }}</a> </li> {% else %} <li class="page-item"> <a class="page-link" href="/account?page={{ page }}"> {{ page }} </a> </li> {% endif %} {% endfor %} {% if current_page < total_pages %} <li class="page-item"> <a class="page-link" href="/account?page={{ current_page + 1 }}"> Next </a> </li> {% else %} <li class="page-item disabled"> Next </li> {% endif %} </ul> </nav> {% endif %} |
If your theme is built using the Foundation Framework...
| {% if total_pages > 1 %} <div class="text-center"> <ul class="pagination" role="navigation" aria-label="Pagination"> {% if current_page > 1 %} <li class="pagination-previous"> <a href="/account?page={{ current_page - 1 }}"> Previous </a> </li> {% else %} <li class="pagination-previous disabled"> Previous </li> {% endif %} {% for page in 1..total_pages %} {% if page == current_page %} <li class="current"> {{ page }} </li> {% else %} <li> <a href="/account?page={{ page }}"> {{ page }} </a> </li> {% endif %} {% endfor %} {% if current_page < total_pages %} <li class="pagination-next"> <a href="/account?page={{ current_page + 1 }}"> Next </a> </li> {% else %} <li class="pagination-next disabled"> Next </li> {% endif %} </ul> </div> {% endif %} |
EcommerceFrom 28 June 2025, new EU regulations will require all consumer-facing webshops to meet certain accessibility standards. Known as the European Accessibility Act (EAA), the goal is to make online stores...
B2B EcommerceNavigating the complexities of B2B purchasing requires an in-depth understanding of buyer behavior, which has evolved significantly over recent years. Companies today must adapt to these changing dynamics...
MarketingGoogle Shopping is a powerful platform that lets online stores showcase their products on both the Google results page and Google Shopping tab. This unique advertising opportunity helps brands put...
Ecommerce business managementThe success of your ecommerce store depends on more than just top-notch products and savvy marketing. According to a study by Salesforce, 88% of customers said their whole experience with a business is...
Ecommerce business managementWhen Magento was released back in 2007, the appeal of an open-source ecommerce platform quickly captured the attention of businesses wanting complete control over their online store. However, for...
Ecommerce business managementArtificial intelligence (AI) is revolutionizing the ecommerce landscape.By 2030, the AI-enabled ecommerce market is estimated to reach $16.8 billion, growing by a rate of 15.7% CAGR in the next 8 years....
EcommerceIn the ever-evolving landscape of ecommerce, the success of your business hinges not only on the products you sell but also on the robustness of your ecommerce platform.As we navigate through an era where...
See why ShopWired is one of Europe's favourite ecommerce platform and start building your ecommerce website today.
No obligation, no credit card, no commitment, no contract
