Product Grid

{{ '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 }} {%- if section.settings.enable_quick_add -%} {%- endif -%} {%- 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 -%}
{% comment %} Sort is the first tabbable element when filter type is vertical {% endcomment %} {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%}

{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%} {% render 'icon-caret' %}

{%- 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 -%}

{%- endif -%}
{{ 'component-facets.css' | asset_url | stylesheet_tag }} {%- if section.settings.enable_filtering or section.settings.enable_sorting -%} {%- endif -%}
{%- paginate collection.products by section.settings.products_per_page -%} {%- if collection.products.size == 0 -%}

{{ 'sections.collection_template.empty' | t -}}
{{ 'sections.collection_template.use_fewer_filters_html' | t: link: collection.url, class: 'underlined-link link' }}

{%- else -%}
    {%- for product in collection.products -%} {% assign lazy_load = false %} {%- if forloop.index > 2 -%} {%- assign lazy_load = true -%} {%- endif -%}
  • {% 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 %}
    • {%- endfor -%}
{%- if paginate.pages > 1 -%} {% render 'pagination', paginate: paginate, anchor: '' %} {%- endif -%}
{%- endif -%} {%- endpaginate -%}
{% 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 %}