Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save dylanjhunt/3bb55521a6e672e8a4ad18cbe97ae611 to your computer and use it in GitHub Desktop.
Save dylanjhunt/3bb55521a6e672e8a4ad18cbe97ae611 to your computer and use it in GitHub Desktop.
<!-- /templates/collection.liquid -->
{%- if section.settings.show_collection_image and collection.image -%}
<div class="collection-hero">
<noscript>
<div class="collection-hero__image-no-js" style="background-image:url({{ collection.image | img_url: '2048x2048' }});"></div>
</noscript>
{%- assign img_url = collection.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- comment -%}
If the collection.image height is < 70% of its width on mobile or < 45% on desktop,
we crop the container to make sure it's the same height as the image.
{%- endcomment -%}
{%- assign height_width_ratio = 100 | divided_by: collection.image.aspect_ratio | floor -%}
{%- if height_width_ratio < 70 -%}
<style>
{%- if height_width_ratio < 45 -%}
.collection-hero__image-wrapper::after {
padding-bottom: {{ height_width_ratio }}%;
}
{%- else -%}
@media screen and (max-width: 768px) {
.collection-hero__image-wrapper::after {
padding-bottom: {{ height_width_ratio }}%;
}
}
{%- endif -%}
</style>
{%- endif -%}
<div class="collection-hero__image-wrapper">
<img class="collection-hero__image lazyload"
src="{{ collection.image | img_url: '300x' }}"
data-src="{{ img_url }}"
data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
data-aspectratio="{{ collection.image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="cover"
alt="{{ collection.image.alt | escape }}">
</div>
</div>
{%- endif -%}
<div id="CollectionSection" data-section-id="{{ section.id }}" data-section-type="collection-template" data-grid-type="{{ section.settings.collection_products_grid }}">
{%- paginate collection.products by 12 -%}
<header class="section-header text-center">
<h1>{{ collection.title }}</h1>
<hr class="hr--small">
{%- if collection.description != blank -%}
<div class="grid">
<div class="grid__item">
<div class="rte">
{{ collection.description }}
</div>
</div>
</div>
{%- endif -%}
<div class="grid--full collection-sorting{% if section.settings.collection_sort_enable %} collection-sorting--enabled{% endif %}">
{%- if section.settings.collection_sort_enable -%}
{%- include 'collection-sorting' -%}
{%- endif -%}
</div>
{%- if section.settings.collection_tags_enable -%}
{%- if collection.all_tags.size > 0 -%}
{%- if section.settings.collection_sort_enable -%}
<hr class="hr--small hr--clear">
{%- endif -%}
<ul class="tags tags--collection inline-list">
{% comment %}
Used for the catalog collection (/collections/all) and product collections (collections/{collection.handle})
{% endcomment %}
<li{% unless current_tags %} class="tag--active"{% endunless %}>
<a href="{% if collection.url == blank %}{{ routes.all_products_collection_url }}{% else %}{{ collection.url }}{% endif %}">
{{ 'collections.general.all_of_collection' | t }}
</a>
</li>
{%- for tag in collection.all_tags -%}
{%- if current_tags contains tag -%}
<li class="tag--active">
{{ tag | link_to_remove_tag: tag }}
</li>
{%- else -%}
<li>
{% comment %}
Use link_to_add_tag if you want to allow filtering
by multiple tags
{% endcomment %}
{{ tag | link_to_tag: tag }}
</li>
{%- endif -%}
{%- endfor -%}
</ul>
{%- endif -%}
{%- endif -%}
{%- if section.settings.collection_tags_enable -%}
<hr class="hr--small hr--clear">
{%- endif -%}
</header>
{%- if section.settings.collection_products_grid == 'collage' -%}
<div class="grid grid-collage">
{% comment %}
Loop through our products in the current collection.
See the snippet 'snippets/product-grid-collage.liquid'.
`is_reverse_row__product`, `three_row_index__product`, `collection_product_count`, and `divisible_by_three__product` are
all used by 'snippets/product-grid-collage.liquid'
{% endcomment %}
{%- assign is_reverse_row__product = false -%}
{%- assign three_row_index__product = 0 -%}
{%- assign collection_product_count__product = collection.products.size -%}
{%- assign divisible_by_three__product = collection_product_count__product | modulo:3 -%}
{%- for product in collection.products -%}
{% assign color_active = false %}
{% for option in product.options %}
{% if option == 'Color' %}
{% assign color_active = true %}
{% endif %}
{% endfor %}
{% if product.variants.size > 1 and color_active == true %}
{% for option in product.options %}
{% if option == 'Color' %}
{% assign index = forloop.index0 %}
{% assign colorlist = '' %}
{% assign color = '' %}
{% for variant in product.variants %}
{% capture color %}
{{ variant.options[index] }}
{% endcapture %}
{% unless colorlist contains color %}
{%- include 'product-grid-collage-variant' -%}
{% capture tempList %}
{{colorlist | append: color | append: " " }}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
{% else %}
{%- include 'product-grid-collage' -%}
{% endif %}
{%- else -%}
{%- if shop.products_count == 0 -%}
{% comment %}
Add default products to help with onboarding for collections/all only
{% endcomment %}
{% include 'onboarding-featured-products' -%}
{%- else -%}
{% comment %}
If collection exists but is empty, display message
{% endcomment %}
<div class="grid__item text-center">
<p>{{ 'collections.general.no_matches' | t }}</p>
</div>
{%- endif -%}
{%- endfor -%}
</div>
{%- elsif section.settings.collection_products_grid == 'grid' -%}
<div class="grid-uniform">
{%- assign grid_item_width = 'medium--one-half large--one-third' -%}
{%- for product in collection.products -%}
{% assign color_active = false %}
{% for option in product.options %}
{% if option == 'Color' %}
{% assign color_active = true %}
{% endif %}
{% endfor %}
{% if product.variants.size > 1 and color_active == true %}
{% for option in product.options %}
{% if option == 'Color' %}
{% assign index = forloop.index0 %}
{% assign colorlist = '' %}
{% assign color = '' %}
{% for variant in product.variants %}
{% capture color %}
{{ variant.options[index] }}
{% endcapture %}
{% unless colorlist contains color %}
{%- include 'product-grid-item-variant' -%}
{% capture tempList %}
{{colorlist | append: color | append: " " }}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
{% else %}
{%- include 'product-grid-item' -%}
{% endif %}
{%- else -%}
{%- if collection.handle == 'all' -%}
{% comment %}
Add default products to help with onboarding for collections/all only
{% endcomment %}
{%- include 'onboarding-featured-products' -%}
{%- else -%}
{% comment %}
If collection exists but is empty, display message
{% endcomment %}
<div class="grid__item text-center">
<p>{{ 'collections.general.no_matches' | t }}</p>
</div>
{%- endif -%}
{%- endfor -%}
</div>
{%- endif -%}
{%- if paginate.pages > 1 -%}
{%- include 'pagination' -%}
{%- endif -%}
{%- endpaginate -%}
</div>
{% schema %}
{
"name": {
"da": "Kollektionssider",
"de": "Kategorieseiten",
"en": "Collection pages",
"es": "Páginas de colección",
"fi": "Kokoelman sivut",
"fr": "Pages de collection",
"hi": "कलेक्शन पेज",
"it": "Pagine di collezioni",
"ja": "コレクションページ",
"ko": "컬렉션 페이지",
"nb": "Samlingssider",
"nl": "Collectiepagina's",
"pt-BR": "Páginas de coleções",
"pt-PT": "Páginas de coleções",
"sv": "Produktseriesidor",
"th": "หน้าคอลเลกชัน",
"zh-CN": "产品系列页面",
"zh-TW": "商品系列頁面"
},
"settings": [
{
"type": "checkbox",
"id": "show_collection_image",
"label": {
"da": "Vis kollektionsbillede",
"de": "Kategorie-Foto anzeigen",
"en": "Show collection image",
"es": "Mostrar imagen de la colección",
"fi": "Näytä kokoelman kuva",
"fr": "Afficher l'image de la collection",
"hi": "कलेक्शन इमेज दिखाएं",
"it": "Mostra immagine collezione",
"ja": "コレクションの画像を表示する",
"ko": "컬렉션 이미지 표시",
"nb": "Vis samlingsbilde",
"nl": "Collectieafbeelding weergeven",
"pt-BR": "Exibir imagem da coleção",
"pt-PT": "Mostrar imagem da coleção",
"sv": "Visa produktseriebilder",
"th": "แสดงรูปภาพคอลเลกชัน",
"zh-CN": "显示产品系列图片",
"zh-TW": "顯示商品系列圖片"
},
"default": false
},
{
"type": "checkbox",
"id": "collection_sort_enable",
"label": {
"da": "Aktivér sortering af kollektioner",
"de": "Kategoriesortierung aktivieren",
"en": "Enable collection sorting",
"es": "Habilitar la la función ordenar colecciones",
"fi": "Ota kokoelman lajittelu käyttöön",
"fr": "Activer le tri de la collection",
"hi": "कलेक्शन क्रमबद्ध करना सक्षम करें",
"it": "Abilita ordinamento collezione",
"ja": "コレクションの並べ替えを有効にする",
"ko": "컬렉션 정렬 사용",
"nb": "Aktiver sortering av samlinger",
"nl": "Sorteren op collectie inschakelen",
"pt-BR": "Habilitar a organização de coleções",
"pt-PT": "Ativar ordenação de coleção",
"sv": "Aktivera produktseriesortering",
"th": "เปิดใช้การเรียงลำดับคอลเลกชัน",
"zh-CN": "启用产品系列排序",
"zh-TW": "啟用商品系列排序功能"
}
},
{
"type": "checkbox",
"id": "collection_tags_enable",
"label": {
"da": "Aktivér tagfiltrering",
"de": "Tag-Filtern erlauben",
"en": "Enable tag filtering",
"es": "Habilitar filtro de etiquetas",
"fi": "Ota tunnisteiden suodatus käyttöön",
"fr": "Activer le filtrage par balises",
"hi": "टैग फ़िल्टर करना सक्षम करें",
"it": "Attiva filtro tag",
"ja": "タグでの絞り込みを有効にする",
"ko": "태그 필터링 사용",
"nb": "Aktiver taggfiltrering",
"nl": "Filteren op tags inschakelen",
"pt-BR": "Habilitar filtragem de tag",
"pt-PT": "Ativar filtragem por etiqueta",
"sv": "Aktivera taggfiltrering",
"th": "เปิดใช้การกรองแท็ก",
"zh-CN": "启用标签筛选",
"zh-TW": "啟用標籤篩選功能"
}
},
{
"type": "header",
"content": {
"da": "Produkter",
"de": "Produkte",
"en": "Products",
"es": "Productos",
"fi": "Tuotteet",
"fr": "Produits",
"hi": "उत्पाद",
"it": "Prodotti",
"ja": "商品管理",
"ko": "제품",
"nb": "Produkter",
"nl": "Producten",
"pt-BR": "Produtos",
"pt-PT": "Produtos",
"sv": "Produkter",
"th": "สินค้า",
"zh-CN": "产品",
"zh-TW": "產品"
}
},
{
"type": "select",
"id": "collection_products_grid",
"label": {
"da": "Gittertypografi",
"de": "Rasterstil",
"en": "Grid style",
"es": "Estilo de cuadrícula",
"fi": "Ruudukon tyyli",
"fr": "Style de grille",
"hi": "ग्रिड स्टाइल",
"it": "Stile griglia",
"ja": "グリッドスタイル",
"ko": "그리드 스타일",
"nb": "Rutenettstil",
"nl": "Rasterstijl",
"pt-BR": "Estilo da grade",
"pt-PT": "Estilo da grelha",
"sv": "Rutnätsstil",
"th": "สไตล์กริด",
"zh-CN": "网格样式",
"zh-TW": "網格樣式"
},
"options": [
{
"value": "collage",
"label": {
"da": "Collage",
"de": "Collage",
"en": "Collage",
"es": "Collage",
"fi": "Kollaasi",
"fr": "Collage",
"hi": "कोलाज",
"it": "Collage",
"ja": "コラージュ",
"ko": "콜라주",
"nb": "Fotomontasje",
"nl": "Collage",
"pt-BR": "Colagem",
"pt-PT": "Colagem",
"sv": "Kollage",
"th": "ภาพตัดแปะ",
"zh-CN": "拼贴画",
"zh-TW": "拼貼"
}
},
{
"value": "grid",
"label": {
"da": "Gitter",
"de": "Raster",
"en": "Grid",
"es": "Cuadrícula",
"fi": "Ruudukko",
"fr": "Grille",
"hi": "ग्रिड",
"it": "Griglia",
"ja": "グリッド",
"ko": "그리드",
"nb": "Rutenett",
"nl": "Raster",
"pt-BR": "Grade",
"pt-PT": "Grelha",
"sv": "Rutnät",
"th": "กริด",
"zh-CN": "网格",
"zh-TW": "網格"
}
}
]
},
{
"type": "checkbox",
"id": "product_vendor_enable",
"label": {
"da": "Vis produktleverandør",
"de": "Produktanbieter anzeigen",
"en": "Show product vendor",
"es": "Mostrar proveedor del producto",
"fi": "Näytä tuotteen myyjä",
"fr": "Afficher le distributeur du produit",
"hi": "उत्पाद विक्रेता दिखाएं",
"it": "Indica fornitore prodotto",
"ja": "商品の販売元を表示する",
"ko": "제품 공급 업체 표시",
"nb": "Vis produktleverandør",
"nl": "Productleverancier weergeven",
"pt-BR": "Exiba o fornecedor do produto",
"pt-PT": "Mostrar o fornecedor do produto",
"sv": "Visa produktsäljare",
"th": "แสดงผู้ขายสินค้า",
"zh-CN": "显示产品厂商",
"zh-TW": "顯示產品廠商"
}
}
]
}
{% endschema %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment