maak deze super lux
{%- render 'section-spacing-collapsing' -%}
{%- if section.settings.show_filters and collection.filters.size > 0 -%}
{%- assign show_filters = true -%}
{%- else -%}
{%- assign show_filters = false -%}
{%- endif -%}
<style>
{%- assign card_blends = false -%}
{%- unless settings.background != 'rgba(0,0,0,0)' and settings.product_card_background != 'rgba(0,0,0,0)' and settings.background != settings.product_card_background -%}
{%- assign card_blends = true -%}
{%- endunless -%}
#shopify-section-{{ section.id }} {
--product-list-gap: {% if section.settings.products_per_row_mobile == '2' %}{% if card_blends %}var(--product-list-row-gap){% endif %} var(--spacing-2){% else %}var(--product-list-row-gap) var(--product-list-column-gap){% endif %};
--product-list-items-per-row: {{ section.settings.products_per_row_mobile | times: 1 }};
--product-list-grid: auto-flow dense / repeat(var(--product-list-items-per-row), minmax(0, 1fr));
--product-list-promo-grid-column: span {{ section.settings.products_per_row_mobile }};
--content-over-media-gap: var(--spacing-8);
}
@media screen and (min-width: 700px) {
#shopify-section-{{ section.id }} {
--product-list-gap: var(--product-list-row-gap) var(--product-list-column-gap);
--product-list-items-per-row: 2;
--product-list-promo-grid-column: span 1;
}
}
@media screen and (min-width: 1000px) {
#shopify-section-{{ section.id }} {
--product-list-items-per-row: {% if section.settings.filter_layout == 'sidebar' %}2{% else %}3{% endif %};
--product-list-promo-grid-column: span 2;
}
}
@media screen and (min-width: 1200px) {
#shopify-section-{{ section.id }} {
--product-list-items-per-row: {% if section.settings.filter_layout == 'sidebar' %}{{ section.settings.products_per_row_desktop | at_most: 3 }}{% else %}4{% endif %};
}
}
@media screen and (min-width: 1400px) {
#shopify-section-{{ section.id }} {
--product-list-items-per-row: {{ section.settings.products_per_row_desktop }};
}
{%- for block in section.blocks -%}
#block-{{ section.id }}-{{ block.id }} {
--product-list-promo-grid-column: span {{ block.settings.column_span }};
{%- if block.settings.column_span == '2' -%}
--content-over-media-column-gap: var(--spacing-12);
{%- endif -%}
}
{%- endfor -%}
}
/ Import Montserrat font /
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
/ EBAG COLLECTION STYLING /
.collection-hero {
text-align: center;
padding: 1.5rem 1rem 1rem;
margin-bottom: 1.5rem;
position: relative;
}
/ Back arrow to homepage /
.collection-back-arrow {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
text-decoration: none;
color: #000;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 0.3rem;
transition: opacity 0.3s ease;
}
.collection-back-arrow:hover {
opacity: 0.7;
}
.collection-back-arrow svg {
width: 16px;
height: 16px;
}
.collection-hero__title {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 0.875rem; / 14px /
letter-spacing: 0.08em;
text-transform: uppercase;
color: #000;
margin: 0 0 0.3rem 0;
line-height: 1.2;
}
.collection-hero__subtitle {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
font-size: 0.75rem;
color: #666;
line-height: 1.5;
max-width: 700px;
margin: 0 auto;
letter-spacing: 0.02em;
}
/ Product grid container /
.collection__results {
width: 100%;
}
/ Product list grid /
.product-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
width: 100%;
}
@media screen and (min-width: 768px) {
.product-list {
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
}
@media screen and (min-width: 1200px) {
.product-list {
grid-template-columns: repeat(4, 1fr);
gap: 2.5rem;
}
}
/ Product card styling /
.product-card {
background: transparent !important;
border: none !important;
padding: 0;
margin: 0;
position: relative;
overflow: hidden;
}
/ Product image container /
.product-card__figure {
position: relative;
overflow: hidden;
margin-bottom: 1rem;
width: 100%;
padding-top: 100%; / Creates 1:1 aspect ratio /
background: #f8f8f8;
}
/ Perfect square images /
.product-card__image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.product-card__image--secondary {
opacity: 0;
transition: opacity 0.6s ease;
}
.product-card:hover .product-card__image--primary {
transform: scale(1.05);
}
.product-card:hover .product-card__image--secondary {
opacity: 1;
}
/ NEW label styling /
.new-label {
position: absolute;
top: 12px;
left: 12px;
background: #000;
color: #fff;
padding: 4px 10px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
z-index: 10;
pointer-events: none;
}
@media screen and (max-width: 767px) {
.new-label {
top: 8px;
left: 8px;
font-size: 0.6rem;
padding: 3px 8px;
}
}
/ Quick buy button /
.product-card__quick-buy {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 1rem;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
transform: translateY(100%);
transition: transform 0.3s ease;
z-index: 10;
}
.product-card:hover .product-card__quick-buy {
transform: translateY(0);
}
.product-card__quick-buy button {
background: #fff;
color: #000;
border: none;
padding: 0.8rem 1.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
width: 100%;
transition: all 0.3s ease;
}
.product-card__quick-buy button:hover {
background: #000;
color: #fff;
}
/ Product info /
.product-card__info {
padding: 0.5rem 0;
}
.product-card__title {
margin-bottom: 0.3rem;
}
.product-card__title a {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 0.85rem;
color: #000;
text-decoration: none;
letter-spacing: 0.03em;
text-transform: uppercase;
transition: color 0.3s ease;
}
.product-card__title a:hover {
color: #666;
}
.price-list {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 0.85rem;
color: #000;
letter-spacing: 0.01em;
}
/ Filter and sort styling /
.collection-top-bar {
border-bottom: 1px solid #eee;
padding-bottom: 1.5rem;
margin-bottom: 2rem;
}
.facets__floating-filter button,
.collection-top-bar__filter-list summary,
.collection-top-bar__sort-by select {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 0.85rem;
color: #000;
background: #fff;
border: 1px solid #ddd;
padding: 0.6rem 1.2rem;
border-radius: 0;
min-height: 40px;
}
.collection-top-bar__sort-by select {
padding-right: 2.5rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 9L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 12px 12px;
appearance: none;
}
/ Active filters /
.active-facets {
margin: 1rem 0;
}
.active-facets__button {
background: transparent;
border: 1px solid #ddd;
color: #000;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
/ Pagination /
.collection__pagination {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid #eee;
}
.pagination__item {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 0.9rem;
color: #000;
}
.pagination__item--current {
border-bottom: 2px solid #000;
}
/ Empty state /
.empty-state {
text-align: center;
padding: 4rem 1rem;
}
.empty-state .h4 {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 1rem;
margin-bottom: 1rem;
}
/ Mobile adjustments /
@media screen and (max-width: 767px) {
.collection-hero {
padding: 1.2rem 1rem 0.8rem;
margin-bottom: 1.2rem;
}
.collection-back-arrow {
left: 0.5rem;
font-size: 0.8rem;
}
.collection-back-arrow svg {
width: 14px;
height: 14px;
}
.collection-hero__title {
font-size: 0.875rem; / 14px blijft hetzelfde /
padding: 0 2rem;
}
.collection-hero__subtitle {
font-size: 0.7rem;
}
.product-list {
gap: 1rem;
}
.product-card__quick-buy {
position: relative;
transform: none;
background: transparent;
padding: 0.5rem 0 0 0;
}
.product-card__quick-buy button {
background: #000;
color: #fff;
padding: 0.7rem;
font-size: 0.75rem;
}
.collection-top-bar {
padding-bottom: 1rem;
margin-bottom: 1.5rem;
}
}
/ Ensure sharp images /
img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
backface-visibility: hidden;
}
</style>
<div class="container">
{%- if collection.all_products_count == 0 -%}
<div class="empty-state">
<div class="empty-state__icon-wrapper">
{%- render 'icon' with 'picto-stop', width: 32, height: 32, stroke_width: 1 -%}
<span class="count-bubble count-bubble--lg">0</span>
</div>
<div class="prose">
<p class="h4">{{ 'collection.general.empty_collection' | t }}</p>
{%- assign button_content = 'collection.general.continue_shopping' | t -%}
{%- render 'button', href: routes.all_products_collection_url, size: 'xl', content: button_content -%}
</div>
</div>
{%- else -%}
<!-- Collection Header -->
<div class="collection-hero">
<a href="{{ routes.root_url }}" class="collection-back-arrow">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="19" y1="12" x2="5" y2="12"></line>
<polyline points="12 19 5 12 12 5"></polyline>
</svg>
<span>terug</span>
</a>
<h1 class="collection-hero__title">GET YOUR EBAG</h1>
{%- if collection.description != blank -%}
<div class="collection-hero__subtitle">{{ collection.description }}</div>
{%- endif -%}
</div>
{%- paginate collection.products by section.settings.products_per_page -%}
<div class="collection {% if show_filters %}collection--filters-{{ section.settings.filter_layout | escape }}{% endif %}">
{%- if show_filters or section.settings.show_sort_by -%}
<facet-drawer header-bordered id="facets-drawer" class="facets-drawer drawer" open-from="left">
<p class="h5" slot="header">{{ 'collection.faceting.filters' | t }}</p>
{%- render 'facets-vertical', results: collection, show_filters: true, show_sort_by: section.settings.show_sort_by, update_on_change: false -%}
</facet-drawer>
{%- if section.settings.filter_layout == 'horizontal' -%}
{%- render 'collection-top-bar', results: collection, show_filters: show_filters, show_active_filters: show_filters, show_sort_by: section.settings.show_sort_by -%}
{%- else -%}
{%- render 'collection-top-bar', results: collection, show_filters: false, show_active_filters: show_filters, show_sort_by: section.settings.show_sort_by -%}
{%- endif -%}
<facet-floating-filter class="facets__floating-filter md:hidden">
{%- assign filter_label = 'collection.faceting.filter_and_sort' | t -%}
{%- render 'button', size: 'xl', content: filter_label, icon: 'filter', style: 'fill', background: settings.text_color, text_color: settings.background, aria_controls: 'facets-drawer' -%}
</facet-floating-filter>
{%- endif -%}
{%- if show_filters and section.settings.filter_layout == 'sidebar' -%}
<div class="collection__facets">
<safe-sticky class="collection__facets-scroller">
{%- render 'facets-vertical', results: collection, show_filters: true, show_sort_by: false, update_on_change: true -%}
</safe-sticky>
</div>
{%- endif -%}
<div class="collection__results">
{%- if collection.products_count == 0 -%}
<div class="empty-state">
<div class="empty-state__icon-wrapper">
{%- render 'icon' with 'picto-stop', width: 32, height: 32, stroke_width: 1 -%}
<span class="count-bubble count-bubble--lg">0</span>
</div>
<div class="prose">
<p class="h5">{{ 'collection.faceting.no_results' | t }}</p>
{%- assign button_content = 'collection.faceting.clear_filters' | t -%}
{%- render 'button', href: collection.url, is: 'facet-link', size: 'xl', content: button_content -%}
</div>
</div>
{%- else -%}
<div class="v-stack gap-6">
<div class="v-stack gap-4 md:hidden">
<p class="text-center">{{ 'collection.products_count' | t: count: collection.products_count }}</p>
{%- render 'active-facets', results: collection -%}
</div>
<reveal-items selector=".product-list > *">
<product-list class="product-list" role="region" aria-live="polite">
{%- for product in collection.products -%}
{%- for block in section.blocks -%}
{%- if forloop.parentloop.index != block.settings.position -%}
{%- continue -%}
{%- endif -%}
<div id="block-{{ section.id }}-{{ block.id }}" {% render 'surface', class: 'product-list__promo group', text_color: block.settings.text_color %} {{ block.shopify_attributes }}>
<a {% if block.settings.link_url %}href="{{ block.settings.link_url }}"{% endif %} class="content-over-media h-full rounded-sm" style="--content-over-media-overlay: {{ block.settings.overlay_color.rgb }} / {{ block.settings.overlay_opacity | divided_by: 100.0 }}">
{%- case block.type -%}
{%- when 'promotion_image' -%}
{%- if block.settings.image != blank -%}
{%- capture image_class -%}zoom-image {% if block.settings.mobile_image != blank %}hidden sm:block{% endif %}{%- endcapture -%}
{%- capture sizes -%}(max-width: 699px) 100vw, {{ 400 | times: block.settings.column_span }}px{%- endcapture -%}
{{- block.settings.image | image_url: width: block.settings.image.width | image_tag: loading: 'lazy', sizes: sizes, widths: '200,300,400,500,600,700,800,900,1000,1200,1400,1600', class: image_class -}}
{%- endif -%}
{%- if block.settings.mobile_image != blank -%}
{{- block.settings.mobile_image | image_url: width: block.settings.mobile_image.width | image_tag: loading: 'lazy', widths: '200,300,400,500,600,700,800,900,1000,1200', class: 'zoom-image sm:hidden' -}}
{%- endif -%}
{%- when 'promotion_video' -%}
{%- if block.settings.video -%}
<video-media autoplay>
{{- block.settings.video | video_tag: playsinline: true, muted: true, loop: true, preload: 'metadata' -}}
</video-media>
{%- else -%}
<video-media host="{{ block.settings.external_video_url.type }}" autoplay>
<template>
{%- if block.settings.external_video_url.type == 'youtube' -%}
<iframe src="https://www.youtube.com/embed/{{ block.settings.external_video_url.id }}?playsinline=1&autoplay=1&controls=0&mute=1&loop=1&playlist={{ block.settings.external_video_url.id }}&enablejsapi=1&rel=0&modestbranding=1&origin={{ 'https://' | append: request.host | url_encode }}" allow="autoplay; encrypted-media" allowfullscreen="allowfullscreen"></iframe>
{%- elsif block.settings.external_video_url.type == 'vimeo' -%}
<iframe src="https://player.vimeo.com/video/{{ block.settings.external_video_url.id }}?autoplay=1&autopause=1&background=1&loop=1&muted=1&transparent=0&responsive=1&portrait=0&title=0&byline=0&color={{ settings.text_color | remove_first: '#' }}" allow="autoplay; encrypted-media;" allowfullscreen="allowfullscreen"></iframe>
{%- endif -%}
</template>
</video-media>
{%- endif -%}
{%- endcase -%}
{%- if block.settings.title != blank or block.settings.link_text != blank -%}
<div class="{{ block.settings.text_position }}">
<div class="v-stack gap-4 sm:gap-6 {% if block.settings.text_position contains 'text-center' %}justify-items-center{% elsif block.settings.text_position contains 'text-end' %}justify-items-end{% endif %}">
{%- if block.settings.title != blank or block.settings.content != blank -%}
<div class="prose">
{%- if block.settings.title != blank -%}
<p class="{{ block.settings.heading_tag }}">{{ block.settings.title | escape }}</p>
{%- endif -%}
{{- block.settings.content -}}
</div>
{%- endif -%}
{%- if block.settings.link_text != blank -%}
<div class="h-stack gap-4">
<span class="bold">{{- block.settings.link_text | escape -}}</span>
<div class="circle-button circle-button--sm ring-current">
<span class="sr-only">{{ 'general.accessibility.previous' | t }}</span>
<span class="animated-arrow"></span>
</div>
</div>
{%- endif -%}
</div>
</div>
{%- endif -%}
</a>
</div>
{%- endfor -%}
<!-- Modified product card with NEW label for EBAG AIR and EBAG JET -->
{%- capture product_card -%}
{%- render 'product-card', product: product, stacked: true, show_badges: false -%}
{%- endcapture -%}
{%- if product.title contains 'EBAG AIR' or product.title contains 'EBAG JET' -%}
<div class="product-card-wrapper">
<div class="product-card">
<div class="product-card__figure">
<span class="new-label">NEW</span>
{{ product_card | split: '<div class="product-card__figure">' | last | split: '</div>' | first | prepend: '<div class="product-card__figure">' | append: '</div>' }}
</div>
<div class="product-card__info">
{{ product_card | split: '<div class="product-card__info">' | last | split: '</div>' | first | prepend: '<div class="product-card__info">' | append: '</div>' }}
</div>
</div>
</div>
{%- else -%}
{{ product_card }}
{%- endif -%}
{%- endfor -%}
</product-list>
</reveal-items>
</div>
{%- endif -%}
</div>
{%- render 'pagination', paginate: paginate, facet: true, class: 'collection__pagination' -%}
</div>
{%- endpaginate -%}
{%- endif -%}
</div>
{% schema %}
{
"name": "Collection page",
"class": "shopify-section--main-collection",
"tag": "section",
"max_blocks": 5,
"blocks": [
{
"type": "promotion_image",
"name": "Promotion image",
"settings": [
{
"type": "paragraph",
"content": "Blocks may be hidden if not enough products are visible."
},
{
"type": "range",
"id": "position",
"min": 1,
"max": 50,
"label": "Position in grid",
"default": 4
},
{
"type": "select",
"id": "column_span",
"label": "Desktop item size",
"info": "Size is adjusted automatically on smaller screen to improve user experience.",
"options": [
{
"value": "1",
"label": "1 column"
},
{
"value": "2",
"label": "2 columns"
}
],
"default": "1"
},
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "1600 x 1000px .jpg recommended"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Mobile image",
"info": "1000 x 1000px .jpg recommended. Default to desktop image."
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Promote a product or a temporary offer"
},
{
"type": "richtext",
"id": "content",
"label": "Content"
},
{
"type": "url",
"id": "link_url",
"label": "Link URL"
},
{
"type": "text",
"id": "link_text",
"label": "Link text",
"default": "View all"
},
{
"type": "select",
"id": "heading_tag",
"label": "Heading style",
"options": [
{
"value": "h1",
"label": "H1"
},
{
"value": "h2",
"label": "H2"
},
{
"value": "h3",
"label": "H3"
},
{
"value": "h4",
"label": "H4"
},
{
"value": "h5",
"label": "H5"
},
{
"value": "h6",
"label": "H6"
}
],
"default": "h4"
},
{
"type": "select",
"id": "text_position",
"label": "Content position",
"options": [
{
"value": "place-self-start text-start",
"label": "Top left"
},
{
"value": "place-self-start-center text-center",
"label": "Top center"
},
{
"value": "place-self-start-end text-end",
"label": "Top right"
},
{
"value": "place-self-center-start text-start",
"label": "Middle left"
},
{
"value": "place-self-center text-center",
"label": "Middle center"
},
{
"value": "place-self-center-end text-end",
"label": "Middle right"
},
{
"value": "place-self-end-start text-start",
"label": "Bottom left"
},
{
"value": "place-self-end-center text-center",
"label": "Bottom center"
},
{
"value": "place-self-end text-end",
"label": "Bottom right"
}
],
"default": "place-self-end-start text-start"
},
{
"type": "header",
"content": "Colors"
},
{
"type": "color",
"id": "text_color",
"label": "Text",
"default": "#ffffff"
},
{
"type": "color",
"id": "overlay_color",
"label": "Overlay",
"default": "#000000"
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Overlay opacity",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"default": 30
}
]
},
{
"type": "promotion_video",
"name": "Promotion video",
"settings": [
{
"type": "paragraph",
"content": "Blocks may be hidden if not enough products are visible. Video are muted to allow autoplay. For best visual results and avoid platform branding, we recommend uploading a MP4 file."
},
{
"type": "range",
"id": "position",
"min": 1,
"max": 50,
"label": "Position in grid",
"default": 4
},
{
"type": "select",
"id": "column_span",
"label": "Desktop item size",
"info": "Size is adjusted automatically on smaller screen to improve user experience.",
"options": [
{
"value": "1",
"label": "1 column"
},
{
"value": "2",
"label": "2 columns"
}
],
"default": "1"
},
{
"type": "video",
"id": "video",
"label": "Video",
"info": "Replaces external video if both are set."
},
{
"type": "video_url",
"id": "external_video_url",
"accept": ["vimeo", "youtube"],
"label": "External video URL",
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Promote a product or a temporary offer"
},
{
"type": "richtext",
"id": "content",
"label": "Content"
},
{
"type": "url",
"id": "link_url",
"label": "Link URL"
},
{
"type": "text",
"id": "link_text",
"label": "Link text",
"default": "View all"
},
{
"type": "select",
"id": "heading_tag",
"label": "Heading style",
"options": [
{
"value": "h1",
"label": "H1"
},
{
"value": "h2",
"label": "H2"
},
{
"value": "h3",
"label": "H3"
},
{
"value": "h4",
"label": "H4"
},
{
"value": "h5",
"label": "H5"
},
{
"value": "h6",
"label": "H6"
}
],
"default": "h4"
},
{
"type": "select",
"id": "text_position",
"label": "Content position",
"options": [
{
"value": "place-self-start text-start",
"label": "Top left"
},
{
"value": "place-self-start-center text-center",
"label": "Top center"
},
{
"value": "place-self-start-end text-end",
"label": "Top right"
},
{
"value": "place-self-center-start text-start",
"label": "Middle left"
},
{
"value": "place-self-center text-center",
"label": "Middle center"
},
{
"value": "place-self-center-end text-end",
"label": "Middle right"
},
{
"value": "place-self-end-start text-start",
"label": "Bottom left"
},
{
"value": "place-self-end-center text-center",
"label": "Bottom center"
},
{
"value": "place-self-end text-end",
"label": "Bottom right"
}
],
"default": "place-self-end-start text-start"
},
{
"type": "header",
"content": "Colors"
},
{
"type": "color",
"id": "text_color",
"label": "Text",
"default": "#ffffff"
},
{
"type": "color",
"id": "overlay_color",
"label": "Overlay",
"default": "#000000"
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Overlay opacity",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"default": 30
}
]
}
],
"settings": [
{
"type": "range",
"id": "products_per_page",
"label": "Products per page",
"min": 8,
"max": 50,
"step": 1,
"default": 24
},
{
"type": "select",
"id": "products_per_row_mobile",
"label": "Products per row (mobile)",
"options": [
{
"value": "1",
"label": "1"
},
{
"value": "2",
"label": "2"
}
],
"default": "2"
},
{
"type": "range",
"min": 2,
"max": 5,
"id": "products_per_row_desktop",
"label": "Products per row (desktop)",
"info": "For best results, limit to 4 when using sidebar filtering. On small screen size, products per row is limited to 2 (with sidebar) or 3 (without sidebar) to maximize readability",
"default": 4
},
{
"type": "header",
"content": "Filters & sort"
},
{
"type": "select",
"id": "filter_layout",
"label": "Desktop layout",
"options": [
{
"value": "sidebar",
"label": "Sidebar"
},
{
"value": "horizontal",
"label": "Horizontal"
},
{
"value": "drawer",
"label": "Drawer"
}
],
"default": "sidebar"
},
{
"type": "checkbox",
"id": "show_sort_by",
"label": "Show sort by",
"default": true
},
{
"type": "checkbox",
"id": "show_filters",
"label": "Show filters",
"info": "[Customize filters](/admin/menus)",
"default": true
},
{
"type": "checkbox",
"id": "show_filter_group_name",
"label": "Show group name",
"info": "Group name will be shown inside selected filters.",
"default": false
},
{
"type": "checkbox",
"id": "show_color_swatch",
"label": "Show filter color swatch",
"default": true
},
{
"type": "checkbox",
"id": "show_empty_filter_values",
"label": "Show empty filter values",
"default": false
},
{
"type": "checkbox",
"id": "show_filter_values_count",
"label": "Show filter values count",
"default": true
},
{
"type": "checkbox",
"id": "open_first_filter_group",
"label": "Open first group by default",
"default": false
}
]
}
{% endschema %}