Advanced Subcollections/collection Grid
Theme > Edit Code > Sections > Create section (name.liquid) > Add the code below:
—————————————————————————————————————————
{% schema %}
{
"name": "Sub Collections Grid",
"settings": [
{ "type": "range", "id": "columns_desktop", "label": "Columns (Desktop)", "min": 1, "max": 15, "default": 3 },
{ "type": "range", "id": "columns_mobile", "label": "Columns (Mobile)", "min": 1, "max": 3, "default": 1 },
{ "type": "range", "id": "image_height", "label": "Image Height (Desktop px)", "min": 100, "max": 500, "step": 10, "default": 220 },
{ "type": "range", "id": "image_height_mobile", "label": "Image Height (Mobile px)", "min": 100, "max": 500, "step": 10, "default": 160 },
{ "type": "checkbox", "id": "show_title", "label": "Show Title", "default": true },
{ "type": "checkbox", "id": "show_description", "label": "Show Description", "default": false },
{ "type": "select", "id": "text_layout", "label": "Text Layout", "options": [ { "value": "combined", "label": "Combined (inside box)" }, { "value": "separate", "label": "Separate (below box)" } ], "default": "combined" },
{ "type": "select", "id": "title_alignment", "label": "Title Alignment", "options": [ { "value": "left", "label": "Left" }, { "value": "center", "label": "Center" } ], "default": "center" },
{ "type": "range", "id": "title_font_size", "label": "Title Font Size (px)", "min": 12, "max": 36, "step": 1, "default": 18 },
{ "type": "range", "id": "title_spacing", "label": "Spacing Below Title (px)", "min": 0, "max": 50, "step": 1, "default": 10 },
{ "type": "color", "id": "card_bg", "label": "Card Background Color", "default": "#ffffff" },
{ "type": "color", "id": "card_hover_bg", "label": "Card Hover Background Color", "default": "#f9f9f9" },
{ "type": "color", "id": "section_bg", "label": "Section Background Color", "default": "#ffffff" },
{ "type": "range", "id": "section_width", "label": "Section Max Width (px)", "min": 20, "max": 1600, "step": 20, "default": 1200 },
{ "type": "range", "id": "padding_top", "label": "Padding Top (px)", "min": 0, "max": 200, "step": 5, "default": 40 },
{ "type": "range", "id": "padding_bottom", "label": "Padding Bottom (px)", "min": 0, "max": 200, "step": 5, "default": 40 },
{ "type": "range", "id": "padding_left", "label": "Padding Left (px)", "min": 0, "max": 200, "step": 5, "default": 20 },
{ "type": "range", "id": "padding_right", "label": "Padding Right (px)", "min": 0, "max": 200, "step": 5, "default": 20 },
{ "type": "checkbox", "id": "circle_image", "label": "Make Image & Card Circular", "default": false },
{ "type": "checkbox", "id": "show_title_below_circle", "label": "Show Title Below Circular Image", "default": false }
],
"blocks": [
{
"type": "collection_block",
"name": "Sub Collection",
"settings": [
{ "type": "image_picker", "id": "custom_image", "label": "Custom Image" },
{ "type": "collection", "id": "collection", "label": "Select Collection" },
{ "type": "text", "id": "custom_title", "label": "Custom Title", "default": "Sub Collection Title" }
]
}
],
"max_blocks": 100,
"presets": [ { "name": "Sub Collections Grid" } ]
}
{% endschema %}
<style>
.sub-collections-{{ section.id }} {
background: var(--section-bg);
padding-top: var(--padding-top);
padding-bottom: var(--padding-bottom);
padding-left: var(--padding-left);
padding-right: var(--padding-right);
}
.sub-collections-{{ section.id }} .sub-collections-inner {
margin: 0 auto;
max-width: var(--section-width);
}
.sub-collections-{{ section.id }} .sub-collections-grid {
display: grid;
gap: 24px;
grid-template-columns: repeat(var(--desktop-cols), 1fr);
}
@media screen and (max-width: 767px) {
.sub-collections-{{ section.id }} .sub-collections-grid {
grid-template-columns: repeat(var(--mobile-cols), 1fr);
}
}
.sub-collections-{{ section.id }} .sub-collection-card {
text-align: center;
border-radius: 10px;
overflow: hidden;
transition: all 0.3s ease;
background: var(--card-bg);
border: 1px solid #ddd;
}
.sub-collections-{{ section.id }} .sub-collection-card:hover {
background: var(--card-hover-bg);
transform: translateY(-3px);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
}
.sub-collections-{{ section.id }} .sub-collection-card img {
width: 100%;
object-fit: cover;
display: block;
height: var(--image-height);
}
@media screen and (max-width: 767px) {
.sub-collections-{{ section.id }} .sub-collection-card img {
height: var(--image-height-mobile);
}
}
.sub-collections-{{ section.id }} .sub-collection-card.circle {
border-radius: 50%;
aspect-ratio: 1 / 1;
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.sub-collections-{{ section.id }} .sub-collection-card.circle img {
border-radius: 50%;
aspect-ratio: 1 / 1;
height: 100%;
width: 100%;
object-fit: cover;
}
.sub-collections-{{ section.id }} .sub-collection-text {
padding: 15px;
}
.sub-collections-{{ section.id }} .sub-collection-title {
font-weight: 600;
font-size: var(--title-font-size);
margin-bottom: var(--title-spacing);
text-align: var(--title-align);
color: #222;
}
.sub-collections-{{ section.id }} .sub-collection-description {
font-size: 14px;
color: #666;
text-align: var(--title-align);
}
.sub-collections-{{ section.id }} .separate-title {
font-weight: 600;
font-size: var(--title-font-size);
margin-top: 12px;
margin-bottom: var(--title-spacing);
text-align: var(--title-align);
color: #222;
}
.sub-collections-{{ section.id }} .sub-collections-grid > div {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
<div
class="sub-collections-wrapper sub-collections-{{ section.id }}"
style="
--section-bg: {{ section.settings.section_bg }};
--padding-top: {{ section.settings.padding_top }}px;
--padding-bottom: {{ section.settings.padding_bottom }}px;
--padding-left: {{ section.settings.padding_left }}px;
--padding-right: {{ section.settings.padding_right }}px;
"
>
<div
class="sub-collections-inner"
style="
--desktop-cols: {{ section.settings.columns_desktop }};
--mobile-cols: {{ section.settings.columns_mobile }};
--card-bg: {{ section.settings.card_bg }};
--card-hover-bg: {{ section.settings.card_hover_bg }};
--title-font-size: {{ section.settings.title_font_size }}px;
--title-spacing: {{ section.settings.title_spacing }}px;
--title-align: {{ section.settings.title_alignment }};
--section-width: {{ section.settings.section_width }}px;
--image-height: {{ section.settings.image_height }}px;
--image-height-mobile: {{ section.settings.image_height_mobile }}px;
"
>
<div class="sub-collections-grid">
{% for block in section.blocks %}
{% assign coll = block.settings.collection %}
{% if coll != blank %}
{% assign custom_title = block.settings.custom_title %}
<div>
<a
href="{{ coll.url }}"
class="sub-collection-card{% if section.settings.circle_image %} circle{% endif %}"
>
<img
src="{{ block.settings.custom_image | img_url: '600x600' }}"
alt="{{ custom_title | escape }}"
>
{% if section.settings.text_layout == 'combined' %}
{% if section.settings.show_title or section.settings.show_description %}
<div class="sub-collection-text">
{% if section.settings.show_title %}
<div class="sub-collection-title">{{ custom_title }}</div>
{% endif %}
{% if section.settings.show_description and coll.description != blank %}
<div class="sub-collection-description">{{ coll.description | strip_html | truncate: 100 }}</div>
{% endif %}
</div>
{% endif %}
{% endif %}
</a>
{% if section.settings.circle_image and section.settings.show_title_below_circle %}
<div class="separate-title">{{ custom_title }}</div>
{% elsif section.settings.text_layout == 'separate' and section.settings.show_title %}
<div class="separate-title">{{ custom_title }}</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>