One of the key elements when building an online store is to create a pagination system. Pagination enables users to navigate through a series of pages in which content has been split up for design purposes, usability, faster loading, and so on. Pagination might not be the sexiest component of an online store, but it’s definitely one of the most important ones.
Grow your business with the Shopify Partner Program
Whether you offer marketing, customization, or web design and development services, the Shopify Partner Program will set you up for success. Join for free and access revenue share opportunities, tools to grow your business, and a passionate commerce community.
Sign upWhat is pagination, and what can I paginate in a theme?
Pagination is an ordered numbering of pages, usually located at the top or bottom of a webpage. Pagination helps to split products, blog articles, and search results across multiple pages. Within Shopify it is a necessary part of theme design, as you are limited to 50 results per page in anyforloop.
In its simplest form thepaginatetag works with thefortag to split content into multiple web pages. It must wrap afortag block that loops through an array.
{% paginate collection.products by 5 %} {% for product in collection.products %} {% endfor %} {% endpaginate %}You might also like:Understanding hreflang Tags for Multilingual Stores.
Building an accessible pagination
My favorite tutorials show a full example of the outcome immediately, to save time and give context. For this article I think it’s best to see the full example upfront and walk you through the code and what makes this pagination accessible. How each of the elements of this example work together to create a functioning accessible pagination is explained below, so read on to understand how this was built. Here’s the full example:
Paginate tags
佛r this code to work, it must appear withinpaginatetags. Within thepaginatetags, you can access thepaginateobjectand create markup for your pagination to render properly.
In this example we’re paginating blog articles, so this code would appear on theblog.liquidtemplate, or in a section template that was being included in theblog.liquidtemplate.
You can set a “limit” or number of blog posts to show on one page with your pagination by specifying thebyparameter. This parameter is followed by an integer between 1 and 50 that tells thepaginate它应该输出每个页面标签多少结果。佛r example, if I wanted to show 10 articles per page with my pagination, then I would change the example above to read:
{%- paginate blog.articles by 10 -%}
Using semantic markup
In the full example, you’ll notice that we’ve used anavelement and anelement specifies to the browser that this is a list of links enabling a user to navigate the website, and the
Learning Liquid: Getting Started with Shopify Theming
Get this free guide and learn practical tips, tricks, and techniques to start modifying, developing, and building Shopify themes.
By entering your email - we’ll also send you marketing emails related to Shopify. You can unsubscribe anytime. Note: the guide won't be delivered to role-based emails, like info@, developer@, etc.
ARIA roles and attributes
If you’ve never used ARIA (Accessible Rich Internet Applications) before, I encourage you toread up on them. In a nutshell, ARIA attributes help to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities. ARIA attributes supplement HTML so that interactions commonly used in applications can easily be passed to assistive technologies, and help aid in that user experience.
In the main example, we’ve used theroleattribute and set it to a type ofnavigation.
Additionally, to make sure that the arrows,«and», which are really only useful to a sighted user, aren’t read aloud by screen readers, we’ve added the attribute ofaria-hiddenset totrue. This ensures that the arrows are available to a sighted user without negatively impacting the experience of someone using a screen reader.
And finally, we’ve also used thearia-currentattribute set topage, to indicate to a screen reader that this is the active or current item within a container or set of related elements. We determine if the page we are on is the current page by using a check to see ifpart.titleis equal topaginate.current_page, and in this case remove the link (which disables the output from being clicked on, as well as placing thearia-currentattribute on the.
{%- if part.title == paginate.current_page -%}
page {{ part.title }}
{%- else -%}Adding CSS
You’ve likely seen thevisuallyhiddenclass used in themes before, or even if you’ve usedBootstraporHTML5 Boilerplate. Thevisuallyhiddenclass is used to hide content that we don’t want seen visually in the browser, but that we want still to be available to screen readers and search engines. In this case, we’ve used thevisuallyhiddenclass around the word “page” so that screen readers read outPrevious pageandNext pageorPage one, andPage two, when going through our pagination links. However, what we display on the screen is simply,Previous,Next,1,2, etc.
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}All these elements combine to help make this pagination fully accessible and screen reader friendly.
You might also like:10技术SEO技巧最易康姆merce Website.
Start building more accessible themes!
Accessibility shouldn’t be an afterthought, add on, or something done at the end of a project. Instead, we should try and build accessibility into everything we build from the start, and that includes themes and the components that make them up.
Note: Thedefault_paginationfilter
Thedefault_paginationfilter can be used to create a simple pagination, however in its current state the filter’s output is not fully accessible. It looks something like this:
{{ paginate | default_pagination }}
We’re currently in the process of rectifying this, but for now the above example is accessible and gives you the opportunity to customize the markup more granularly in a theme.
