How can I remove '/collections' from the URL in the Dawn theme?

[benorama89]

Hi everyone,

Im using the dawn theme.

Im trying to work out how to remove /collections from the url for seo reasons.

Ive seen a few tutorials which are for different themes but cant seem to work it out for dawn.

[Moeed]

Step 1: Back up your theme!

First, you’ll want to take a backup copy of your theme. Just in case.

Step 2: Find the code to remove

For this example, I'm using an old version of Turbo (6.2) by Out of the Sandbox.

In the Shopify admin, go to Online Store -> Themes -> select the ... -> Edit Code. Search your theme files for within: collection.

This part can be a bit tricky to locate because Shopify doesn't have a theme-wide search. So you have to go file by file. For this version of Turbo, the code I need to edit is in the snippets/product-details.liquid file and the snippets/product-thumbnail.liquid file.

Since each theme is different you may need to find the file for the product-grid or product-loop. If you still aren't sure where this code is, you can search through each snippet file. There are Chrome extensions to search through your Shopify theme files, but I avoid using Chrome which is a story for another day.

Once you've found the within: collection we want to remove only that part.

We'll end up with something like this:

Before:

{{ product.url | within: collection }}

After:

{{ product.url }}

You may need to search a few times for that line of code to make sure the | within: collection is removed for multiple spots. Many themes have the same piece of code duplicated.

Save the files you've edited and check on your results.

Step 3: Test the pages

Anytime you edit the theme files, you'll want to check right away to make sure you didn't break anything.

Shopify caches pages LIKE CRAZY so it may take a few minutes for your changes to reflect on the live site.

To test your changes, select a collection and navigate to a random product. In your URL bar, it should not have the collection or collection name.

Step 4: Create redirects

Assuming your site is live and you've already had your collection base product URLs indexed, don't forget to create URL redirects. Forgetting to do this important piece will cause potential customers to land on an error page.

[benorama89]

Ive searched all my snippets folder for within:

Unfortunately i think Dawn theme may use a different line of code. Nothing at all.

Heres product-media.liquid and product-thumbnail liquid. Ive also put pagination in here as this to me would make the most sense, hoping someone can see the code in here.

Product Media

{% comment %}
Renders product media

Accepts:
- media: {Object} Product Media object
- loop: {Boolean} Enable video looping (optional)
- variant_image: {Boolean} The media associated with a variant

Usage:
{% render 'product-media',
media: media,
loop: section.settings.enable_video_looping,
variant_image: true
%}
{% endcomment %}

{%- if media.media_type == 'image' -%}
<img
class="global-media-settings global-media-settings--no-shadow"
srcset="{%- if media.preview_image.width >= 550 -%}{{ media.preview_image | image_url: width: 550 }} 550w,{%- endif -%}
{%- if media.preview_image.width >= 1100 -%}{{ media.preview_image | image_url: width: 1100 }} 1100w,{%- endif -%}
{%- if media.preview_image.width >= 1445 -%}{{ media.preview_image | image_url: width: 1445 }} 1445w,{%- endif -%}
{%- if media.preview_image.width >= 1680 -%}{{ media.preview_image | image_url: width: 1680 }} 1680w,{%- endif -%}
{%- if media.preview_image.width >= 2048 -%}{{ media.preview_image | image_url: width: 2048 }} 2048w,{%- endif -%}
{%- if media.preview_image.width >= 2200 -%}{{ media.preview_image | image_url: width: 2200 }} 2200w,{%- endif -%}
{%- if media.preview_image.width >= 2890 -%}{{ media.preview_image | image_url: width: 2890 }} 2890w,{%- endif -%}
{%- if media.preview_image.width >= 4096 -%}{{ media.preview_image | image_url: width: 4096 }} 4096w,{%- endif -%}
{{ media.preview_image | image_url }} {{ media.preview_image.width }}w"
sizes="(min-width: 750px) calc(100vw - 22rem), 1100px"
src="{{ media.preview_image | image_url: width: 1445 }}"
alt="{{ media.alt | escape }}"
loading="lazy"
width="1100"
height="{{ 1100 | divided_by: media.preview_image.aspect_ratio | ceil }}"
data-media-id="{{ media.id }}"
{% if variant_image %}class="product__media-item--variant"{% endif %}
>
{%- else -%}
{%- if media.media_type == 'model' -%}
<div class="product-media-modal__model" data-media-id="{{ media.id }}">
<product-model class="deferred-media media media--transparent global-media-settings global-media-settings--no-shadow" style="padding-top: min(calc(100vh - 12rem), 100%)">
{%- else -%}
<deferred-media class="deferred-media media global-media-settings global-media-settings--no-shadow" style="padding-top: min(calc(100vh - 12rem), {{ 1 | divided_by: media.aspect_ratio | times: 100 }}%)" data-media-id="{{ media.id }}">
{%- endif -%}

<button id="Deferred-Poster-Modal-{{ media.id }}" class="deferred-media__poster" type="button">
<span class="deferred-media__poster-button motion-reduce">
{%- if media.media_type == 'model' -%}
{%- render 'icon-3d-model' -%}
{%- else -%}
{%- render 'icon-play' -%}
{%- endif -%}
</span>
<img
srcset="{% if media.preview_image.width >= 288 %}{{ media.preview_image | image_url: width: 288 }} 288w,{% endif %}
{% if media.preview_image.width >= 576 %}{{ media.preview_image | image_url: width: 576 }} 576w,{% endif %}
{% if media.preview_image.width >= 550 %}{{ media.preview_image | image_url: width: 550 }} 550w,{% endif %}
{% if media.preview_image.width >= 1100 %}{{ media.preview_image | image_url: width: 1100 }} 1100w,{% endif %}
{{ media.preview_image | image_url }} {{ media.preview_image.width }}w"
src="{{ media | image_url: width: 550, height: 550 }}"
sizes="(min-width: 1200px) calc((1200px - 10rem) / 2), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)"
loading="lazy"
width="576"
height="{{ 576 | divided_by: media.preview_image.aspect_ratio }}"
alt="{{ media.preview_image.alt | escape }}"
>
</button>
<template>
{%- case media.media_type -%}
{%- when 'external_video' -%}
{%- assign video_class = 'js-' | append: media.host -%}
{%- if media.host == 'youtube' -%}
{{ media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: "lazy" }}
{%- else -%}
{{ media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: "lazy" }}
{%- endif -%}
{%- when 'video' -%}
{{ media | media_tag: image_size: "2048x", autoplay: true, loop: loop, controls: true, preload: "none" }}
{%- when 'model' -%}
{{ media | media_tag: image_size: "2048x", toggleable: true }}
{%- endcase -%}
</template>

{%- if media.media_type == 'model' -%}
</product-model>
<button
class="button button--full-width product__xr-button"
type="button"
aria-label="{{ 'products.product.xr_button_label' | t }}"
data-shopify-xr
data-shopify-model3d-id="{{ media.id }}"
data-shopify-title="title"
data-shopify-xr-hidden
>
{% render 'icon-3d-model' %}
{{ 'products.product.xr_button' | t }}
</button>
</div>
{%- else -%}
</deferred-media>
{%- endif -%}
{%- endif -%}

Product thumbnail

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{% comment %}
Renders a product thumbnail with a modal-opener

Accepts:
- media: {Object} Product Media object
- position: {String} Position of the media. Used for accessible label.
- loop: {Boolean} Enable video looping (optional)
- modal_id: {String} The product modal that will be shown by clicking the thumbnail
- xr_button: {Boolean} Renders the "View in your space" button (shopify-xr-button) if the media is a 3D Model
- media_width: {Float} The width percentage that the media column occupies on desktop.
- lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)

Usage:
{% render 'product-thumbnail',
media: media,
position: forloop.index,
loop: section.settings.enable_video_looping,
modal_id: section.id
%}
{% endcomment %}

<noscript>
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
<span class="product__media-icon motion-reduce quick-add-hidden">{% render 'icon-play' %}</span>
<div class="product__media media gradient global-media-settings" style="padding-top: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;">
<img
srcset="{% if media.preview_image.width >= 493 %}{{ media.preview_image | image_url: width: 493 }} 493w,{% endif %}
{% if media.preview_image.width >= 600 %}{{ media.preview_image | image_url: width: 600 }} 600w,{% endif %}
{% if media.preview_image.width >= 713 %}{{ media.preview_image | image_url: width: 713 }} 713w,{% endif %}
{% if media.preview_image.width >= 823 %}{{ media.preview_image | image_url: width: 823 }} 823w,{% endif %}
{% if media.preview_image.width >= 990 %}{{ media.preview_image | image_url: width: 990 }} 990w,{% endif %}
{% if media.preview_image.width >= 1100 %}{{ media.preview_image | image_url: width: 1100 }} 1100w,{% endif %}
{% if media.preview_image.width >= 1206 %}{{ media.preview_image | image_url: width: 1206 }} 1206w,{% endif %}
{% if media.preview_image.width >= 1346 %}{{ media.preview_image | image_url: width: 1346 }} 1346w,{% endif %}
{% if media.preview_image.width >= 1426 %}{{ media.preview_image | image_url: width: 1426 }} 1426w,{% endif %}
{% if media.preview_image.width >= 1646 %}{{ media.preview_image | image_url: width: 1646 }} 1646w,{% endif %}
{% if media.preview_image.width >= 1946 %}{{ media.preview_image | image_url: width: 1946 }} 1946w,{% endif %}
{{ media.preview_image | image_url }} {{ media.preview_image.width }}w"
src="{{ media | image_url: width: 1946 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: media_width | round }}px, (min-width: 990px) calc({{ media_width | times: 100 }}vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)"
{% unless lazy_load == false %}loading="lazy"{% endunless %}
width="973"
height="{{ 973 | divided_by: media.preview_image.aspect_ratio | ceil }}"
alt="{{ media.preview_image.alt | escape }}"
>
</div>
<a href="{% if media.media_type == 'video' %}{{ media.sources[1].url }}{% else %}{{ media | external_video_url }}{% endif %}" class="product__media-toggle">
<span class="visually-hidden">{{ 'products.product.video_exit_message' | t: title: product.title | escape }}</span>
</a>
{%- else -%}
<div class="product__media media gradient global-media-settings" style="padding-top: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;">
<img
srcset="{% if media.preview_image.width >= 493 %}{{ media.preview_image | image_url: width: 493 }} 493w,{% endif %}
{% if media.preview_image.width >= 600 %}{{ media.preview_image | image_url: width: 600 }} 600w,{% endif %}
{% if media.preview_image.width >= 713 %}{{ media.preview_image | image_url: width: 713 }} 713w,{% endif %}
{% if media.preview_image.width >= 823 %}{{ media.preview_image | image_url: width: 823 }} 823w,{% endif %}
{% if media.preview_image.width >= 990 %}{{ media.preview_image | image_url: width: 990 }} 990w,{% endif %}
{% if media.preview_image.width >= 1100 %}{{ media.preview_image | image_url: width: 1100 }} 1100w,{% endif %}
{% if media.preview_image.width >= 1206 %}{{ media.preview_image | image_url: width: 1206 }} 1206w,{% endif %}
{% if media.preview_image.width >= 1346 %}{{ media.preview_image | image_url: width: 1346 }} 1346w,{% endif %}
{% if media.preview_image.width >= 1426 %}{{ media.preview_image | image_url: width: 1426 }} 1426w,{% endif %}
{% if media.preview_image.width >= 1646 %}{{ media.preview_image | image_url: width: 1646 }} 1646w,{% endif %}
{% if media.preview_image.width >= 1946 %}{{ media.preview_image | image_url: width: 1946 }} 1946w,{% endif %}
{{ media.preview_image | image_url }} {{ media.preview_image.width }}w"
src="{{ media | image_url: width: 1946 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: media_width | round }}px, (min-width: 990px) calc({{ media_width | times: 100 }}vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)"
{% unless lazy_load == false %}loading="lazy"{% endunless %}
width="973"
height="{{ 973 | divided_by: media.preview_image.aspect_ratio | ceil }}"
alt="{{ media.preview_image.alt | escape }}"
>
</div>
{%- endif -%}
</noscript>

<modal-opener class="product__modal-opener product__modal-opener--{{ media.media_type }} no-js-hidden" data-modal="#ProductModal-{{ modal_id }}">
<span class="product__media-icon motion-reduce quick-add-hidden" aria-hidden="true">
{%- liquid
case media.media_type
when 'video' or 'external_video'
render 'icon-play'
when 'model'
render 'icon-3d-model'
else
render 'icon-zoom'
endcase
-%}
</span>

<div class="product__media media media--transparent gradient global-media-settings" style="padding-top: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;">
<img
srcset="{% if media.preview_image.width >= 493 %}{{ media.preview_image | image_url: width: 493 }} 493w,{% endif %}
{% if media.preview_image.width >= 600 %}{{ media.preview_image | image_url: width: 600 }} 600w,{% endif %}
{% if media.preview_image.width >= 713 %}{{ media.preview_image | image_url: width: 713 }} 713w,{% endif %}
{% if media.preview_image.width >= 823 %}{{ media.preview_image | image_url: width: 823 }} 823w,{% endif %}
{% if media.preview_image.width >= 990 %}{{ media.preview_image | image_url: width: 990 }} 990w,{% endif %}
{% if media.preview_image.width >= 1100 %}{{ media.preview_image | image_url: width: 1100 }} 1100w,{% endif %}
{% if media.preview_image.width >= 1206 %}{{ media.preview_image | image_url: width: 1206 }} 1206w,{% endif %}
{% if media.preview_image.width >= 1346 %}{{ media.preview_image | image_url: width: 1346 }} 1346w,{% endif %}
{% if media.preview_image.width >= 1426 %}{{ media.preview_image | image_url: width: 1426 }} 1426w,{% endif %}
{% if media.preview_image.width >= 1646 %}{{ media.preview_image | image_url: width: 1646 }} 1646w,{% endif %}
{% if media.preview_image.width >= 1946 %}{{ media.preview_image | image_url: width: 1946 }} 1946w,{% endif %}
{{ media.preview_image | image_url }} {{ media.preview_image.width }}w"
src="{{ media | image_url: width: 1946 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: media_width | round }}px, (min-width: 990px) calc({{ media_width | times: 100 }}vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)"
{% unless lazy_load == false %}loading="lazy"{% endunless %}
width="973"
height="{{ 973 | divided_by: media.preview_image.aspect_ratio | ceil }}"
alt="{{ media.preview_image.alt | escape }}"
>
</div>
<button class="product__media-toggle quick-add-hidden" type="button" aria-haspopup="dialog" data-media-id="{{ media.id }}">
<span class="visually-hidden">
{{ 'products.product.media.open_media' | t: index: position }}
</span>
</button>
</modal-opener>

{%- if media.media_type != 'image' -%}
{%- if media.media_type == 'model' -%}
<product-model class="deferred-media media media--transparent gradient global-media-settings no-js-hidden" style="padding-top: 100%" data-media-id="{{ media.id }}">
{%- else -%}
<deferred-media class="deferred-media gradient global-media-settings media no-js-hidden" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100 }}%" data-media-id="{{ media.id }}">
{%- endif -%}
<button id="Deferred-Poster-Modal-{{ media.id }}" class="deferred-media__poster" type="button">
<span class="deferred-media__poster-button motion-reduce">
{%- if media.media_type == 'model' -%}
<span class="visually-hidden">{{ 'products.product.media.play_model' | t }}</span>
{%- render 'icon-3d-model' -%}
{%- else -%}
<span class="visually-hidden">{{ 'products.product.media.play_video' | t }}</span>
{%- render 'icon-play' -%}
{%- endif -%}
</span>
<img
srcset="{% if media.preview_image.width >= 493 %}{{ media.preview_image | image_url: width: 493 }} 493w,{% endif %}
{% if media.preview_image.width >= 600 %}{{ media.preview_image | image_url: width: 600 }} 600w,{% endif %}
{% if media.preview_image.width >= 713 %}{{ media.preview_image | image_url: width: 713 }} 713w,{% endif %}
{% if media.preview_image.width >= 823 %}{{ media.preview_image | image_url: width: 823 }} 823w,{% endif %}
{% if media.preview_image.width >= 990 %}{{ media.preview_image | image_url: width: 990 }} 990w,{% endif %}
{% if media.preview_image.width >= 1100 %}{{ media.preview_image | image_url: width: 1100 }} 1100w,{% endif %}
{% if media.preview_image.width >= 1206 %}{{ media.preview_image | image_url: width: 1206 }} 1206w,{% endif %}
{% if media.preview_image.width >= 1346 %}{{ media.preview_image | image_url: width: 1346 }} 1346w,{% endif %}
{% if media.preview_image.width >= 1426 %}{{ media.preview_image | image_url: width: 1426 }} 1426w,{% endif %}
{% if media.preview_image.width >= 1646 %}{{ media.preview_image | image_url: width: 1646 }} 1646w,{% endif %}
{% if media.preview_image.width >= 1946 %}{{ media.preview_image | image_url: width: 1946 }} 1946w,{% endif %}
{{ media.preview_image | image_url }} {{ media.preview_image.width }}w"
src="{{ media | image_url: width: 1946 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: media_width | round }}px, (min-width: 990px) calc({{ media_width | times: 100 }}vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)"
{% unless lazy_load == false %}loading="lazy"{% endunless %}
width="973"
height="{{ 973 | divided_by: media.preview_image.aspect_ratio | ceil }}"
alt="{{ media.preview_image.alt | escape }}"
>
</button>
<template>
{%- liquid
case media.media_type
when 'external_video'
assign video_class = 'js-' | append: media.host
if media.host == 'youtube'
echo media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: "lazy"
else
echo media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: "lazy"
endif
when 'video'
echo media | media_tag: image_size: "2048x", autoplay: true, loop: loop, controls: true, preload: "none"
when 'model'
echo media | media_tag: image_size: "2048x", toggleable: true
endcase
-%}
</template>

{%- if media.media_type == 'model' -%}
</product-model>
{%- if xr_button -%}
<button
class="button button--full-width product__xr-button"
type="button"
aria-label="{{ 'products.product.xr_button_label' | t }}"
data-shopify-xr
data-shopify-model3d-id="{{ media.id }}"
data-shopify-title="title"
data-shopify-xr-hidden
>
{% render 'icon-3d-model' %}
{{ 'products.product.xr_button' | t }}
</button>
{%- endif -%}
{%- else -%}
</deferred-media>
{%- endif -%}
{%- endif -%}

Pagination

{% comment %}
Renders a set of links for paginated results. Must be used within paginate tags.

Usage:
{% paginate results by 2 %}
{% render 'pagination', paginate: paginate, anchor: '#yourID' %}
{% endpaginate %}

Accepts:
- paginate: {Object}
- anchor: {String} (optional) This can be added so that on page reload it takes you to wherever you've placed your anchor tag.
{% endcomment %}

<link rel="stylesheet" href="{{ 'component-pagination.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-pagination.css' | asset_url | stylesheet_tag }}</noscript>

{%- if paginate.parts.size > 0 -%}
<div class="pagination-wrapper">
<nav class="pagination" role="navigation" aria-label="{{ 'general.pagination.label' | t }}">
<ul class="pagination__list list-unstyled" role="list">
{%- if paginate.previous -%}
<li>
<a href="{{ paginate.previous.url }}{{ anchor }}" class="pagination__item pagination__item--next pagination__item-arrow link motion-reduce" aria-label="{{ 'general.pagination.previous' | t }}">
{% render 'icon-caret' %}
</a>
</li>
{%- endif -%}

{%- for part in paginate.parts -%}
<li>
{%- if part.is_link -%}
<a href="{{ part.url }}{{ anchor }}" class="pagination__item link" aria-label="{{ 'general.pagination.page' | t: number: part.title }}">{{ part.title }}</a>
{%- else -%}
{%- if part.title == paginate.current_page -%}
<a role="link" aria-disabled="true" class="pagination__item pagination__item--current light" aria-current="page" aria-label="{{ 'general.pagination.page' | t: number: part.title }}">{{ part.title }}</a>
{%- else -%}
<span class="pagination__item">{{ part.title }}</span>
{%- endif -%}
{%- endif -%}
</li>
{%- endfor -%}

{%- if paginate.next -%}
<li>
<a href="{{ paginate.next.url }}{{ anchor }}" class="pagination__item pagination__item--prev pagination__item-arrow link motion-reduce" aria-label="{{ 'general.pagination.next' | t }}" >
{%- render 'icon-caret' -%}
</a>
</li>
{%- endif -%}
</ul>
</nav>
</div>
{%- endif -%}

[benorama89]

Unfortunatly nothing in there - i think dawn is using a different structure than within: collections.

[benorama89]

This is my main product grid file.

{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

<link rel="preload" href="{{ 'component-rte.css' | asset_url }}" as="style" onload="this.onload=null;this.rel='stylesheet'">

{%- if section.settings.enable_quick_add -%}
<link rel="stylesheet" href="{{ 'quick-add.css' | asset_url }}" media="print" onload="this.media='all'">
<script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

<div class="section-{{ section.id }}-padding">
{% comment %} Sort is the first tabbable element when filter type is vertical {% endcomment %}
{%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%}
<facet-filters-form class="facets facets-vertical-sort page-width small-hide no-js-hidden">
<form class="facets-vertical-form" id="FacetSortForm">
<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 = collection.sort_by | default: collection.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 collection.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>

<div class="product-count-vertical light" role="status">
<h2 class="product-count__text text-body">
<span id="ProductCountDesktop">
{%- if collection.results_count -%}
{{ 'templates.search.results_with_count' | t: terms: collection.terms, count: collection.results_count }}
{%- elsif collection.products_count == collection.all_products_count -%}
{{ 'products.facets.product_count_simple' | t: count: collection.products_count }}
{%- else -%}
{{ 'products.facets.product_count' | t: product_count: collection.products_count, count: collection.all_products_count }}
{%- endif -%}
</span>
</h2>
<div class="loading-overlay__spinner">
<svg aria-hidden="true" focusable="false" role="presentation" 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>
</form>
</facet-filters-form>
{%- endif -%}

<div class="{% if section.settings.filter_type == 'vertical' %} facets-vertical page-width{% endif %}">
{{ 'component-facets.css' | asset_url | stylesheet_tag }}
<script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>
{%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
<aside aria-labelledby="verticalTitle" class="facets-wrapper{% unless section.settings.enable_filtering %} facets-wrapper--no-filters{% endunless %}{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="main-collection-filters" data-id="{{ section.id }}">
{% render 'facets', results: collection, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, filter_type: section.settings.filter_type %}
</aside>
{%- endif -%}

<div class="product-grid-container" id="ProductGridContainer">
{%- paginate collection.products by section.settings.products_per_page -%}
{%- if collection.products.size == 0 -%}
<div class="collection collection--empty page-width" id="product-grid" data-id="{{ section.id }}">
<div class="loading-overlay gradient"></div>
<div class="title-wrapper center">
<h2 class="title title--primary">
{{ 'sections.collection_template.empty' | t }}<br>
{{ 'sections.collection_template.use_fewer_filters_html' | t: link: collection.url, class: "underlined-link link" }}
</h2>
</div>
</div>
{%- else -%}
<div class="collection{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}">
<div class="loading-overlay gradient"></div>

<ul id="product-grid" data-id="{{ section.id }}" class="
grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down
grid--{{ section.settings.columns_desktop }}-col-desktop">
{%- for product in collection.products -%}
{% assign lazy_load = false %}
{%- if forloop.index > 2 -%}
{%- assign lazy_load = true -%}
{%- endif -%}
<li class="grid__item">
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
lazy_load: lazy_load,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id

%}
</li>
{%- endfor -%}
</ul>

{%- if paginate.pages > 1 -%}
{% render 'pagination', paginate: paginate, anchor: '' %}
{%- endif -%}
</div>
{%- endif -%}
{%- endpaginate -%}
</div>
</div>
</div>

{% schema %}
{
"name": "t:sections.main-collection-product-grid.name",
"class": "section",
"settings": [
{
"type": "range",
"id": "products_per_page",
"min": 8,
"max": 24,
"step": 4,
"default": 16,
"label": "t:sections.main-collection-product-grid.settings.products_per_page.label"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 5,
"step": 1,
"default": 4,
"label": "t:sections.main-collection-product-grid.settings.columns_desktop.label"
},
{
"type": "header",
"content": "t:sections.main-collection-product-grid.settings.header__3.content"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.main-collection-product-grid.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.main-collection-product-grid.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.main-collection-product-grid.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.main-collection-product-grid.settings.image_ratio.label"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "t:sections.main-collection-product-grid.settings.show_secondary_image.label"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.main-collection-product-grid.settings.show_vendor.label"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "t:sections.main-collection-product-grid.settings.show_rating.label",
"info": "t:sections.main-collection-product-grid.settings.show_rating.info"
},
{
"type": "checkbox",
"id": "enable_quick_add",
"default": false,
"label": "t:sections.main-collection-product-grid.settings.enable_quick_buy.label"
},
{
"type": "header",
"content": "t:sections.main-collection-product-grid.settings.header__1.content"
},
{
"type": "checkbox",
"id": "enable_filtering",
"default": true,
"label": "t:sections.main-collection-product-grid.settings.enable_filtering.label",
"info": "t:sections.main-collection-product-grid.settings.enable_filtering.info"
},
{
"type": "select",
"id": "filter_type",
"options": [
{
"value": "horizontal",
"label": "t:sections.main-collection-product-grid.settings.filter_type.options__1.label"
},
{
"value": "vertical",
"label": "t:sections.main-collection-product-grid.settings.filter_type.options__2.label"
},
{
"value": "drawer",
"label": "t:sections.main-collection-product-grid.settings.filter_type.options__3.label"
}
],
"default": "horizontal",
"label": "t:sections.main-collection-product-grid.settings.filter_type.label",
"info": "t:sections.main-collection-product-grid.settings.filter_type.info"
},
{
"type": "checkbox",
"id": "enable_sorting",
"default": true,
"label": "t:sections.main-collection-product-grid.settings.enable_sorting.label"
},
{
"type": "header",
"content": "t:sections.main-collection-product-grid.settings.header_mobile.content"
},
{
"type": "select",
"id": "columns_mobile",
"default": "2",
"label": "t:sections.main-collection-product-grid.settings.columns_mobile.label",
"options": [
{
"value": "1",
"label": "t:sections.main-collection-product-grid.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.main-collection-product-grid.settings.columns_mobile.options__2.label"
}
]
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
]
}
{% endschema %}

[Danmuges]

Hi, did you ever work this out? I'm trying to do it now. 

[mantarraya]

Did any of you were able to solve this?