Shop All

{%- comment -%}
KAZE – Collection / Shop All section
Layout: breadcrumb → centred title → "Refined by" filters → "View as" grid switch + Sort by → product grid → pagination
Add via: Online Store → Themes → Edit code → Sections → Add a new section → "kaze-collection"
{%- endcomment -%}

{%- liquid
assign sid = section.id
assign default_cols = section.settings.columns_desktop | plus: 0
assign current_sort = collection.sort_by | default: collection.default_sort_by
assign active_filter_count = 0
for filter in collection.filters
assign active_filter_count = active_filter_count | plus: filter.active_values.size
if filter.type == 'price_range'
if filter.min_value.value != nil or filter.max_value.value != nil
assign active_filter_count = active_filter_count | plus: 1
endif
endif
endfor
-%}

/* Breadcrumb + title */
#kz-coll-{{ sid }} .kz-crumb { text-align: center; font-size: 1.5rem; color: var(--kz-muted); letter-spacing: .04em; margin: 0 0 3rem; }
#kz-coll-{{ sid }} .kz-crumb a { color: inherit; text-decoration: none; }
#kz-coll-{{ sid }} .kz-crumb a:hover { color: var(--kz-text); }
#kz-coll-{{ sid }} .kz-crumb span.sep { margin: 0 .8rem; }
#kz-coll-{{ sid }} .kz-title {
text-align: center; margin: 0 0 3.5rem; font-family: var(--font-heading-family);
font-weight: 400; font-size: clamp(2.2rem, 2.4vw, 3rem); letter-spacing: .14em; text-transform: uppercase; color: var(--kz-text);
}
#kz-coll-{{ sid }} .kz-desc { text-align: center; max-width: 64rem; margin: -2rem auto 3.5rem; color: var(--kz-muted); font-size: 1.5rem; }

/* Filter bar */
#kz-coll-{{ sid }} .kz-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; padding-bottom: 3rem; border-bottom: 1px solid var(--kz-line); }
#kz-coll-{{ sid }} .kz-filters__label { display: flex; align-items: center; gap: 1rem; font-size: 1.5rem; letter-spacing: .08em; text-transform: uppercase; }
#kz-coll-{{ sid }} .kz-filters__label svg { width: 2.4rem; height: 2.4rem; }
#kz-coll-{{ sid }} details.kz-dd { position: relative; }
#kz-coll-{{ sid }} .kz-dd > summary {
list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 2rem;
min-width: 26rem; padding: 1.4rem 2rem; border: 1px solid var(--kz-line); background: transparent;
font-size: 1.4rem; letter-spacing: .08em; text-transform: uppercase; color: var(--kz-text);
}
#kz-coll-{{ sid }} .kz-dd > summary::-webkit-details-marker { display: none; }
#kz-coll-{{ sid }} .kz-dd > summary .kz-chev { width: 1.2rem; transition: transform .2s; }
#kz-coll-{{ sid }} .kz-dd[open] > summary .kz-chev { transform: rotate(180deg); }
#kz-coll-{{ sid }} .kz-dd > summary .kz-count { color: var(--kz-accent); margin-left: .4rem; }
#kz-coll-{{ sid }} .kz-dd__panel {
position: absolute; z-index: 20; top: calc(100% + .4rem); left: 0; min-width: 100%; width: max-content; max-width: 32rem;
background: var(--kz-bg); border: 1px solid var(--kz-line); padding: 1.6rem 2rem; box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
#kz-coll-{{ sid }} .kz-dd__panel label { display: flex; align-items: center; gap: 1rem; padding: .6rem 0; font-size: 1.4rem; cursor: pointer; }
#kz-coll-{{ sid }} .kz-dd__panel label.is-disabled { opacity: .4; cursor: not-allowed; }
#kz-coll-{{ sid }} .kz-dd__panel input[type="checkbox"] { accent-color: var(--kz-text); width: 1.6rem; height: 1.6rem; }
#kz-coll-{{ sid }} .kz-price { display: flex; align-items: center; gap: 1rem; }
#kz-coll-{{ sid }} .kz-price input {
width: 11rem; padding: 1rem; border: 1px solid var(--kz-line); background: transparent; color: var(--kz-text); font-size: 1.4rem;
}
#kz-coll-{{ sid }} .kz-btn {
margin-top: 1.2rem; padding: 1rem 2.4rem; border: 0; background: var(--kz-accent); color: #fff;
font-size: 1.3rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
#kz-coll-{{ sid }} .kz-clear { font-size: 1.3rem; letter-spacing: .06em; text-transform: uppercase; color: var(--kz-text); text-underline-offset: .3rem; }

/* View as + sort */
#kz-coll-{{ sid }} .kz-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding: 4.5rem 0 5rem; }
#kz-coll-{{ sid }} .kz-count-txt { font-size: 1.4rem; color: var(--kz-muted); letter-spacing: .04em; }
#kz-coll-{{ sid }} .kz-viewas { display: flex; align-items: center; gap: 1.2rem; justify-self: center; }
#kz-coll-{{ sid }} .kz-viewas__label { font-size: 1.6rem; letter-spacing: .06em; text-transform: uppercase; margin-right: 1rem; }
#kz-coll-{{ sid }} .kz-viewas button {
display: inline-flex; align-items: center; justify-content: center; gap: 2px; height: 3.6rem; padding: 0 .6rem;
border: 1px solid var(--kz-line); background: transparent; cursor: pointer;
}
#kz-coll-{{ sid }} .kz-viewas button i { display: block; width: 4px; height: 2.2rem; background: var(--kz-muted); }
#kz-coll-{{ sid }} .kz-viewas button[data-cols="1"] { flex-direction: column; width: 3.6rem; }
#kz-coll-{{ sid }} .kz-viewas button[data-cols="1"] i { width: 2.2rem; height: 4px; }
#kz-coll-{{ sid }} .kz-viewas button.is-active { border-color: var(--kz-text); border-width: 2px; }
#kz-coll-{{ sid }} .kz-viewas button.is-active i { background: var(--kz-text); }
#kz-coll-{{ sid }} .kz-sort { display: flex; align-items: center; gap: 2rem; justify-self: end; }
#kz-coll-{{ sid }} .kz-sort label { font-size: 1.6rem; letter-spacing: .06em; text-transform: uppercase; }
#kz-coll-{{ sid }} .kz-sort select {
appearance: none; -webkit-appearance: none; min-width: 21rem; padding: 1.4rem 4rem 1.4rem 2rem; border: 1px solid var(--kz-line);
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 1.6rem center;
color: var(--kz-text); font-size: 1.6rem; font-family: inherit; cursor: pointer;
}

/* Grid */
#kz-coll-{{ sid }} .kz-grid { display: grid; grid-template-columns: repeat(var(--kz-cols), minmax(0, 1fr)); gap: 5rem 4.5rem; list-style: none; padding: 0; margin: 0; }
#kz-coll-{{ sid }} .kz-card a { color: inherit; text-decoration: none; display: block; }
#kz-coll-{{ sid }} .kz-card__media { position: relative; overflow: hidden; aspect-ratio: {{ section.settings.image_ratio }}; background: var(--kz-line); }
#kz-coll-{{ sid }} .kz-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease, transform 1.2s ease; }
#kz-coll-{{ sid }} .kz-card__media img.kz-img2 { opacity: 0; }
#kz-coll-{{ sid }} .kz-card:hover .kz-card__media img.kz-img2 { opacity: 1; }
#kz-coll-{{ sid }} .kz-card:hover .kz-card__media img:only-child { transform: scale(1.04); }
#kz-coll-{{ sid }} .kz-badge {
position: absolute; top: 1.2rem; left: 1.2rem; z-index: 2; padding: .5rem 1.2rem; font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase;
background: var(--kz-bg); color: var(--kz-text);
}
#kz-coll-{{ sid }} .kz-badge--sale { background: var(--kz-accent); color: #fff; }
#kz-coll-{{ sid }} .kz-card__info { padding-top: 2.4rem; }
#kz-coll-{{ sid }} .kz-card__title {
margin: 0 0 1.6rem; font-family: var(--font-heading-family); font-weight: 400; font-size: 2rem; line-height: 1.3;
letter-spacing: .08em; text-transform: uppercase; color: var(--kz-text);
}
#kz-coll-{{ sid }} .kz-card__price { font-size: 1.9rem; letter-spacing: .02em; color: var(--kz-text); }
#kz-coll-{{ sid }} .kz-card__price s { color: var(--kz-muted); font-size: .85em; margin-left: .8rem; }

/* List view (1 column) */
#kz-coll-{{ sid }} .kz-grid.is-list .kz-card a { display: grid; grid-template-columns: minmax(0, 32rem) 1fr; gap: 4rem; align-items: center; }
#kz-coll-{{ sid }} .kz-grid.is-list .kz-card__info { padding-top: 0; }

/* Pagination + empty */
#kz-coll-{{ sid }} .kz-pages { display: flex; justify-content: center; gap: .6rem; margin-top: 7rem; font-size: 1.5rem; }
#kz-coll-{{ sid }} .kz-pages a, #kz-coll-{{ sid }} .kz-pages span {
min-width: 4.2rem; height: 4.2rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 1rem;
border: 1px solid var(--kz-line); color: var(--kz-text); text-decoration: none;
}
#kz-coll-{{ sid }} .kz-pages .is-current { background: var(--kz-text); color: var(--kz-bg); border-color: var(--kz-text); }
#kz-coll-{{ sid }} .kz-empty { text-align: center; padding: 6rem 0; font-size: 1.6rem; color: var(--kz-muted); }

/* Tablet / mobile */
@media (max-width: 989px) {
#kz-coll-{{ sid }} .kz-toolbar { grid-template-columns: 1fr 1fr; }
#kz-coll-{{ sid }} .kz-count-txt { display: none; }
#kz-coll-{{ sid }} .kz-viewas { justify-self: start; }
#kz-coll-{{ sid }} .kz-viewas button[data-cols="4"] { display: none; }
#kz-coll-{{ sid }} .kz-grid { gap: 4rem 2.4rem; }
}
@media (max-width: 749px) {
#kz-coll-{{ sid }} .kz-dd > summary { min-width: 0; padding: 1.2rem 1.4rem; }
#kz-coll-{{ sid }} .kz-filters { gap: 1rem; }
#kz-coll-{{ sid }} .kz-filters__label span { display: none; }
#kz-coll-{{ sid }} .kz-toolbar { padding: 2.4rem 0 3rem; }
#kz-coll-{{ sid }} .kz-viewas__label, #kz-coll-{{ sid }} .kz-sort label { display: none; }
#kz-coll-{{ sid }} .kz-viewas button[data-cols="3"] { display: none; }
#kz-coll-{{ sid }} .kz-sort select { min-width: 0; width: 100%; font-size: 1.4rem; }
#kz-coll-{{ sid }} .kz-grid { grid-template-columns: repeat(var(--kz-cols-m, 2), minmax(0, 1fr)); gap: 3rem 1.2rem; }
#kz-coll-{{ sid }} .kz-card__title { font-size: 1.4rem; margin-bottom: .8rem; }
#kz-coll-{{ sid }} .kz-card__price { font-size: 1.4rem; }
#kz-coll-{{ sid }} .kz-card__info { padding-top: 1.2rem; }
#kz-coll-{{ sid }} .kz-grid.is-list .kz-card a { grid-template-columns: 40% 1fr; gap: 1.6rem; }
}
</style>

<div id="kz-coll-{{ sid }}" class="kz-coll">
<div class="kz-wrap">
{%- paginate collection.products by section.settings.products_per_page -%}

{%- if section.settings.show_breadcrumb -%}
<nav class="kz-crumb" aria-label="Breadcrumb">
<a href="{{ routes.root_url }}">Home</a><span class="sep">›</span><span>{{ collection.title | default: 'Shop All' }}</span>
</nav>
{%- endif -%}

<h1 class="kz-title">{{ section.settings.title_override | default: collection.title | default: 'Shop All' }}</h1>
{%- if section.settings.show_description and collection.description != blank -%}
<div class="kz-desc">{{ collection.description }}</div>
{%- endif -%}

{%- comment -%} ---------- FILTERS ---------- {%- endcomment -%}
<form id="kz-form-{{ sid }}" class="kz-filters" action="{{ collection.url }}" method="get">
<input type="hidden" name="sort_by" value="{{ current_sort }}">
{%- if section.settings.show_filters and collection.filters.size > 0 -%}
<div class="kz-filters__label">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true"><path d="M3 4h18l-7 8.5V19l-4 2v-8.5L3 4z"/></svg>
<span>Refined by</span>
</div>

{%- for filter in collection.filters -%}
{%- liquid
assign f_active = filter.active_values.size
if filter.type == 'price_range'
if filter.min_value.value != nil or filter.max_value.value != nil
assign f_active = 1
endif
endif
-%}
<details class="kz-dd">
<summary>
<span>{{ filter.label }}{% if f_active > 0 %}<span class="kz-count">({{ f_active }})</span>{% endif %}</span>
<svg class="kz-chev" viewBox="0 0 12 8" aria-hidden="true"><path d="M1 1l5 5 5-5" fill="none" stroke="currentColor" stroke-width="1.3"/></svg>
</summary>
<div class="kz-dd__panel">
{%- case filter.type -%}
{%- when 'price_range' -%}
<div class="kz-price">
<span>{{ cart.currency.symbol }}</span>
<input type="number" min="0" step="1"
name="{{ filter.min_value.param_name }}"
placeholder="0"
{% if filter.min_value.value %}value="{{ filter.min_value.value | money_without_currency | replace: ',', '' }}"{% endif %}>
<span>to</span>
<input type="number" min="0" step="1"
name="{{ filter.max_value.param_name }}"
placeholder="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
{% if filter.max_value.value %}value="{{ filter.max_value.value | money_without_currency | replace: ',', '' }}"{% endif %}>
</div>
<button type="submit" class="kz-btn">Apply</button>
{%- else -%}
{%- for value in filter.values -%}
<label class="{% if value.count == 0 and value.active == false %}is-disabled{% endif %}">
<input type="checkbox" name="{{ value.param_name }}" value="{{ value.value }}"
{% if value.active %}checked{% endif %}
{% if value.count == 0 and value.active == false %}disabled{% endif %}
data-kz-autosubmit>
<span>{{ value.label }} ({{ value.count }})</span>
</label>
{%- endfor -%}
{%- endcase -%}
</div>
</details>
{%- endfor -%}

{%- if active_filter_count > 0 -%}
<a class="kz-clear" href="{{ collection.url }}?sort_by={{ current_sort }}">Clear all</a>
{%- endif -%}
{%- endif -%}
</form>

{%- comment -%} ---------- VIEW AS + SORT ---------- {%- endcomment -%}
<div class="kz-toolbar">
<div class="kz-count-txt">{{ collection.products_count }} {% if collection.products_count == 1 %}product{% else %}products{% endif %}</div>

{%- if section.settings.show_view_as -%}
<div class="kz-viewas" role="group" aria-label="View as">
<span class="kz-viewas__label">View as</span>
<button type="button" data-cols="1" aria-label="List view"><i></i><i></i><i></i></button>
<button type="button" data-cols="2" aria-label="2 columns"><i></i><i></i></button>
<button type="button" data-cols="3" aria-label="3 columns"><i></i><i></i><i></i></button>
<button type="button" data-cols="4" aria-label="4 columns"><i></i><i></i><i></i><i></i></button>
</div>
{%- else -%}
<div></div>
{%- endif -%}

<div class="kz-sort">
<label for="kz-sort-{{ sid }}">Sort by</label>
<select id="kz-sort-{{ sid }}" data-kz-sort>
{%- for option in collection.sort_options -%}
<option value="{{ option.value }}" {% if option.value == current_sort %}selected{% endif %}>{{ option.name }}</option>
{%- endfor -%}
</select>
</div>
</div>

{%- comment -%} ---------- PRODUCT GRID ---------- {%- endcomment -%}
{%- if collection.products.size > 0 -%}
<ul class="kz-grid" data-kz-grid>
{%- for product in collection.products -%}
<li class="kz-card">
<a href="{{ product.url | within: collection }}">
<div class="kz-card__media">
{%- unless product.available -%}
<span class="kz-badge">Sold out</span>
{%- else -%}
{%- if product.compare_at_price > product.price -%}
<span class="kz-badge kz-badge--sale">Sale</span>
{%- endif -%}
{%- endunless -%}

{%- if product.featured_media -%}
{{ product.featured_media | image_url: width: 1100 | image_tag:
loading: 'lazy',
widths: '360, 540, 720, 900, 1100',
sizes: '(min-width: 990px) 25vw, (min-width: 750px) 33vw, 50vw',
alt: product.featured_media.alt | default: product.title | escape }}
{%- if section.settings.show_second_image and product.media.size > 1 -%}
{{ product.media[1] | image_url: width: 1100 | image_tag:
loading: 'lazy',
class: 'kz-img2',
widths: '360, 540, 720, 900, 1100',
sizes: '(min-width: 990px) 25vw, (min-width: 750px) 33vw, 50vw',
alt: product.title | escape }}
{%- endif -%}
{%- else -%}
{{ 'product-apparel-1' | placeholder_svg_tag }}
{%- endif -%}
</div>
<div class="kz-card__info">
<h3 class="kz-card__title">{{ product.title }}</h3>
<div class="kz-card__price">
{%- if product.price_varies -%}From {% endif -%}
{{ product.price | money }}
{%- if product.compare_at_price > product.price -%}<s>{{ product.compare_at_price | money }}</s>{%- endif -%}
</div>
</div>
</a>
</li>
{%- endfor -%}
</ul>

{%- if paginate.pages > 1 -%}
<nav class="kz-pages" aria-label="Pagination">
{%- if paginate.previous -%}<a href="{{ paginate.previous.url }}" aria-label="Previous page">‹</a>{%- endif -%}
{%- for part in paginate.parts -%}
{%- if part.is_link -%}
<a href="{{ part.url }}">{{ part.title }}</a>
{%- elsif part.title == paginate.current_page -%}
<span class="is-current" aria-current="page">{{ part.title }}</span>
{%- else -%}
<span>{{ part.title }}</span>
{%- endif -%}
{%- endfor -%}
{%- if paginate.next -%}<a href="{{ paginate.next.url }}" aria-label="Next page">›</a>{%- endif -%}
</nav>
{%- endif -%}
{%- else -%}
<div class="kz-empty">
No products match these filters. <a href="{{ collection.url }}">Clear filters</a>
</div>
{%- endif -%}

{%- endpaginate -%}
</div>
</div>

/* Filters: submit when a checkbox changes */
root.querySelectorAll('[data-kz-autosubmit]').forEach(function (el) {
el.addEventListener('change', function () { form.submit(); });
});

/* Only one dropdown open at a time; close when clicking outside */
var dds = root.querySelectorAll('details.kz-dd');
dds.forEach(function (d) {
d.addEventListener('toggle', function () {
if (d.open) dds.forEach(function (o) { if (o !== d) o.open = false; });
});
});
document.addEventListener('click', function (e) {
dds.forEach(function (d) { if (!d.contains(e.target)) d.open = false; });
});

/* Sort by */
var sort = root.querySelector('[data-kz-sort]');
if (sort) sort.addEventListener('change', function () {
form.querySelector('input[name="sort_by"]').value = sort.value;
form.submit();
});

/* View as (column switcher) */
function setCols(n) {
if (!grid) return;
n = parseInt(n, 10) || defaultCols;
var isMobile = window.matchMedia('(max-width: 749px)').matches;
grid.classList.toggle('is-list', n === 1);
if (isMobile) {
grid.style.setProperty('--kz-cols-m', n === 1 ? 1 : 2);
} else {
grid.style.setProperty('--kz-cols', n);
}
root.querySelectorAll('.kz-viewas button').forEach(function (b) {
b.classList.toggle('is-active', parseInt(b.dataset.cols, 10) === n);
});
}
var saved = null;
try { saved = localStorage.getItem(KEY); } catch (e) {}
var startCols = saved ? parseInt(saved, 10) : (window.matchMedia('(max-width: 749px)').matches ? 2 : defaultCols);
setCols(startCols);

root.querySelectorAll('.kz-viewas button').forEach(function (b) {
b.addEventListener('click', function () {
var n = parseInt(b.dataset.cols, 10);
setCols(n);
try { localStorage.setItem(KEY, n); } catch (e) {}
});
});
})();
</script>

{% schema %}
{
"name": "Kaze Collection",
"tag": "section",
"class": "section-kaze-collection",
"settings": [
{ "type": "header", "content": "Layout" },
{ "type": "text", "id": "title_override", "label": "Page title (leave empty to use collection name)" },
{ "type": "checkbox", "id": "show_breadcrumb", "label": "Show breadcrumb (Home › Shop All)", "default": true },
{ "type": "checkbox", "id": "show_description", "label": "Show collection description", "default": false },
{ "type": "checkbox", "id": "show_filters", "label": "Show filters (Refined by)", "default": true },
{ "type": "checkbox", "id": "show_view_as", "label": "Show 'View as' switcher", "default": true },
{
"type": "select", "id": "columns_desktop", "label": "Default columns on desktop", "default": "4",
"options": [
{ "value": "2", "label": "2" },
{ "value": "3", "label": "3" },
{ "value": "4", "label": "4" }
]
},
{ "type": "range", "id": "products_per_page", "label": "Products per page", "min": 8, "max": 48, "step": 4, "default": 24 },
{ "type": "header", "content": "Product cards" },
{
"type": "select", "id": "image_ratio", "label": "Image shape", "default": "7 / 10",
"options": [
{ "value": "7 / 10", "label": "Tall portrait (like reference)" },
{ "value": "3 / 4", "label": "Portrait 3:4" },
{ "value": "2 / 3", "label": "Portrait 2:3" },
{ "value": "1 / 1", "label": "Square" }
]
},
{ "type": "checkbox", "id": "show_second_image", "label": "Show second image on hover", "default": true },
{ "type": "header", "content": "Colours" },
{ "type": "color", "id": "color_bg", "label": "Background", "default": "#FAF6F0" },
{ "type": "color", "id": "color_text", "label": "Text", "default": "#280000" },
{ "type": "color", "id": "color_accent", "label": "Accent (buttons, sale badge)", "default": "#DC7F27" },
{ "type": "header", "content": "Spacing" },
{ "type": "range", "id": "padding_top", "label": "Top padding", "min": 0, "max": 120, "step": 4, "unit": "px", "default": 56 },
{ "type": "range", "id": "padding_bottom", "label": "Bottom padding", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 96 }
],
"enabled_on": { "templates": ["collection"] },
"presets": [ { "name": "Kaze Collection" } ]
}
{% endschema %}