I’m working on a Collection Banner Section with 2 images on Shopify. I just want to replicate the way the Collection-Hero works.
I have 2 Collections: Wallpaper and Original-Art.
I have a Collection Banner Section at the bottom of my Collection template which contains two different images.
I want to display this image if the user is checking the Original Art Collection.
But in case is on the Wallpaper Collection I want to show this one:
Currently I can only show one of them. You can see it here: https://colorkindstudio.com/collections/
So far this is what I’ve tried in order to achieve this. I added a block to the settings Schema to allow the customer to select the collection where that section should be displayed:
{% schema %}
{
"name": "Collection Banner",
"max_blocks": 4,
"settings": [
{
"type": "header",
"content": "Section Layout"
},
{
"type": "checkbox",
"id": "enable_layout",
"label": "Enable Layout",
"default": false
}
],
"blocks": [
{
"label": "Collection",
"id": "collection_id",
"type": "collection"
}
]
}
{% endschema %}
After that I compare if the collection selected is the same as the current collection and it should only display the section where the collection is Wallpaper or Original-Art but instead is showing both at the same time.
{% for block in section.blocks %}
{% assign collection_id = collections[block.settings.collection_id] %}
{% if collection_id.handle == collection.handle %}**
{% for block in section.blocks %}
{% if block.settings.image == blank %}
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% if block.settings.subtitle != blank %}
##### {{ block.settings.subtitle }}
{% endif %}
{% if block.settings.title != blank %}
## {{ block.settings.title }}
{% endif %}
{% if block.settings.description != blank %}
{{ block.settings.description }}
{% endif %}
{% if block.settings.button != blank %}
{{ block.settings.button }}
{% endif %}
{% endfor %}
{% else %}
#### -
{% endif %}
{% endfor %}
This is how they look right now. You won’t see this on the live site because I can’t mess the site, so i’m putting a screenshot here. Both images are displayed at the same time.
How can I show only 1 image depending on the collection selected?