Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Shopify Simple Theme - collection-template.liquid modified to support alternative images
<!-- /templates/collection.liquid -->
{% paginate collection.products by 12 %}
<div data-section-id="{{ section.id }}" data-section-type="collection-template" data-sort-enabled="{{ section.settings.collection_sort_enable }}" data-tags-enabled="{{ section.settings.collection_tag_enable }}">
<header class="grid">
<h1 class="grid__item small--text-center {% if section.settings.collection_sort_enable or section.settings.collection_tag_enable %}medium-up--one-third{% endif %}">{% if current_tags.size > 0 %}{{ current_tags.first }}{% else %}{{ collection.title }}{% endif %}</h1>
{% if section.settings.collection_sort_enable or section.settings.collection_tag_enable %}
<div class="collection-sorting grid__item medium-up--two-thirds medium-up--text-right small--text-center">
{% if section.settings.collection_tag_enable and collection.all_tags.size > 0 %}
<div class="collection-sorting__dropdown">
<label for="BrowseBy" class="label--hidden">{{ 'collections.general.tags' | t }}</label>
<select name="BrowseBy" id="BrowseBy">
{% if current_tags %}
{% if collection.handle %}
<option value="/collections/{{ collection.handle }}">{{ 'collections.general.all_tags' | t }}</option>
{% elsif collection.current_type %}
<option value="{{ collection.current_type | url_for_type }}">{{ 'collections.general.all_tags' | t }}</option>
{% elsif collection.current_vendor %}
<option value="{{ collection.current_vendor | url_for_vendor }}">{{ 'collections.general.all_tags' | t }}</option>
{% endif %}
{% else %}
<option value="">{{ 'collections.general.tags' | t }}</option>
{% endif %}
{% for tag in collection.all_tags %}
<option value="/collections/{% if collection.handle != blank %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handleize }}"{% if current_tags contains tag %} selected="selected"{% endif %}>{{ tag }}</option>
{% endfor %}
</select>
</div>
{% endif %}
{% if section.settings.collection_sort_enable and collection.products.size > 1 %}
<div class="collection-sorting__dropdown">
<label for="SortBy" class="label--hidden">{{ 'collections.sorting.title' | t }}</label>
<select name="SortBy" id="SortBy" data-value="{{ collection.sort_by | default: collection.default_sort_by }}">
<option value="manual">{{ 'collections.sorting.featured' | t }}</option>
<option value="best-selling">{{ 'collections.sorting.best_selling' | t }}</option>
<option value="title-ascending">{{ 'collections.sorting.az' | t }}</option>
<option value="title-descending">{{ 'collections.sorting.za' | t }}</option>
<option value="price-ascending">{{ 'collections.sorting.price_ascending' | t }}</option>
<option value="price-descending">{{ 'collections.sorting.price_descending' | t }}</option>
<option value="created-descending">{{ 'collections.sorting.date_descending' | t }}</option>
<option value="created-ascending">{{ 'collections.sorting.date_ascending' | t }}</option>
</select>
</div>
{% endif %}
</div>
{% endif %}
{% if collection.description != blank %}
<div class="collection-description grid__item rte">
{{ collection.description }}
</div>
{% endif %}
</header>
<div class="grid grid--uniform" role="list">
{% for product in collection.products %}
{% if collection.products.size == 1 %}
{% assign grid_item_width = 'medium-up--one-third small--one-whole' %}
{% else %}
{% assign grid_item_width = 'medium-up--one-third small--one-half' %}
{% endif %}
{%- if collection.handle == 'black-chairs' -%}
{% include 'product-grid-item' with custom_option_name: 'color', custom_option_value: 'black' %}
{%- else -%}
{% include 'product-grid-item' %}
{%- endif -%}
{% else %}
{% comment %}
Add default products to help with onboarding for collections/all only.
The onboarding styles and products are only loaded if the
store has no products.
{% endcomment %}
{% if shop.products_count == 0 and collection.handle == 'all' %}
{% unless onboardingLoaded %}
{% comment %}
Only load onboarding styles if they have not already been loaded.
{% endcomment %}
{% assign onboardingLoaded = true %}
{% endunless %}
<div class="grid__item">
<div class="grid grid--uniform">
{% assign collection_index = 1 %}
{% for i in (1..6) %}
<div class="grid__item small--one-half medium-up--one-third text-center">
<a href="/admin/products" class="grid__image">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</a>
<div class="product__title"><a href="/admin/products">{{ 'homepage.onboarding.product_title' | t }}</a></div>
<div class="product__price">$19.99</div>
</div>
{% assign collection_index = collection_index | plus: 1 %}
{% endfor %}
</div>
</div>
{% else %}
{% comment %}
If collection exists but is empty, display message
{% endcomment %}
<div class="grid__item">
<p>{{ 'collections.general.no_matches' | t }}</p>
</div>
{% endif %}
{% endfor %}
</div>
{% if paginate.pages > 1 %}
<div class="pagination text-center">
{{ paginate | default_pagination }}
</div>
{% endif %}
</div>
{% endpaginate %}
{% schema %}
{
"name": {
"de": "Kategorie-Seiten",
"en": "Collection pages",
"es": "Páginas de colección",
"fr": "Pages de collections",
"it": "Pagine delle collezioni",
"ja": "コレクションページ",
"pt-BR": "Páginas de Coleções"
},
"settings": [
{
"type": "checkbox",
"id": "vendor_show",
"label": {
"de": "Produktverkäufer anzeigen",
"en": "Show product vendor",
"es": "Mostrar proveedor del producto",
"fr": "Afficher le distributeur du produit",
"it": "Mostra fornitore prodotto",
"ja": "商品の販売元を表示する",
"pt-BR": "Exiba o fornecedor do produto"
}
},
{
"type": "checkbox",
"id": "collection_sort_enable",
"label": {
"de": "Kategoriesortierung aktivieren",
"en": "Enable collection sorting",
"es": "Habilitar la función ordenar colecciones",
"fr": "Activer le tri de la collection",
"it": "Abilita ordinamento collezione",
"ja": "コレクションの並べ替えを有効にする",
"pt-BR": "Ativar a ordenação de coleções"
},
"default": true
},
{
"type": "checkbox",
"id": "collection_tag_enable",
"label": {
"de": "Filterung nach Produkt-Tag aktivieren",
"en": "Enable filtering by product tag",
"es": "Habilitar filtro por etiqueta de producto",
"fr": "Activer le filtrage par étiquette de produit",
"it": "Abilita filtri per tag di prodotto",
"ja": "商品タグによる絞り込みを有効にする",
"pt-BR": "Ativar filtragem por tag de produto"
},
"default": false
}
]
}
{% endschema %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.