← back to Dw Theme Compact Toolbar
sections/collection-list.liquid
169 lines
<script
type="application/json"
data-section-id="{{ section.id }}"
data-section-type="static-collections-list"
>
</script>
{% assign use_masonry = false %}
{% if section.settings.layout == 'masonry' %}
{% assign use_masonry = true %}
{% endif %}
<section
class="collections-list-section {% unless use_masonry %}collections-list-grid{% endunless %}"
{% if use_masonry %}data-collection-masonry{% endif %}>
<h1 class="page-title">{{ 'collections.listing.header' | t }}</h1>
{% render 'breadcrumbs' %}
<!-- STICKY SHOP BY COLOR BAR -->
<div id="dw-color-bar" style="position:sticky;top:0;z-index:100;background:#FAF9F6;border-bottom:1px solid #e5e5e5;padding:12px 0;margin:0 -20px 24px;transition:box-shadow 0.3s;">
<div style="max-width:1200px;margin:0 auto;padding:0 16px;">
<p style="font-family:-apple-system,system-ui,sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:#999;margin:0 0 10px;text-align:center;">Shop by Color</p>
<div style="display:flex;flex-wrap:nowrap;overflow-x:auto;justify-content:center;gap:16px;scrollbar-width:none;-ms-overflow-style:none;padding:2px 0;">
<a href="/collections/blue-wallpaper" style="text-decoration:none;text-align:center;flex-shrink:0;"><div style="width:36px;height:36px;border-radius:50%;background:#3B5998;margin:0 auto 4px;border:2px solid #eee;box-shadow:0 1px 4px rgba(0,0,0,0.08);"></div><span style="font-family:-apple-system,system-ui,sans-serif;font-size:10px;color:#666;">Blue</span></a>
<a href="/collections/green-wallpaper-collection" style="text-decoration:none;text-align:center;flex-shrink:0;"><div style="width:36px;height:36px;border-radius:50%;background:#4A7C59;margin:0 auto 4px;border:2px solid #eee;box-shadow:0 1px 4px rgba(0,0,0,0.08);"></div><span style="font-family:-apple-system,system-ui,sans-serif;font-size:10px;color:#666;">Green</span></a>
<a href="/collections/gold-wallpaper" style="text-decoration:none;text-align:center;flex-shrink:0;"><div style="width:36px;height:36px;border-radius:50%;background:#C4995C;margin:0 auto 4px;border:2px solid #eee;box-shadow:0 1px 4px rgba(0,0,0,0.08);"></div><span style="font-family:-apple-system,system-ui,sans-serif;font-size:10px;color:#666;">Gold</span></a>
<a href="/collections/red-wallpaper-collection" style="text-decoration:none;text-align:center;flex-shrink:0;"><div style="width:36px;height:36px;border-radius:50%;background:#9B2335;margin:0 auto 4px;border:2px solid #eee;box-shadow:0 1px 4px rgba(0,0,0,0.08);"></div><span style="font-family:-apple-system,system-ui,sans-serif;font-size:10px;color:#666;">Red</span></a>
<a href="/collections/pink-wallcovering-2" style="text-decoration:none;text-align:center;flex-shrink:0;"><div style="width:36px;height:36px;border-radius:50%;background:#D4768B;margin:0 auto 4px;border:2px solid #eee;box-shadow:0 1px 4px rgba(0,0,0,0.08);"></div><span style="font-family:-apple-system,system-ui,sans-serif;font-size:10px;color:#666;">Pink</span></a>
<a href="/collections/purple" style="text-decoration:none;text-align:center;flex-shrink:0;"><div style="width:36px;height:36px;border-radius:50%;background:#6B3FA0;margin:0 auto 4px;border:2px solid #eee;box-shadow:0 1px 4px rgba(0,0,0,0.08);"></div><span style="font-family:-apple-system,system-ui,sans-serif;font-size:10px;color:#666;">Purple</span></a>
<a href="/collections/orange" style="text-decoration:none;text-align:center;flex-shrink:0;"><div style="width:36px;height:36px;border-radius:50%;background:#D2691E;margin:0 auto 4px;border:2px solid #eee;box-shadow:0 1px 4px rgba(0,0,0,0.08);"></div><span style="font-family:-apple-system,system-ui,sans-serif;font-size:10px;color:#666;">Orange</span></a>
<a href="/collections/yellow-wallpaper-collection" style="text-decoration:none;text-align:center;flex-shrink:0;"><div style="width:36px;height:36px;border-radius:50%;background:#DAA520;margin:0 auto 4px;border:2px solid #eee;box-shadow:0 1px 4px rgba(0,0,0,0.08);"></div><span style="font-family:-apple-system,system-ui,sans-serif;font-size:10px;color:#666;">Yellow</span></a>
<a href="/collections/black" style="text-decoration:none;text-align:center;flex-shrink:0;"><div style="width:36px;height:36px;border-radius:50%;background:#1a1a1a;margin:0 auto 4px;border:2px solid #eee;box-shadow:0 1px 4px rgba(0,0,0,0.08);"></div><span style="font-family:-apple-system,system-ui,sans-serif;font-size:10px;color:#666;">Black</span></a>
<a href="/collections/white-wallpaper-collection" style="text-decoration:none;text-align:center;flex-shrink:0;"><div style="width:36px;height:36px;border-radius:50%;background:#F5F5F0;margin:0 auto 4px;border:2px solid #ddd;box-shadow:0 1px 4px rgba(0,0,0,0.08);"></div><span style="font-family:-apple-system,system-ui,sans-serif;font-size:10px;color:#666;">White</span></a>
<a href="/collections/grey-silver" style="text-decoration:none;text-align:center;flex-shrink:0;"><div style="width:36px;height:36px;border-radius:50%;background:#808080;margin:0 auto 4px;border:2px solid #eee;box-shadow:0 1px 4px rgba(0,0,0,0.08);"></div><span style="font-family:-apple-system,system-ui,sans-serif;font-size:10px;color:#666;">Gray</span></a>
<a href="/collections/brown-wallpaper-collection" style="text-decoration:none;text-align:center;flex-shrink:0;"><div style="width:36px;height:36px;border-radius:50%;background:#6B4226;margin:0 auto 4px;border:2px solid #eee;box-shadow:0 1px 4px rgba(0,0,0,0.08);"></div><span style="font-family:-apple-system,system-ui,sans-serif;font-size:10px;color:#666;">Brown</span></a>
<a href="/collections/beige-cream-wallpaper-collection" style="text-decoration:none;text-align:center;flex-shrink:0;"><div style="width:36px;height:36px;border-radius:50%;background:#C8B99A;margin:0 auto 4px;border:2px solid #eee;box-shadow:0 1px 4px rgba(0,0,0,0.08);"></div><span style="font-family:-apple-system,system-ui,sans-serif;font-size:10px;color:#666;">Beige</span></a>
<a href="/collections/grey-silver" style="text-decoration:none;text-align:center;flex-shrink:0;"><div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#C0C0C0,#E8E8E8);margin:0 auto 4px;border:2px solid #eee;box-shadow:0 1px 4px rgba(0,0,0,0.08);"></div><span style="font-family:-apple-system,system-ui,sans-serif;font-size:10px;color:#666;">Silver</span></a>
<a href="/collections/metallic-wallpaper-collections" style="text-decoration:none;text-align:center;flex-shrink:0;"><div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#B8860B,#DAA520,#F0E68C);margin:0 auto 4px;border:2px solid #eee;box-shadow:0 1px 4px rgba(0,0,0,0.08);"></div><span style="font-family:-apple-system,system-ui,sans-serif;font-size:10px;color:#666;">Metallic</span></a>
<a href="/collections/coral" style="text-decoration:none;text-align:center;flex-shrink:0;"><div style="width:36px;height:36px;border-radius:50%;background:#FF6F61;margin:0 auto 4px;border:2px solid #eee;box-shadow:0 1px 4px rgba(0,0,0,0.08);"></div><span style="font-family:-apple-system,system-ui,sans-serif;font-size:10px;color:#666;">Coral</span></a>
<a href="/collections/turquoise" style="text-decoration:none;text-align:center;flex-shrink:0;"><div style="width:36px;height:36px;border-radius:50%;background:#40B5AD;margin:0 auto 4px;border:2px solid #eee;box-shadow:0 1px 4px rgba(0,0,0,0.08);"></div><span style="font-family:-apple-system,system-ui,sans-serif;font-size:10px;color:#666;">Teal</span></a>
</div>
</div>
</div>
<style>
#dw-color-bar::-webkit-scrollbar{display:none}
#dw-color-bar div::-webkit-scrollbar{display:none}
#dw-color-bar a:hover div{transform:scale(1.15);transition:transform 0.2s}
@media(max-width:768px){#dw-color-bar>div>div{justify-content:flex-start;padding:0 8px}}
</style>
<!-- END STICKY COLOR BAR -->
{% assign using_linklist = false %}
{% if linklists['all-collections'] and linklists['all-collections'].links.size > 0 %}
{% assign using_linklist = true %}
{% endif %}
{% assign collections_per_page = section.settings.collections_per_row | times: section.settings.collections_number_of_rows %}
<div class="collections-list-content">
{%- if using_linklist -%}
{%- comment -%} Linklist mode is unpaginated (all links on one page) — no infinite scroll needed. {%- endcomment -%}
<div
class="rows-of-{{ section.settings.collections_per_row }} {% if use_masonry %}masonry-grid{% endif %}"
{% if use_masonry %}data-masonry-grid{% endif %}
>
{%- if use_masonry -%}
<div class="masonry-grid-sizer" data-masonry-sizer></div>
{%- endif -%}
{% for link in linklists['all-collections'].links %}
{%
render 'collection-list-item',
collection_list_item: 'linklist',
link: link,
use_masonry: use_masonry,
description: section.settings.show_description
%}
{% endfor %}
</div>
{%- else -%}
{%- paginate collections by collections_per_page -%}
{%- comment -%} DW infinite scroll: wrapper carries the next-page URL; dw-native-infinite.js appends on scroll. {%- endcomment -%}
<div
data-dw-infinite
data-dw-infinite-items=".dw-collections-grid"
data-dw-infinite-next="{% if paginate.next %}{{ paginate.next.url }}{% endif %}"
data-dw-infinite-page="{{ paginate.current_page }}"
>
<div
class="dw-collections-grid rows-of-{{ section.settings.collections_per_row }} {% if use_masonry %}masonry-grid{% endif %}"
{% if use_masonry %}data-masonry-grid{% endif %}
>
{%- if use_masonry -%}
<div class="masonry-grid-sizer" data-masonry-sizer></div>
{%- endif -%}
{%- for collection in collections -%}
{%-
render 'collection-list-item',
collection_list_item: 'collection',
collection: collection,
use_masonry: use_masonry,
description: section.settings.show_description
-%}
{%- endfor -%}
</div>
<div data-dw-infinite-pager>
{% render 'pagination', paginate: paginate %}
</div>
</div>
{%- endpaginate -%}
{% endif %}
</div>
</section>
<script src="{{ 'dw-native-infinite.js' | asset_url }}" defer></script>
{% schema %}
{
"name": "Collection list page",
"settings": [
{
"type": "select",
"id": "layout",
"label": "Layout",
"options": [
{
"value": "default",
"label": "Default"
},
{
"value": "masonry",
"label": "Masonry"
}
],
"default": "default"
},
{
"type": "checkbox",
"id": "show_description",
"label": "Show description",
"default": false
},
{
"type": "range",
"id": "collections_per_row",
"label": "Collections per row",
"min": 2,
"max": 4,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "collections_number_of_rows",
"label": "Rows",
"min": 2,
"max": 6,
"step": 1,
"default": 6
}
]
}
{% endschema %}