Consider load more instead of pagination?

[gregjotau]

If not load more, then maybe improve the pagination "tapability". Pagination links can be difficult to tap accurately, because they often have small hit areas.

Baymard recommends "load more" button:

Avoid “Pagination” and “Endless Scrolling” on both desktop and mobile sites. Instead, use “Load More” combined with lazy-loading for category-based product lists, and use “Load More” for search results. Make sure that the “Back” button is correctly supported when navigating back-and-forth between product lists and product pages.

[gregjotau]

Advice: Place pagination links both above and below product lists, ensure that they are close to the lists, avoid surrounding the links with clutter, and ensure good color contrast between link text and the background color. Also, offer 7 or fewer links, ensure links have good sized hit areas and spacing, and improve perceived loading time when users click on pagination links by using load indicators, dimming thumbnails on the current page, or displaying skeleton screens.

[bacounts]

If not load more, then maybe improve the pagination "tapability". Pagination links can be difficult to tap accurately, because they often have small hit areas.

Baymard recommends "load more" button:

Avoid "Pagination" and "Endless Scrolling" on both desktop and mobile sites. Instead, use "Load More" combined with lazy-loading for category-based product lists and use "Load More" for search results. Make sure that the "Back" button is correctly supported when navigating back-and-forth between product lists and product pages.

I love this suggestion. It is similar to how H&M / Target does collection page navigation. It also allows for better control by the user and provides a more concrete visual queue for the user (1/8 Pages, etc.).

[gregjotau]

https://shopify.dev/api/section-rendering#:~:text=You%20can%20use,reload%20between%20pages.

"For example, you can use the Section Rendering API to paginate search results without performing a full page reload between pages."

[gregjotau]

We added infinite scroll like this:

 {%- if paginate.pages > 1 -%}
            <div class="pagination-wrapper more">
              <a href="{{ collection.url }}?page={{ paginate.current_page | plus: 1 }}" id="{{ paginate.pages }}" Class="button button--primary">{{ 'shopify.checkout.general.expand_notice_label' | t }}</a>
            </div>
            <script>
              window.onscroll = function(){
                if (document.querySelector('div.more>a').getBoundingClientRect().bottom < 3500 && document.querySelector('div.more>a').innerHTML != '{{ 'accessibility.loading' | t }}'){
                  document.querySelector('div.more>a').innerHTML = '{{ 'accessibility.loading' | t }}';
                  fetch(document.querySelector('div.more>a').href, {method: 'get', credentials: 'include'}).then(response=>response.text()).then(res=>{
                    document.querySelector('ul#product-grid').innerHTML += new DOMParser().parseFromString(res, "text/html").body.querySelector('ul#product-grid').innerHTML;
                    //window.history.replaceState('', '', document.querySelector('div.more>a').href);
                    if (document.querySelector('div.more>a').href.slice(-1) < parseInt(document.querySelector('div.more>a').id)){
                      document.querySelector('div.more>a').href = document.querySelector('div.more>a').href.slice(0, -1) + (parseInt(document.querySelector('div.more>a').href.slice(-1)) + 1);
                      document.querySelector('div.more>a').innerHTML = '{{ 'shopify.checkout.general.expand_notice_label' | t }}';
                    } else {
                      document.querySelector('div.more>a').remove();
                    }
                  });
                }
              }
            </script>

[gregjotau]

Not sure if that is a good implementation, but seems to work fine on famme.no, and is more user friendly for middle-large stores that have more than most D2C sites, but less than the bigger sites. So manageable to scroll through.

[gregjotau]

Just closing this @ludoboludo as I do not think it is top priorization for Dawn since few stores as so many products that this become a problem, but leave our "load more button" / infinite scroll as a reference:

https://github.com/gregjotau/dawn-famme/commit/c3ffb0f9910dd922aad6b717f667d4d62f3752db?fbclid=IwAR0XcuhEFSBnRGtGUPtQ0SGiCpvMKCXorXqBb5jk8S2GZgLBso8i9KOm424

[gregjotau]

https://github.com/Shopify/dawn/issues/1355#issuecomment-1039616157

Though, that is a nice implementation of pagination that can be looked at in a separate issue maybe!