Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!-- /sections/collection-template.liquid -->
<style>
.grid__image img {
{% if section.settings.collection-product-size %}
object-fit: cover;
height: 100%;
width: 100%;
{% else %}
object-fit: contain;
height: 100%;
{% endif %}
}
.collection-box-1,
.collection-box-2{
{% if section.settings.collection-product-size %}
background-size:cover !important;
{% else %}
background-size:contain !important;
{% endif %}
}
.collection-product .product-overlay:hover {
background-color: rgba(255,255,255,{{section.settings.collection-product-overlay | times: 0.01 }});
}
{%if section.settings.collection_ad_custom_background%}
.collection-page-ad{
background-color:{{section.settings.collection-ad-color-background}};
}
{%endif%}
body,.site-header {
background-color: {{ section.settings.page-background }}!important;
}
</style>
{% case section.settings.collection-column-width %}
{% when 5 %}
{% assign collection_products_per_row = 'one-fifth' %}
{% when 4 %}
{% assign collection_products_per_row = 'one-quarter' %}
{% when 3 %}
{% assign collection_products_per_row = 'one-third' %}
{% when 2 %}
{% assign collection_products_per_row = 'one-half' %}
{% endcase %}
{% assign collection_background = section.settings.page-background %}
{% comment %}
For more information on collection tags:
- http://docs.shopify.com/themes/liquid-variables/collection
{% endcomment %}
{% if section.settings.collection-ad-text_richtext != '' or section.settings.collection-ad-image != blank %}
{%- assign paginate_limit = section.settings.collection-products-per-page | minus: 1 -%}
{% else %}
{%- assign paginate_limit = section.settings.collection-products-per-page -%}
{% endif %}
{% paginate collection.products by paginate_limit %}
{% comment %}
Use .grid--rev so that the collection tags appear below the products on mobile
{% endcomment %}
<div class="grid--full" id="collection-template" data-section-id="{{section.id}}" data-section-type="collection">
{%if section.settings.include-breadcrumb %}
<div class="grid__item large--one-whole">
{% include 'breadcrumb' %}
</div>
{%endif%}
<div class="grid__item collection-mobile-bg large--one-whole">
<div class="collection-image-grid collection-desktop-bg">
{% if collection.image %}
<div class="collection-featured-image-{{ section.settings.collection-image-height }}" style="background-image: url({{ collection.image | img_url: '1920x' }})" ></div>
{% endif %}
{% comment %}
Different markup if a collection description exists
{% endcomment %}
{% if collection.description != blank %}
<header class="section-header collection-header grid__item">
<h1 class="collection__title">{{ collection.title }}</h1>
<div class="rte rte--header collection-desc">
{{ collection.description }}
</div>
<a href="#productOutput" id="collection-down-arrow"><img src="{{ "down-arrow.svg" | asset_url}}"></a>
</header>
{% if section.settings.show-sorting %}
<div class="section-header sorting-header">
<div class=" collection-sorting">
{% include 'collection-sorting' %}
</div>
</div>
{% endif %}
{% else %}
<header class="section-header collection-header grid__item">
<h1 class="collection__title">{{ collection.title }}</h1>
<a href="#productOutput" id="collection-down-arrow"><img src="{{ "down-arrow.svg" | asset_url }}"></a>
</header>
<div class="section-header sorting-header">
{% if section.settings.show-sorting %}
<div class="collection-sorting">
{% include 'collection-sorting' %}
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
{% if collection.products_count < 1 %}
<div class="grid__item large--one-whole">
<div class="tbm_no-collection card-shadow">
<h3>{{ 'collections.general.no_matches' | t }}</h3>
</div>
</div>
{% endif %}
<div class="grid__item collection-products {% if section.settings.collection-style == "grid" %}collection-grid{% endif %}" id="productOutput">
{% if section.settings.collection-style == "card" %}
<div class="grid--full inner-grid {% if section.settings.collection-column-width == 5 %}five-row{% endif %}">
{% for product in collection.products %}
<div id="gridparent" class="grid__item {{ collection_products_per_row }} quarter-width medium--one-half small--one-half ee product-second-square-{{ forloop.index }}">
<div id="dummy"></div>
{% include 'grid-rework' %}
</div>
{% if forloop.index == 2 %}
{%assign adLimit = 0 %}
{% for block in section.blocks %}
{% if block.settings.col-feature != blank and adLimit < 1 %}
{% if block.settings.col-feature == collection.handle %}
{%assign adLimit = adLimit | plus: 1 %}
{% if block.settings.collection-ad-text_richtext != '' or block.settings.collection-ad-image != blank %}
<div id="gridparentad" class="grid__item collection-ad-mobile margin-B-M {{ collection_products_per_row }} quarter-width product-square-grid-ad medium--one-half ff small--one-whole product-grid-square">
<div id="dummy"></div>
<div class="{%if block.settings.collection-ad-image == blank %} collection-page-ad{% endif %}
card-shadow collection-product collection-box-1
{%if block.settings.collection-ad-image != blank %}grid__image col-image{%endif%}
" id="element">
{%if block.settings.collection-ad-image%}
{%if block.settings.collection-ad-image-link != blank%}
<a href="{{block.settings.collection-ad-image-link}}">
{%endif%}
<img src="{{ block.settings.collection-ad-image| img_url: '1024x1024' }}">
{%if block.settings.collection-ad-image-link != blank%}</a>{%endif%}
{%else%}
<div class="collection-ad-text rte">
<h1>{{ block.settings.collection-ad-text_richtext | truncate: 140 }}</h1>
</div>
{% endif %}
</div>
</div>
{% endif %}
{% endif %}
{% else %}
{%if adLimit < 1%}
{%assign adLimit = adLimit | plus: 1 %}
{% if block.settings.collection-ad-text_richtext != '' or block.settings.collection-ad-image != blank%}
<div id="gridparentad" class="grid__item collection-ad-mobile margin-B-M {{ collection_products_per_row }} quarter-width product-square-grid-ad medium--one-half ff small--one-whole product-grid-square">
<div id="dummy"></div>
<div class="{%if block.settings.collection-ad-image == blank %} collection-page-ad{% endif %}
card-shadow collection-product collection-box-1
{%if block.settings.collection-ad-image != blank %}grid__image col-image{%endif%}
" id="element">
{%if block.settings.collection-ad-image%}
{%if block.settings.collection-ad-image-link != blank%}
<a href="{{block.settings.collection-ad-image-link}}">
{%endif%}
<img src="{{ block.settings.collection-ad-image| img_url: '1024x1024' }}">
{%if block.settings.collection-ad-image-link != blank%}</a>{%endif%}
{%else%}
<div class="collection-ad-text rte">
<h1>{{ block.settings.collection-ad-text_richtext | truncate: 140 }}</h1>
</div>
{% endif %}
</div>
</div>
{% endif %}
{%endif%}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</div>
{% else %}
{% assign grid_item_width = collection_products_per_row | append: " medium--one-half small--one-whole" %}
<div class="section-background card-shadow">
<div class="index-pgi">
{% for product in collection.products %}
{% include 'product-grid-item' %}
{% endfor %}
</div>
</div>
{% endif %}
{% if paginate.pages > 1 %}
<div class="pagination collection-paginate">
{{ paginate | default_pagination | replace: '&laquo; Previous', '&larr;' | replace: 'Next &raquo;', '&rarr;' }}
</div>
{% endif %}
</div>
</div>
<style>
@media only screen and (max-width: 768px){
.col-image{
margin:15px 0px;
}
}
</style>
{% endpaginate %}
{% schema %}
{
"name": "Collection pages",
"settings": [
{
"type": "header",
"content": "Customize Grid"
},
{
"type": "checkbox",
"id": "show-sorting",
"label": "Enable sorting"
},
{
"type": "range",
"id": "collection-image-height",
"min": 300,
"max": 550,
"step": 50,
"unit": "px",
"label": "Collection banner height",
"default": 350
},
{
"type": "select",
"id": "collection-style",
"options": [
{
"value": "grid",
"label": "Grid"
},
{
"value": "card",
"label": "Card"
}
],
"default": "card",
"label": "Collection style"
},
{
"type": "range",
"id": "collection-column-width",
"min": 2,
"max": 5,
"step": 1,
"label": "Products per row",
"default": 5
},
{
"type": "range",
"id": "collection-products-per-page",
"min": 1,
"max": 50,
"step": 1,
"label": "Products per page",
"default": 25
},
{
"type": "header",
"content": "Product style"
},
{
"type": "range",
"id": "collection-product-overlay",
"min": 25,
"max": 100,
"step": 15,
"unit": "%",
"label": "Overlay opacity on hover",
"default": 25
},
{
"type": "checkbox",
"id": "collection-product-size",
"label": "Set product images to fill grid"
},
{
"type": "checkbox",
"id": "collection_ad_custom_background",
"label": "Enable custom background color"
},
{
"type": "color",
"id": "collection-ad-color-background",
"label": "Background color",
"default": "#252525"
}
],
"blocks": [
{
"type": "image",
"name": "Custom AD",
"settings": [
{
"type": "header",
"content": "Customize AD"
},
{
"type": "collection",
"id": "col-feature",
"label": "Collection"
},
{
"type": "richtext",
"id": "collection-ad-text_richtext",
"label": "Text",
"default": "<p>Display store wide promotions on your collection pages.</p>",
"info": "Limited to 140 characters"
},
{
"type": "image_picker",
"id": "collection-ad-image",
"label": "AD image"
},
{
"type": "url",
"id": "collection-ad-image-link",
"label": "AD image link"
}
]
}
]
}
{% 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.