If your store has lots of products for a specific collection page on your Shopify store? Instead of getting customers to navigate to multiple pages of products you can now add infinite scroll to your Shopify collections pages so customers can keep scrolling through.
Collection Page for Shopify’s infinite scroll to display products automatically when a user scrolls down without having to wait for the page to load. Users can discover content that they would not have seen otherwise thanks to infinite scrolling.
The infinite scroll feature helps to gain customer attention. It improves the user experience and makes browsing pages easier. Scrolling is easier for users than clicking (and then scrolling again) and requires less action. Infinite scroll lets users find the content they might not otherwise see. The more products your visitors see the better chances they buy from you.
On Shopify App Store has some apps that help you set up this feature for your store. But if you have the technical skills, you can do this manually.
In this video, you will learn how to add infinite scrolling and multiple product loads to Shopify collection pages. Instead of forcing customers to navigate through multiple product pages, you can now include an infinite scroll on Shopify app development collection pages, allowing customers to scroll indefinitely.
Let’s do it!!!
Editing Theme Code to Add the Infinite Scroll
Step 1: From your Shopify admin, go to Online Store > Themes.
Step2: Find the theme you want to edit, and then click Actions > Edit code
Required files: section [main-collection-product-grid.liquid] , Locales [en.default.schema.json] , Snippet [facets.liquid].
Step 3: In section directory , find a file main-collection-product-grid.liquid and paste the below code after pagination snippet
{%- if section.settings.enable_infinite_scroll -%}
<div class="page-load-status">
<p class="infinite-scroll-request">View All</p>
<p class="infinite-scroll-last">No more products to load!</p>
<p class="infinite-scroll-error">No more products!</p>
</div>
{%- endif -%}
Step 4: After that add the below code above from schema tag same main-collection-product-grid.liquid file:
{%- if section.settings.enable_infinite_scroll -%}
<script>
var isSettings = '{ "container" : ".product-grid", "path" : ".pagination__list .pagination__item--prev", "append" : ".product-grid .grid__item", "hideNav" : ".pagination", "status" : ".page-load-status" }';
</script>
<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js" defer></script>
<script src="{{ 'infinite-scroll.js' | asset_url }}" defer="defer"></script>
<style>
.page-load-status{display:none;text-align:center;margin:30px auto 10px;padding:5px;max-width:300px;background:#eee;}
.page-load-status p{margin:0;padding:5px;}
</style>
{%- endif -%}
Step 5: After that add the below schema code into the schema tag same main-collection-product-grid.liquid file:
Step 6: In locales directory, find en.default.schema.json and under main-collection-product-grid settings paste the below code:
"enable_infinite_scroll": {
"label": "Enable Infinite Scroll"
},
Step 7: In assets directory , Create a blank js file and named it infinite-scroll and add the below code:
function loadproducts(){
var isSettingsObj = JSON.parse(isSettings);
Object.keys(isSettingsObj).forEach(function(key) {
var elem = document.querySelector(isSettingsObj["container"]);
if(key == 'path' && key.length > 0){
var infScroll = new InfiniteScroll( elem, {
path: isSettingsObj.path,
append: isSettingsObj.append,
history: false,
hideNav: isSettingsObj.hideNav,
status: isSettingsObj.status
});
}
});
}
loadproducts();
document.addEventListener('click', function(e){
if (e.target != null && e.target.parentElement != null && e.target.parentElement.parentElement !=null ) {
var desktopFilter = e.target.classList.contains('collection-filters__sort') || e.target.classList.contains('filter-value') || e.target.classList.contains('facets-checkbox') || e.target.classList.contains('active-facets__button-inner');
var mobileFilter = e.target.classList.contains('select__select') || e.target.classList.contains('mobile-facets__checkbox');
var desktopFilterBtn = e.target.parentElement.classList.contains('underlined-link') && e.target.parentElement.parentElement.classList.contains('active-facets__button-wrapper');
var mobileFilterBtn = e.target.classList.contains('underlined-link') && e.target.parentElement.classList.contains('mobile-facets__clear-wrapper');
if(desktopFilter || mobileFilter || desktopFilterBtn || mobileFilterBtn){
setTimeout(function (){
loadproducts();
},2000);
}
}
});Step 8: In facets.liquid Add these classes facets-checkbox and filter-value to the elements I added in facets.liquid file:
{% comment %}
Renders facets (filtering and sorting)
Accepts:
- results: {Object} Collection or Search object
- enable_filtering: {Boolean} Show filtering when true
- enable_sorting: {Boolean} Show sorting when true
- filter_type: {String} Type of filter
Usage:
{% render 'facets', results: collection, enable_filtering: true, enable_sorting: true, filter_type: 'vertical' %}
{% endcomment %}
{{ 'component-show-more.css' | asset_url | stylesheet_tag }}
{%- liquid
assign sort_by = results.sort_by | default: results.default_sort_by
assign total_active_values = 0
if results.url
assign results_url = results.url
else
assign terms = results.terms | escape
assign results_url = '?q=' | append: terms | append: '&options%5Bprefix%5D=last&sort_by=' | append: sort_by
endif
-%}
<div class="facets-container{% if filter_type == 'drawer' %} facets-container-drawer{% endif %}">
{%- if filter_type == 'vertical' or filter_type == 'horizontal' -%}
<facet-filters-form class="facets small-hide">
<form
id="FacetFiltersForm"
class="{% if filter_type == 'horizontal' %}facets__form{% else %}facets__form-vertical{% endif %}"
>
{%- if results.terms -%}
<input type="hidden" name="q" value="{{ results.terms | escape }}">
<input name="options[prefix]" type="hidden" value="last">
{%- endif -%}
{% if enable_filtering %}
{% comment %} Heading is the first tabbable element on filter type horizontal {% endcomment %}
<div
id="FacetsWrapperDesktop"
{% if filter_type == 'horizontal' %}
class="facets__wrapper"
{% endif %}
>
{%- if filter_type == 'horizontal' and results.filters != empty -%}
<h2 class="facets__heading caption-large text-body" id="verticalTitle" tabindex="-1">
{{ 'products.facets.filter_by_label' | t }}
</h2>
{%- endif -%}
{% comment %} Pills are right below the title for filter type vertical {% endcomment %}
{%- if filter_type == 'vertical' -%}
<div class="active-facets active-facets-desktop">
<div class="active-facets-vertical-filter">
{%- unless results.filters == empty -%}
<h2
class="facets__heading facets__heading--vertical caption-large text-body"
id="verticalTitle"
tabindex="-1"
>
{{ 'products.facets.filter_by_label' | t }}
</h2>
{%- endunless -%}
<facet-remove class="active-facets__button-wrapper">
<a href="{{ results_url }}" class="active-facets__button-remove underlined-link">
<span>{{ 'products.facets.clear_all' | t }}</span>
</a>
</facet-remove>
</div>
{%- for filter in results.filters -%}
{%- for value in filter.active_values -%}
<facet-remove>
<a href="{{ value.url_to_remove }}" class="active-facets__button active-facets__button--light">
<span class="active-facets__button-inner button button--tertiary">
{{ filter.label }}: {{ value.label | escape }}
{% render 'icon-close-small' %}
<span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
</span>
</a>
</facet-remove>
{%- endfor -%}
{% if filter.type == 'price_range' %}
{%- if filter.min_value.value != null or filter.max_value.value != null -%}
<facet-remove>
<a href="{{ filter.url_to_remove }}" class="active-facets__button active-facets__button--light">
<span class="active-facets__button-inner button button--tertiary">
{%- if filter.min_value.value -%}
{{ filter.min_value.value | money }}
{%- else -%}
{{ 0 | money }}
{%- endif -%}
-
{%- if filter.max_value.value -%}
{{ filter.max_value.value | money }}
{%- else -%}
{{ filter.range_max | money }}
{%- endif -%}
{% render 'icon-close-small' %}
<span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
</span>
</a>
</facet-remove>
{%- endif -%}
{% endif %}
{%- endfor -%}
</div>
{%- endif -%}
<script src="{{ 'show-more.js' | asset_url }}" defer="defer"></script>
{% comment %} Filters for both horizontal and vertical filter {% endcomment %}
{%- for filter in results.filters -%}
{%- assign total_active_values = total_active_values | plus: filter.active_values.size -%}
{% case filter.type %}
{% when 'boolean', 'list' %}
<details
id="Details-{{ forloop.index }}-{{ section.id }}"
class="{% if filter_type == 'horizontal' %}disclosure-has-popup facets__disclosure{% else %} facets__disclosure-vertical{% endif %} js-filter"
data-index="{{ forloop.index }}"
{% if filter_type == 'vertical' and forloop.index == 1 %}
open
{% endif %}
>
<summary
class="facets__summary caption-large focus-offset"
aria-label="{{ filter.label }} ({{ 'products.facets.filters_selected.one' | t: count: filter.active_values.size }})"
>
<div>
<span>
{{- filter.label | escape }}
{%- if filter_type == 'vertical' -%}
<span class="facets__selected no-js-hidden{% if filter.active_values.size == 0 %} hidden{% endif %}">
({{ filter.active_values.size }})</span
>
{%- endif -%}
</span>
{% render 'icon-caret' %}
</div>
</summary>
<div
id="Facet-{{ forloop.index }}-{{ section.id }}"
class="parent-display {% if filter_type == 'horizontal' %}facets__display{% else %}facets__display-vertical{% endif %}"
>
{%- if filter_type != 'vertical' -%}
<div class="facets__header">
<span class="facets__selected no-js-hidden">
{{- 'products.facets.filters_selected' | t: count: filter.active_values.size -}}
</span>
<facet-remove>
<a href="{{ filter.url_to_remove }}" class="facets__reset link underlined-link">
{{ 'products.facets.reset' | t }}
</a>
</facet-remove>
</div>
{%- endif -%}
<fieldset class="facets-wrap parent-wrap {% if filter_type == 'vertical' %} facets-wrap-vertical{% endif %}">
<legend class="visually-hidden">{{ filter.label | escape }}</legend>
<ul
class="{% if filter_type != 'vertical' %} facets__list{% endif %} list-unstyled no-js-hidden"
role="list"
>
{%- for value in filter.values -%}
<li class="list-menu__item facets__item{% if forloop.index > 10 and filter_type == 'vertical' %} show-more-item hidden{% endif %}">
<label
for="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}"
class="facet-checkbox{% if value.count == 0 and value.active == false %} facet-checkbox--disabled{% endif %}"
>
<input
type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value }}"
id="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}"
{% if value.active %}
checked
{% endif %}
{% if value.count == 0 and value.active == false %}
disabled
{% endif %}
class="facets-checkbox"
>
<svg
width="1.6rem"
height="1.6rem"
viewBox="0 0 16 16"
aria-hidden="true"
focusable="false"
>
<rect width="16" height="16" stroke="currentColor" fill="none" stroke-width="1"></rect>
</svg>
<svg
aria-hidden="true"
class="icon icon-checkmark"
width="1.1rem"
height="0.7rem"
viewBox="0 0 11 7"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M1.5 3.5L2.83333 4.75L4.16667 6L9.5 1"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<span aria-hidden="true" class="filter-value">{{ value.label | escape }} ({{ value.count }})</span>
<span class="visually-hidden">
{{- value.label | escape }} (
{%- if value.count == 1 -%}
{{- 'products.facets.product_count_simple.one' | t: count: value.count -}}
{%- else -%}
{{- 'products.facets.product_count_simple.other' | t: count: value.count -}}
{%- endif -%}
)</span
>
</label>
</li>
{%- endfor -%}
</ul>
{% comment %} No show more for no JS {% endcomment %}
<ul
class="{% if filter_type != 'vertical' %} facets__list{% endif %} no-js-list list-unstyled no-js"
role="list"
>
{%- for value in filter.values -%}
<li class="list-menu__item facets__item">
<label
for="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}-no-js"
class="facet-checkbox{% if value.count == 0 and value.active == false %} facet-checkbox--disabled{% endif %}"
>
<input
type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value }}"
id="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}-no-js"
{% if value.active %}
checked
{% endif %}
{% if value.count == 0 and value.active == false %}
disabled
{% endif %}
>
<svg
width="1.6rem"
height="1.6rem"
viewBox="0 0 16 16"
aria-hidden="true"
focusable="false"
>
<rect width="16" height="16" stroke="currentColor" fill="none" stroke-width="1"></rect>
</svg>
<svg
aria-hidden="true"
class="icon icon-checkmark"
width="1.1rem"
height="0.7rem"
viewBox="0 0 11 7"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M1.5 3.5L2.83333 4.75L4.16667 6L9.5 1"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<span aria-hidden="true">{{ value.label | escape }} ({{ value.count }})</span>
<span class="visually-hidden">
{{- value.label | escape }} (
{%- if value.count == 1 -%}
{{- 'products.facets.product_count_simple.one' | t: count: value.count -}}
{%- else -%}
{{- 'products.facets.product_count_simple.other' | t: count: value.count -}}
{%- endif -%}
)</span
>
</label>
</li>
{%- endfor -%}
</ul>
</fieldset>
{%- if filter.values.size > 10 and filter_type == 'vertical' -%}
<show-more-button>
<button
class="button-show-more link underlined-link no-js-hidden"
id="Show-More-{{ forloop.index }}-{{ section.id }}"
type="button"
>
<span class="label-show-more label-text"
><span aria-hidden="true">+ </span>{{ 'products.facets.show_more' | t -}}
</span>
<span class="label-show-less label-text hidden"
><span aria-hidden="true">- </span>{{ 'products.facets.show_less' | t -}}
</span>
</button>
</show-more-button>
{%- endif %}
</div>
</details>
{% when 'price_range' %}
{% liquid
assign currencies_using_comma_decimals = 'ANG,ARS,BRL,BYN,BYR,CLF,CLP,COP,CRC,CZK,DKK,EUR,HRK,HUF,IDR,ISK,MZN,NOK,PLN,RON,RUB,SEK,TRY,UYU,VES,VND' | split: ','
assign uses_comma_decimals = false
if currencies_using_comma_decimals contains cart.currency.iso_code
assign uses_comma_decimals = true
endif
%}
<details
id="Details-{{ forloop.index }}-{{ section.id }}"
class="{% if filter_type == 'horizontal' %}disclosure-has-popup facets__disclosure{% else %} facets__disclosure-vertical{% endif %} js-filter"
data-index="{{ forloop.index }}"
{% if filter_type == 'vertical' and forloop.index == 1 %}
open
{% endif %}
>
<summary class="facets__summary caption-large focus-offset">
<div>
<span>{{ filter.label | escape }}</span>
{% render 'icon-caret' %}
</div>
</summary>
<div
id="Facet-{{ forloop.index }}-{{ section.id }}"
class="{% if filter_type == 'horizontal' %}facets__display{% else %}facets__display-vertical{% endif %}"
>
<div class="{% if filter_type == 'horizontal' %}facets__header{% else %}facets__header-vertical{% endif %}">
{%- assign max_price_amount = filter.range_max | money | strip_html | escape -%}
<span class="facets__selected">
{{- 'products.facets.max_price' | t: price: max_price_amount -}}
</span>
{%- if filter_type != 'vertical' -%}
<facet-remove>
<a href="{{ filter.url_to_remove }}" class="facets__reset link underlined-link">
{{ 'products.facets.reset' | t }}
</a>
</facet-remove>
{%- endif -%}
</div>
<price-range class="facets__price">
<span class="field-currency">{{ cart.currency.symbol }}</span>
<div class="field">
<input
class="field__input"
name="{{ filter.min_value.param_name }}"
id="Filter-{{ filter.label | escape }}-GTE"
{%- if filter.min_value.value -%}
{%- if uses_comma_decimals -%}
value="{{ filter.min_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
{%- else -%}
value="{{ filter.min_value.value | money_without_currency | replace: ',', '' }}"
{%- endif %}
{%- endif -%}
type="number"
placeholder="0"
min="0"
{%- if uses_comma_decimals -%}
max="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
{%- else -%}
max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
{% endif %}
>
<label class="field__label" for="Filter-{{ filter.label | escape }}-GTE">
{{- 'products.facets.from' | t -}}
</label>
</div>
{%- if filter_type != 'vertical' -%}
<span class="field-currency">{{ cart.currency.symbol }}</span>
{%- endif -%}
<div class="field">
<input
class="field__input"
name="{{ filter.max_value.param_name }}"
id="Filter-{{ filter.label | escape }}-LTE"
{%- if filter.max_value.value -%}
{%- if uses_comma_decimals -%}
value="{{ filter.max_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
{%- else -%}
value="{{ filter.max_value.value | money_without_currency | replace: ',', '' }}"
{%- endif %}
{%- endif -%}
type="number"
min="0"
{%- if uses_comma_decimals -%}
placeholder="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
max="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
{%- else -%}
placeholder="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
{% endif %}
>
<label class="field__label" for="Filter-{{ filter.label | escape }}-LTE">
{{- 'products.facets.to' | t -}}
</label>
</div>
</price-range>
</div>
</details>
{% endcase %}
{%- endfor -%}
<noscript>
<button type="submit" class="facets__button-no-js button button--secondary">
{{ 'products.facets.filter_button' | t }}
</button>
</noscript>
</div>
{% comment %} Pills after filtes on filter type horizontal {% endcomment %}
{%- if filter_type == 'horizontal' -%}
<div class="active-facets active-facets-desktop">
{%- for filter in results.filters -%}
{%- for value in filter.active_values -%}
<facet-remove>
<a href="{{ value.url_to_remove }}" class="active-facets__button active-facets__button--light">
<span class="active-facets__button-inner button button--tertiary">
{{ filter.label }}: {{ value.label | escape }}
{% render 'icon-close-small' %}
<span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
</span>
</a>
</facet-remove>
{%- endfor -%}
{% if filter.type == 'price_range' %}
{%- if filter.min_value.value != null or filter.max_value.value != null -%}
<facet-remove>
<a href="{{ filter.url_to_remove }}" class="active-facets__button active-facets__button--light">
<span class="active-facets__button-inner button button--tertiary">
{%- if filter.min_value.value -%}
{{ filter.min_value.value | money }}
{%- else -%}
{{ 0 | money }}
{%- endif -%}
-
{%- if filter.max_value.value -%}
{{ filter.max_value.value | money }}
{%- else -%}
{{ filter.range_max | money }}
{%- endif -%}
{% render 'icon-close-small' %}
<span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
</span>
</a>
</facet-remove>
{%- endif -%}
{% endif %}
{%- endfor -%}
<facet-remove class="active-facets__button-wrapper">
<a href="{{ results_url }}" class="active-facets__button-remove underlined-link">
<span>{{ 'products.facets.clear_all' | t }}</span>
</a>
</facet-remove>
</div>
{%- endif -%}
{% endif %}
{% if results.current_vendor or results.current_type %}
<input type="hidden" name="q" value="{{ results.current_vendor }}{{ results.current_type }}">
{% endif %}
{%- if filter_type == 'horizontal' -%}
{% comment %} Sorting and product count are the last elements when filter type is horizontal {% endcomment %}
{%- if enable_sorting -%}
<div class="facet-filters sorting caption">
<div class="facet-filters__field">
<h2 class="facet-filters__label caption-large text-body">
<label for="SortBy">{{ 'products.facets.sort_by_label' | t }}</label>
</h2>
<div class="select">
{%- assign sort_by = results.sort_by | default: results.default_sort_by -%}
<select
name="sort_by"
class="facet-filters__sort select__select caption-large"
id="SortBy"
aria-describedby="a11y-refresh-page-message"
>
{%- for option in results.sort_options -%}
<option
value="{{ option.value | escape }}"
{% if option.value == sort_by %}
selected="selected"
{% endif %}
>
{{ option.name | escape }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
<noscript>
<button type="submit" class="facets__button-no-js button button--secondary">
{{ 'products.facets.sort_button' | t }}
</button>
</noscript>
</div>
{%- endif -%}
<div class="product-count light" role="status">
<h2 class="product-count__text text-body">
<span id="ProductCountDesktop">
{%- if results.results_count -%}
{{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }}
{%- elsif results.products_count == results.all_products_count -%}
{{ 'products.facets.product_count_simple' | t: count: results.products_count }}
{%- else -%}
{{
'products.facets.product_count'
| t: product_count: results.products_count, count: results.all_products_count
}}
{%- endif -%}
</span>
</h2>
<div class="loading-overlay__spinner">
<svg
aria-hidden="true"
focusable="false"
class="spinner"
viewBox="0 0 66 66"
xmlns="http://www.w3.org/2000/svg"
>
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
{%- endif -%}
</form>
</facet-filters-form>
{% comment %} Sorting for vertical filter are grouped with filter when no JS{% endcomment %}
{%- if enable_sorting and filter_type == 'vertical' -%}
<facet-filters-form class="small-hide">
<form class="no-js">
<div class="facet-filters sorting caption">
<div class="facet-filters__field">
<h2 class="facet-filters__label caption-large text-body">
<label for="SortBy">{{ 'products.facets.sort_by_label' | t }}</label>
</h2>
<div class="select">
{%- assign sort_by = results.sort_by | default: results.default_sort_by -%}
<select
name="sort_by"
class="facet-filters__sort select__select caption-large"
id="SortBy"
aria-describedby="a11y-refresh-page-message"
>
{%- for option in results.sort_options -%}
<option
value="{{ option.value | escape }}"
{% if option.value == sort_by %}
selected="selected"
{% endif %}
>
{{ option.name | escape }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
<noscript>
<button type="submit" class="facets__button-no-js button button--secondary">
{{ 'products.facets.sort_button' | t }}
</button>
</noscript>
</div>
{% if results.current_vendor or results.current_type %}
<input type="hidden" name="q" value="{{ results.current_vendor }}{{ results.current_type }}">
{% endif %}
{%- if results.terms -%}
<input type="hidden" name="q" value="{{ results.terms | escape }}">
<input name="options[prefix]" type="hidden" value="last">
{%- endif -%}
</form>
</facet-filters-form>
{%- endif -%}
{%- endif -%}
{% comment %} Drawer and mobile filter {% endcomment %}
<menu-drawer
class="mobile-facets__wrapper{% if filter_type == 'horizontal' or filter_type == 'vertical' %} medium-hide large-up-hide{% endif %}"
data-breakpoint="mobile"
>
<details class="mobile-facets__disclosure disclosure-has-popup">
<summary class="mobile-facets__open-wrapper focus-offset">
<span class="mobile-facets__open{% if filter_type == 'drawer' and enable_filtering == false %} medium-hide large-up-hide{% endif %}">
{% render 'icon-filter' %}
<span class="mobile-facets__open-label button-label medium-hide large-up-hide">
{%- if enable_filtering and enable_sorting -%}
{{ 'products.facets.filter_and_sort' | t }}
{%- elsif enable_filtering -%}
{{ 'products.facets.filter_button' | t }}
{%- elsif enable_sorting -%}
{{ 'products.facets.sort_button' | t }}
{%- endif -%}
</span>
<span class="mobile-facets__open-label button-label small-hide">
{%- if enable_filtering -%}
{{ 'products.facets.filter_button' | t }}
{%- endif -%}
</span>
</span>
<span tabindex="0" class="mobile-facets__close mobile-facets__close--no-js">{%- render 'icon-close' -%}</span>
</summary>
<facet-filters-form>
<form id="FacetFiltersFormMobile" class="mobile-facets">
<div class="mobile-facets__inner gradient">
<div class="mobile-facets__header">
<div class="mobile-facets__header-inner">
<h2 class="mobile-facets__heading medium-hide large-up-hide">
{%- if enable_filtering and enable_sorting -%}
{{ 'products.facets.filter_and_sort' | t }}
{%- elsif enable_filtering -%}
{{ 'products.facets.filter_button' | t }}
{%- elsif enable_sorting -%}
{{ 'products.facets.sort_button' | t }}
{%- endif -%}
</h2>
<h2 class="mobile-facets__heading small-hide">
{%- if enable_filtering -%}
{{ 'products.facets.filter_button' | t }}
{%- endif -%}
</h2>
<p class="mobile-facets__count">
{%- if results.results_count -%}
{{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }}
{%- elsif results.products_count == results.all_products_count -%}
{{ 'products.facets.product_count_simple' | t: count: results.products_count }}
{%- else -%}
{{
'products.facets.product_count'
| t: product_count: results.products_count, count: results.all_products_count
}}
{%- endif -%}
</p>
</div>
</div>
<div class="mobile-facets__main has-submenu gradient">
{%- if enable_filtering -%}
{%- for filter in results.filters -%}
{% case filter.type %}
{% when 'boolean', 'list' %}
<details
id="Details-Mobile-{{ forloop.index }}-{{ section.id }}"
class="mobile-facets__details js-filter"
data-index="mobile-{{ forloop.index }}"
>
<summary class="mobile-facets__summary focus-inset">
<div>
<span>{{ filter.label | escape }}</span>
<span class="mobile-facets__arrow no-js-hidden">{% render 'icon-arrow' %}</span>
<noscript>{% render 'icon-caret' %}</noscript>
</div>
</summary>
<div
id="FacetMobile-{{ forloop.index }}-{{ section.id }}"
class="mobile-facets__submenu gradient"
>
<button
class="mobile-facets__close-button link link--text focus-inset"
aria-expanded="true"
type="button"
>
{% render 'icon-arrow' %}
{{ filter.label | escape }}
</button>
<ul class="mobile-facets__list list-unstyled" role="list">
{%- for value in filter.values -%}
<li class="mobile-facets__item list-menu__item">
<label
for="Filter-{{ filter.param_name | escape }}-mobile-{{ forloop.index }}"
class="mobile-facets__label{% if value.count == 0 and value.active == false %} mobile-facets__label--disabled{% endif %}"
>
<input
class="mobile-facets__checkbox"
type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value }}"
id="Filter-{{ filter.param_name | escape }}-mobile-{{ forloop.index }}"
{% if value.active %}
checked
{% endif %}
{% if value.count == 0 and value.active == false %}
disabled
{% endif %}
>
<span class="mobile-facets__highlight"></span>
<svg
width="1.6rem"
height="1.6rem"
viewBox="0 0 16 16"
aria-hidden="true"
focusable="false"
>
<rect width="16" height="16" stroke="currentColor" fill="none" stroke-width="1"></rect>
</svg>
<svg
aria-hidden="true"
class="icon icon-checkmark"
width="1.1rem"
height="0.7rem"
viewBox="0 0 11 7"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M1.5 3.5L2.83333 4.75L4.16667 6L9.5 1" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span aria-hidden="true">{{ value.label | escape }} ({{ value.count }})</span>
<span class="visually-hidden">
{{- value.label | escape }} (
{%- if value.count == '1' -%}
{{- 'products.facets.product_count_simple.one' | t: count: value.count -}}
{%- else -%}
{{- 'products.facets.product_count_simple.other' | t: count: value.count -}}
{%- endif -%}
)</span
>
</label>
</li>
{%- endfor -%}
</ul>
<div class="no-js-hidden mobile-facets__footer gradient">
<facet-remove class="mobile-facets__clear-wrapper">
<a href="{{ results_url }}" class="mobile-facets__clear underlined-link">
{{- 'products.facets.clear' | t -}}
</a>
</facet-remove>
<button
type="button"
class="no-js-hidden button button--primary"
onclick="this.closest('.mobile-facets__wrapper').querySelector('summary').click()"
>
{{ 'products.facets.apply' | t }}
</button>
<noscript
><button class="button button--primary">
{{ 'products.facets.apply' | t }}
</button></noscript
>
</div>
</div>
</details>
{% when 'price_range' %}
<details
id="Details-Mobile-{{ forloop.index }}-{{ section.id }}"
class="mobile-facets__details js-filter"
data-index="mobile-{{ forloop.index }}"
>
<summary class="mobile-facets__summary focus-inset">
<div>
<span>{{ filter.label | escape }}</span>
<span class="mobile-facets__arrow no-js-hidden">{% render 'icon-arrow' %}</span>
<noscript>{% render 'icon-caret' %}</noscript>
</div>
</summary>
<div
id="FacetMobile-{{ forloop.index }}-{{ section.id }}"
class="mobile-facets__submenu gradient"
>
<button
class="mobile-facets__close-button link link--text focus-inset"
aria-expanded="true"
type="button"
>
{% render 'icon-arrow' %}
{{ filter.label | escape }}
</button>
{%- assign max_price_amount = filter.range_max | money | strip_html | escape -%}
<p class="mobile-facets__info">
{{ 'products.facets.max_price' | t: price: max_price_amount }}
</p>
<price-range class="facets__price">
<span class="field-currency">{{ cart.currency.symbol }}</span>
<div class="field">
<input
class="field__input"
name="{{ filter.min_value.param_name }}"
id="Mobile-Filter-{{ filter.label | escape }}-GTE"
{%- if filter.min_value.value -%}
{%- if uses_comma_decimals -%}
value="{{ filter.min_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
{%- else -%}
value="{{ filter.min_value.value | money_without_currency | replace: ',', '' }}"
{%- endif %}
{%- endif -%}
type="number"
placeholder="0"
min="0"
inputmode="decimal"
{%- if uses_comma_decimals -%}
max="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
{%- else -%}
max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
{% endif %}
>
<label class="field__label" for="Mobile-Filter-{{ filter.label | escape }}-GTE">
{{- 'products.facets.from' | t -}}
</label>
</div>
<span class="field-currency">{{ cart.currency.symbol }}</span>
<div class="field">
<input
class="field__input"
name="{{ filter.max_value.param_name }}"
id="Mobile-Filter-{{ filter.label | escape }}-LTE"
{%- if filter.max_value.value -%}
{%- if uses_comma_decimals -%}
value="{{ filter.max_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
{%- else -%}
value="{{ filter.max_value.value | money_without_currency | replace: ',', '' }}"
{%- endif %}
{%- endif -%}
type="number"
min="0"
inputmode="decimal"
{%- if uses_comma_decimals -%}
placeholder="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
max="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
{%- else -%}
placeholder="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
{% endif %}
>
<label class="field__label" for="Mobile-Filter-{{ filter.label | escape }}-LTE">
{{- 'products.facets.to' | t -}}
</label>
</div>
</price-range>
<div class="no-js-hidden mobile-facets__footer">
<facet-remove class="mobile-facets__clear-wrapper">
<a href="{{ results_url }}" class="mobile-facets__clear underlined-link">
{{- 'products.facets.clear' | t -}}
</a>
</facet-remove>
<button
type="button"
class="no-js-hidden button button--primary"
onclick="this.closest('.mobile-facets__wrapper').querySelector('summary').click()"
>
{{ 'products.facets.apply' | t }}
</button>
<noscript
><button class="button button--primary">
{{ 'products.facets.apply' | t }}
</button></noscript
>
</div>
</div>
</details>
{% endcase %}
{%- endfor -%}
{%- endif -%}
{%- if enable_sorting -%}
<div
class="mobile-facets__details js-filter{% if filter_type == 'drawer' %} medium-hide large-up-hide{% endif %}"
data-index="mobile-{{ forloop.index }}"
>
<div class="mobile-facets__summary">
<div class="mobile-facets__sort">
<label for="SortBy-mobile">{{ 'products.facets.sort_by_label' | t }}</label>
<div class="select">
<select
name="sort_by"
class="select__select"
id="SortBy-mobile"
aria-describedby="a11y-refresh-page-message"
>
{%- for option in results.sort_options -%}
<option
value="{{ option.value | escape }}"
{% if option.value == sort_by %}
selected="selected"
{% endif %}
>
{{ option.name | escape }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
</div>
</div>
{%- endif -%}
<div class="mobile-facets__footer">
<facet-remove class="mobile-facets__clear-wrapper">
<a href="{{ results_url }}" class="mobile-facets__clear underlined-link">
{{- 'products.facets.clear_all' | t -}}
</a>
</facet-remove>
<button
type="button"
class="no-js-hidden button button--primary"
onclick="this.closest('.mobile-facets__wrapper').querySelector('summary').click()"
>
{{ 'products.facets.apply' | t }}
</button>
<noscript
><button class="button button--primary">{{ 'products.facets.apply' | t }}</button></noscript
>
</div>
</div>
{% if results.current_vendor or results.current_type %}
<input type="hidden" name="q" value="{{ results.current_vendor }}{{ results.current_type }}">
{% endif %}
{%- if results.terms -%}
<input type="hidden" name="q" value="{{ results.terms | escape }}">
<input name="options[prefix]" type="hidden" value="last">
{%- endif -%}
</div>
</form>
</facet-filters-form>
</details>
</menu-drawer>
<div class="active-facets active-facets-mobile medium-hide large-up-hide">
{%- for filter in results.filters -%}
{%- for value in filter.active_values -%}
<facet-remove>
<a href="{{ value.url_to_remove }}" class="active-facets__button active-facets__button--light">
<span class="active-facets__button-inner button button--tertiary">
{{ filter.label }}: {{ value.label | escape }}
{% render 'icon-close-small' %}
<span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
</span>
</a>
</facet-remove>
{%- endfor -%}
{%- if filter.type == 'price_range' -%}
{%- if filter.min_value.value != null or filter.max_value.value != null -%}
<facet-remove>
<a href="{{ filter.url_to_remove }}" class="active-facets__button active-facets__button--light">
<span class="active-facets__button-inner button button--tertiary">
{%- if filter.min_value.value -%}
{{ filter.min_value.value | money }}
{%- else -%}
{{ 0 | money }}
{%- endif -%}
-
{%- if filter.max_value.value -%}
{{ filter.max_value.value | money }}
{%- else -%}
{{ filter.range_max | money }}
{%- endif -%}
{% render 'icon-close-small' %}
<span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
</span>
</a>
</facet-remove>
{%- endif -%}
{%- endif -%}
{%- endfor -%}
<facet-remove class="active-facets__button-wrapper">
<a href="{{ results_url }}" class="active-facets__button-remove underlined-link">
<span>{{ 'products.facets.clear_all' | t }}</span>
</a>
</facet-remove>
</div>
{% comment %} Sort, product count and filter pills at the end when filter is type of Drawer for the correct tabbing order {% endcomment %}
{%- if enable_sorting and filter_type == 'drawer' -%}
<facet-filters-form class="facets small-hide">
<form id="FacetSortDrawerForm" class="facets__form">
<div class="facet-filters sorting caption small-hide">
<div class="facet-filters__field">
<h2 class="facet-filters__label caption-large text-body">
<label for="SortBy">{{ 'products.facets.sort_by_label' | t }}</label>
</h2>
<div class="select">
{%- assign sort_by = results.sort_by | default: results.default_sort_by -%}
<select
name="sort_by"
class="facet-filters__sort select__select caption-large"
id="SortBy"
aria-describedby="a11y-refresh-page-message"
>
{%- for option in results.sort_options -%}
<option
value="{{ option.value | escape }}"
{% if option.value == sort_by %}
selected="selected"
{% endif %}
>
{{ option.name | escape }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
<noscript>
<button type="submit" class="facets__button-no-js button button--secondary">
{{ 'products.facets.sort_button' | t }}
</button>
</noscript>
</div>
{% if results.current_vendor or results.current_type %}
<input type="hidden" name="q" value="{{ results.current_vendor }}{{ results.current_type }}">
{% endif %}
{%- if results.terms -%}
<input type="hidden" name="q" value="{{ results.terms | escape }}">
<input name="options[prefix]" type="hidden" value="last">
{%- endif -%}
</form>
</facet-filters-form>
{%- endif -%}
<div
class="product-count light{% if filter_type == 'vertical' or filter_type == 'horizontal' %} medium-hide large-up-hide{% endif %}"
role="status"
>
<h2 class="product-count__text text-body">
<span id="ProductCount">
{%- if results.results_count -%}
{{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }}
{%- elsif results.products_count == results.all_products_count -%}
{{ 'products.facets.product_count_simple' | t: count: results.products_count }}
{%- else -%}
{{
'products.facets.product_count'
| t: product_count: results.products_count, count: results.all_products_count
}}
{%- endif -%}
</span>
</h2>
<div class="loading-overlay__spinner">
<svg
aria-hidden="true"
focusable="false"
class="spinner"
viewBox="0 0 66 66"
xmlns="http://www.w3.org/2000/svg"
>
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
{%- if filter_type == 'drawer' -%}
<facet-filters-form class="facets facets-pill small-hide">
<form id="FacetFiltersPillsForm" class="facets__form">
<div class="active-facets active-facets-desktop">
{%- for filter in results.filters -%}
{%- for value in filter.active_values -%}
<facet-remove>
<a href="{{ value.url_to_remove }}" class="active-facets__button active-facets__button--light">
<span class="active-facets__button-inner button button--tertiary">
{{ filter.label }}: {{ value.label | escape }}
{% render 'icon-close-small' %}
<span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
</span>
</a>
</facet-remove>
{%- endfor -%}
{%- if filter.type == 'price_range' -%}
{%- if filter.min_value.value != null or filter.max_value.value != null -%}
<facet-remove>
<a href="{{ filter.url_to_remove }}" class="active-facets__button active-facets__button--light">
<span class="active-facets__button-inner button button--tertiary">
{%- if filter.min_value.value -%}
{{ filter.min_value.value | money }}
{%- else -%}
{{ 0 | money }}
{%- endif -%}
-
{%- if filter.max_value.value -%}
{{ filter.max_value.value | money }}
{%- else -%}
{{ filter.range_max | money }}
{%- endif -%}
{% render 'icon-close-small' %}
<span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
</span>
</a>
</facet-remove>
{%- endif -%}
{%- endif -%}
{%- endfor -%}
<facet-remove class="active-facets__button-wrapper">
<a href="{{ results_url }}" class="active-facets__button-remove underlined-link">
<span>{{ 'products.facets.clear_all' | t }}</span>
</a>
</facet-remove>
</div>
</form>
</facet-filters-form>
{%- endif -%}
</div>
Congrats, You’ve completed the coding parts.
Note: Go to customization and select the collection template and enable the infinite scroll feature from the product grid section then it will work.
How can I make Shopify collection pages have infinite scroll pagination?
It can now be found under Themes>customization>collection pages page section settings. To use this feature, simply check the enabled infinite scroll box.
How do I display more products on the Shopify collection page?
Choose Collection pages from the drop-down menu at the top of the page, or from the Templates menu on mobile. Select Collection pages or Collection. If your theme allows you to change the number of products that appear on collection pages, adjust the settings to meet your needs. Save the changes.
Is there a collection limit in Shopify?
On Shopify, you can have an unlimited number of collections. This is fantastic news for shop owners who want to organize their products in various ways. Shopify allows you to create collections based on product type, season, or any other criteria you can think of.
How can I stop the endless scrolling?
To control infinite scrolling within your web browser, use a browser plugin. To avoid the extra memory usage, you can disable all JavaScript in your system settings. Be aware that disabling JavaScript may prevent other websites from functioning properly.
I put this in prestige and is not work, can u help me?
We have updated the code. Please check!
Hi, tried this and didn’t work. Can you please assist?
Hey Anna,
We have updated the code you can test it now. If you still face any issue, please let us know.
This is really cool – unfortunately the current theme I’m using has a collection.json template. Any idea how this would be written in?
Hi,
This looks great. Is there a way to implement it with 2.0 themes?
Yes please check the updated version of code.