All things Shopify and commerce
Hello,
Could someone please help me figure out where the issue is with this code? I am just trying to have a page that automatically loads the "YMCA" Collection.
Thanks! (Code Below)
Nick
{% for collection in collections %}
{% if collection.title == 'YMCA' %}
{% paginate collection.products by 12 %}
<header class="collection-header{% if collection.image %} collection-header--banner{% endif %}" {% if collection.image %}style="background-image: url({{ collection.image | img_url: '2000x' }}); background-size: cover; background-repeat: no-repeat; background-position: center center;"{% endif %} role="banner">
<h1>{{ collection.title }}</h1>
{% if collection.description != blank %}
<div class="page-width">
<div class="collection__desc rte">
{{ collection.description | newline_to_br }}
</div>
</div>
{% endif %}
{% if collection.image %}
<div class="collection-header__overlay">
</div>
{% endif %}
</header>
{% assign blocks_size = section.blocks | size %}
{% if blocks_size > 0 %}
<div class="collection__icon-bar">
<div class="page-width js-plp-icon-bar">
{% for block in section.blocks %}
<div class="icon__column">
<span class="icon__column__img">
<img src="{{ block.settings.icon_bar_img | img_url: 'master' }}" alt="{{ block.settings.icon_bar_img.alt }}">
</span>
<span class="icon__column__text">{{ block.settings.icon_bar_text }}</span>
</div>
{% endfor %}
</div>
</div>
{% endif %}
<div class="collection-grid-container">
<div class="collection-grid collection-grid--desktop-{{ section.settings.items_per_row_desktop }} collection-grid--mobile-{{ section.settings.items_per_row_mobile }} page-width">
{% for product in collection.products %}
{% include 'collection-item' %}
{% endfor %}
</div>
{% if paginate.pages > 1 %}
{% include 'pagination' %}
{% endif %}
</div>
{% endpaginate %}
{% style %}
.collection-grid-container {
background-color: {{ section.settings.background_color | default: 'transparent' }};
}
.collection__grid-item img {
border-radius: {{ section.settings.image_border_radius }}%;
{% if section.settings.image_border %}
border: 1px solid {{ settings.color_border }};
{% endif %}
}
{% if section.settings.product_text_color %}
.collection__grid-item .product__title,
.collection__grid-item.collection__grid-item--text-under .product__title {
color: {{ section.settings.product_text_color }};
}
.collection__grid-item .collection__grid-item__price,
.collection__grid-item .compare-price {
color: {{ section.settings.product_text_color }};
}
{% endif %}
{% endstyle %}
{% schema %}
{
"name": "Collection Page",
"max_blocks": 4,
"settings": [
{
"type": "color",
"id": "background_color",
"label": "Collection grid background color"
},
{
"type": "color",
"id": "product_text_color",
"label": "Grid item text color"
},
{
"type": "select",
"id": "items_per_row_desktop",
"label": "Items per row [Desktop]",
"options": [
{
"label": "2",
"value": "two"
},
{
"label": "3",
"value": "three"
},
{
"label": "4",
"value": "four"
},
{
"label": "5",
"value": "five"
}
],
"default": "three"
},
{
"type": "select",
"id": "items_per_row_mobile",
"label": "Items per row [Mobile]",
"options": [
{
"label": "1",
"value": "one"
},
{
"label": "2",
"value": "two"
}
],
"default": "one"
},
{
"type": "checkbox",
"id": "enable_prices",
"label": "Show product prices",
"default": true
},
{
"type": "range",
"id": "image_border_radius",
"label": "Image rounded corners",
"min": 0,
"max": 50,
"step": 1,
"unit": "%",
"default": 0
},
{
"type": "checkbox",
"id": "image_border",
"label": "Image border",
"default": true
}
],
"blocks": [
{
"type": "icon-bar",
"name": "Icon Bar",
"settings": [
{
"type": "image_picker",
"id": "icon_bar_img",
"label": "Icon"
},
{
"type": "text",
"id": "icon_bar_text",
"label": "Icon text"
}
]
}
]
}
{% endschema %}
It looks like your first two lines
{% for collection in collections %}
{% if collection.title == 'YMCA' %}
are never closed, so it's looking for the {% endif %} and {% endfor %} at the end of the file, which would put the {% schema %} inside your for and if statements.
You can do a text search of your file and see that you have 3 {% for... %} loops but only 2 {% endfor %} statements. You also have 9 {% if... %} statements but only 8 {% endif %}
Okay cool so where would I put the {% endif %} and {% endfor %}?
I would remove those two lines. You can get the collection you want without looping through all your collections and checking the title. You just need the collection handle:
{%- assign collection = collections[insert_handle_here] -%}
You can learn more about handles here: https://shopify.dev/api/liquid/basics#handles
Based on your collection title, I'm guessing the handle is 'ymca' so you could reference it like:
{%- assign collection = collections[ymca] -%}
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024The Hydrogen Visual Editor is now available to merchants in Shopify Editions | Summer '...
By JasonH Sep 2, 2024