Listing controls area updated across all 3G templates (Load more button, Pagination, Go to top link, Items total). The update improves accessibility across these controls with new ARIA attributes, better keyboard focus handling, more semantic markup, and simplified CSS structure.
The change is scheduled for release on October 2, 2025. If you are an addon developer, please review the changes described below now and adjust your addons accordingly. On the release date, these improvements will be rolled out to the majority of customers. E-shops using Deferred Template Updates will have time until October 16, 2025 to modify their customizations and accept the update.
You can preview the changes by running the command shoptet.helpers.enableUpdatePreview('a11y_pagination') in the browser console.
We have completely revised the entire section in the footer of item listings (except for the customer section). The previous component wrapped by the .pagination-wrapper is replaced by a component wrapped by .listingControls.
<div class="listingControls" aria-labelledby="listingControlsHeading">
<h3 id="listingControlsHeading" class="sr-only">Listing controls</h3>
<div class="loadMore" data-context="products">
<button class="loadMore__button loadMore__button--products btn btn-secondary js-loadMore__button--products" type="button" aria-controls="products" data-url="/do-domacnosti/strana-4/">Load 9 more </button>
</div>
<nav class="pagination" aria-labelledby="paginationTitle paginationStatus">
<h4 id="paginationTitle" class="sr-only">Pagination</h4>
<p id="paginationStatus" hidden>You are on page 3 of 4.</p>
<ul class="pagination__list">
<li><a class="pagination__link pagination__link--first" href="/do-domacnosti/" aria-label="1, first page">1</a></li>
<li><a class="pagination__link pagination__link--prev btn btn-secondary" href="/do-domacnosti/strana-2/" aria-label="Previous, page 2"></a></li>
<li><strong class="pagination__currentPage" aria-current="page">3</strong></li>
<li><a class="pagination__link pagination__link--next btn btn-secondary" href="/do-domacnosti/strana-4/" aria-label="Next, page 4"></a></li>
<li><a class="pagination__link pagination__link--last" href="/do-domacnosti/strana-4/" aria-label="4, last page">4</a></li>
</ul>
</nav>
<div class="itemsTotal"><strong>36</strong> items total</div>
<div class="goToTop">
<a class="goToTop__button btn btn-secondary" href="#productsListHeading" aria-label="Top of the item list">Top</a>
</div>
</div>
A hidden heading for the listing controls area was added (with class sr-only), using <h3> or <h4> depending on the page structure.
We switched to a semantic button with consistent, localized labeling. For products and search results, the label includes how many items will be loaded. For discussions and ratings, the label is “Show next results.” This clarifies intent and improves accessibility.
Pagination uses a semantic navigation landmark with an off-screen name and status. Items are structured as a list. The current page is indicated with aria-current="page". This provides reliable announcements for screen readers (position and link purpose) and predictable keyboard navigation.
The link points to the hidden heading above each listing and behaves as a regular anchor (no JavaScript). This ensures predictable behavior and good keyboard compatibility.
In Classic and Disco, Items total is now present on mobile only. In other 3G templates, it remains visible as before. This keeps summary information consistent on small screens.
We added headings for screen readers (with class sr-only) above each listing (products, search results, discussions, ratings, glossary terms, and articles). These headings act as anchor targets for the “Go to top” link and improve navigation for screen reader users.
Example of the heading for products on a category page. ID changes based on the content and location of the listing.
<h2 id="productsListHeading" class="sr-only" tabindex="-1">Výpis produktů</h2>
Buttons are styled per template as secondary (less prominent) buttons.
Scripts handling new item loading via the Load more button and the pagination were updated for accessibility (announcer & focus) and consistency.
While new items are loading, a page overlay with a spinner is displayed across all listings (including search results). A screen reader announcement indicates the loading state; once items are loaded, focus moves to the first newly loaded item.
Newly inserted items are revealed with a light fade-in animation, managed by shoptet.animations.fadeIn(elements), which toggles the .fade-in and .start classes.
We moved from custom JavaScript scroll to browser-native scrolling with a CSS offset. New CSS tokens handle the effective offset for a fixed header and temporary messages. This solution allows the browser to properly align targets using scroll-padding-top, including anchor links (which work without JavaScript) and respects prefers-reduced-motion.
We have added these tokens and CSS.
:root {
--scroll-offset: var(--scroll-offset-override, var(--scroll-offset-runtime, 0px));
--scroll-extra-offset: 0px;
}
html {
scroll-behavior: smooth;
scroll-padding-top: max(var(--scroll-offset, 0px), var(--scroll-extra-offset));
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
--scroll-offset-override — optional manual override for the scroll offset (if you need to override our settings).--scroll-offset-runtime — set by JavaScript based on the fixed header’s height.--scroll-extra-offset — set by JavaScript to the height of the currently visible message/notification.The legacy global scrollToEl has been deprecated and replaced with shoptet.scroll.scrollToEl(el). See the function definition: https://github.com/shoptet/templates-assets/blob/master/00/js/modules/scroll.js. The new shoptet.scroll.scrollToEl(el) computes and temporarily sets --scroll-extra-offset when a message is present, then restores it after scrolling.
Please replace any usage of window.scrollToEl($el) with shoptet.scroll.scrollToEl(el).
If you are using our JavaScript but not our CSS, set scroll-padding-top and scroll-behavior to html and custom properties as mentioned above.
We have introduced a script for double currency for Bulgaria. You can read the details here: Script for Dual Currency Display in Bulgaria (BGN + EUR).
The URL without the trailing slash is now redirected as a permanent, not temporary redirect.
We added a skip link that enables skipping the sidebar, which helps navigation.
We removed the text transform “soft validator”, for example, the first capital letter.
We have fixed a zoom effect on the product detail image, which was caused by smaller image dimensions.
We have fixed the margin for nested replies in the discussions.
We have fixed the navigation arrow position in the carousel on Samba.
We have fixed the misalignment of the carrier logo in the Samba template.
We have fixed the back to the shop in the Step template in the cart.
We have unified the color of the stock and availability in the Tango template.
We have removed the duplicate of H1 in the product detail.
Please note: the above outlook for 14 days is subject to change due to unexpected events or changes in priorities – we do not commit to delivering these outputs and outcomes. Thank you for your understanding.