Shopify themes, liquid, logos, and UX
So I have a theme where the Title of the Collection (on the homepage section) has a link to the collection by default. I simply want to remove the link, but for some reason no matter what I do I break the theme or the products from loading. Should be so simple but I can't figure it out. Any help would be GREATLY appreciated.
------code below-----
<div class="sorting-collections__head home-section-title home-section-title--multiple row justify-content-center mb-25"{% if section.blocks.size > 1 %} data-sorting-collections-control{% endif %}>
{%- for block in section.blocks -%}
{%- if collections[block.settings.collection] != blank -%}
<h4 class="col-auto mb-10 text-center">
<a href="{{ collections[block.settings.collection].url }}"{% if section.blocks.size > 1 %}{% if forloop.index == 1 %} class="active"{% endif %}{% endif %} data-collection="{{ collections[block.settings.collection].handle }}">{% if block.settings.title != blank %}{{ block.settings.title }}{% else %}{{ collections[block.settings.collection].title }}{% endif %}</a>
</h4>
{%- elsif forloop.index0 == 0 -%}
{% render 'no-blocks' with message: 'homepage.onboarding.no_content_message.sorting_collections' %}
{%- endif -%}
{%- endfor -%}
</div>
Solved! Go to the solution
This is an accepted solution.
Not the most straightforward solution here but that should work:
<div class="sorting-collections__head home-section-title home-section-title--multiple row justify-content-center mb-25"{% if section.blocks.size > 1 %} data-sorting-collections-control{% endif %}>
{%- for block in section.blocks -%}
{%- if collections[block.settings.collection] != blank -%}
<h4 class="col-auto mb-10 text-center">
{% if block.settings.title != blank %}<span>{{ block.settings.title }}</span>{% else %}{{ collections[block.settings.collection].title }}{% endif %}
<a style="display:none;" href="{{ collections[block.settings.collection].url }}"{% if section.blocks.size > 1 %}{% if forloop.index == 1 %} class="active"{% endif %}{% endif %} data-collection="{{ collections[block.settings.collection].handle }}">{% if block.settings.title != blank %}{{ block.settings.title }}{% else %}{{ collections[block.settings.collection].title }}{% endif %}</a>
</h4>
{%- elsif forloop.index0 == 0 -%}
{% render 'no-blocks' with message: 'homepage.onboarding.no_content_message.sorting_collections' %}
{%- endif -%}
{%- endfor -%}
</div>
Hi There!
Replace the code you shared with the one below:
<div class="sorting-collections__head home-section-title home-section-title--multiple row justify-content-center mb-25"{% if section.blocks.size > 1 %} data-sorting-collections-control{% endif %}>
{%- for block in section.blocks -%}
{%- if collections[block.settings.collection] != blank -%}
<h4 class="col-auto mb-10 text-center">
<a href="#"{% if section.blocks.size > 1 %}{% if forloop.index == 1 %} class="active"{% endif %}{% endif %} data-collection="{{ collections[block.settings.collection].handle }}">{% if block.settings.title != blank %}{{ block.settings.title }}{% else %}{{ collections[block.settings.collection].title }}{% endif %}</a>
</h4>
{%- elsif forloop.index0 == 0 -%}
{% render 'no-blocks' with message: 'homepage.onboarding.no_content_message.sorting_collections' %}
{%- endif -%}
{%- endfor -%}
</div>
Hello!
THANKS for trying but the products in the collection don't load after the change.
Any other ideas?
This is very weird, switching the href of an <a> element here should have zero effect on the loading of the products. Is there more code in that liquid file that's using the URL somehow?
That's what I thought? It's like I could fix one thing but then the products wouldn't load.
Here's all the code for this section:
{%- if section.blocks.size > 0 -%}
{% include 'global-variables' %}
{% if sorting_collections_async_ajax_loading == true and content_for_header contains 'Shopify.designMode' %}
{%- assign is_design_mode = true -%}
{%- assign sorting_collections_async_ajax_loading = false -%}
{%- endif -%}
<div data-section-id="{{ section.id }}" data-section-type="sorting-collections">
<div class="container">
<div class="sorting-collections"{% if sorting_collections_async_ajax_loading %} data-sorting-collections-ajax{% endif %}>
<div class="sorting-collections__head home-section-title home-section-title--multiple row justify-content-center mb-25"{% if section.blocks.size > 1 %} data-sorting-collections-control{% endif %}>
{%- for block in section.blocks -%}
{%- if collections[block.settings.collection] != blank -%}
<h4 class="col-auto mb-10 text-center">
<a href="{{ collections[block.settings.collection].url }}"{% if section.blocks.size > 1 %}{% if forloop.index == 1 %} class="active"{% endif %}{% endif %} data-collection="{{ collections[block.settings.collection].handle }}">{% if block.settings.title != blank %}{{ block.settings.title }}{% else %}{{ collections[block.settings.collection].title }}{% endif %}</a>
</h4>
{%- elsif forloop.index0 == 0 -%}
{% render 'no-blocks' with message: 'homepage.onboarding.no_content_message.sorting_collections' %}
{%- endif -%}
{%- endfor -%}
</div>
{% capture grid %}col-6 col-sm-6 col-md-4 col-lg-{{ 12 | divided_by: section.settings.size_of_columns }}{% endcapture %}
{%- for block in section.blocks limit: 1 -%}
<div class="sorting-collections__products row" data-sorting-collections-items data-limit="{{ section.settings.max_count }}" data-grid="{{ grid }}"{% if is_design_mode %} data-is-design-mode{% endif %}>
{% unless sorting_collections_async_ajax_loading %}
{%- if block.settings.collection != blank -%}
{%- assign products = collections[block.settings.collection].products -%}
{%- for product in products limit: section.settings.max_count -%}
<div class="{{ grid }}">
{%- assign disable_lazyload = sorting_collections_image_lazyload_disable -%}
{% include 'product-collection' with url_without_collection: true product_margin_bottom: offset_collection_page_product_margin_bottom_d %}
</div>
{%- endfor -%}
{%- endif -%}
{% endunless %}
</div>
{%- endfor -%}
</div>
</div>
</div>
<script>
Loader.require({type: "script", name: "sorting_collections"});
</script>
{%- else -%}
{% render 'no-blocks' %}
{%- endif -%}
{% schema %}
{
"name": "Collections",
"settings": [
{
"type": "select",
"id": "size_of_columns",
"label": "Size of the columns",
"default": "4",
"options": [
{
"value": "2",
"label": "2 items in the row"
},
{
"value": "3",
"label": "3 items in the row"
},
{
"value": "4",
"label": "4 items in the row"
},
{
"value": "6",
"label": "6 items in the row"
}
]
},
{
"type": "range",
"id": "max_count",
"min": 1,
"max": 24,
"step": 1,
"unit": "pds",
"label": "Max count",
"default": 8
}
],
"blocks": [
{
"type": "collection",
"name": "Collection",
"settings": [
{
"type": "textarea",
"id": "title",
"label": "Title"
},
{
"type": "collection",
"id": "collection",
"label": "Collection"
}
]
}
],
"presets": [
{
"name": "Collections",
"category": "6) Collections"
}
]
}
{% endschema %}
This is an accepted solution.
Not the most straightforward solution here but that should work:
<div class="sorting-collections__head home-section-title home-section-title--multiple row justify-content-center mb-25"{% if section.blocks.size > 1 %} data-sorting-collections-control{% endif %}>
{%- for block in section.blocks -%}
{%- if collections[block.settings.collection] != blank -%}
<h4 class="col-auto mb-10 text-center">
{% if block.settings.title != blank %}<span>{{ block.settings.title }}</span>{% else %}{{ collections[block.settings.collection].title }}{% endif %}
<a style="display:none;" href="{{ collections[block.settings.collection].url }}"{% if section.blocks.size > 1 %}{% if forloop.index == 1 %} class="active"{% endif %}{% endif %} data-collection="{{ collections[block.settings.collection].handle }}">{% if block.settings.title != blank %}{{ block.settings.title }}{% else %}{{ collections[block.settings.collection].title }}{% endif %}</a>
</h4>
{%- elsif forloop.index0 == 0 -%}
{% render 'no-blocks' with message: 'homepage.onboarding.no_content_message.sorting_collections' %}
{%- endif -%}
{%- endfor -%}
</div>
It worked!
THANK YOU SO MUCH for your time and help!!!
You're most welcome!! Should you need anything please feel free to contact me!
Cheers!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024