Shopify themes, liquid, logos, and UX
I'm using the Minimal theme. I have several collections set up, but I've edited my Collection list page (/collections) to have just three of my collections that all represent practice wear : men, women, youth. On the home page, I use a Collection list section to link to two collections (practice wear, competition wear). I can add a custom section, but I don't know how to make it do the following: show a collection image (practice wear), but define a specific link (instead of just linking to the collection). I'd like the section to display the practice wear collection image but link to the collection list (/collections) page. It should also have another image displayed, the competition wear collection image, but just link to that competition wear collection as it would in the default section.
I realize i could use a gallery with two images and make a link, but i was hoping there was a way to pull in the collection image dynamically, since they'll be updating the collection image on a regular basis.
Solved! Go to the solution
This is an accepted solution.
Hello
In line no. 50 of collection-lists.liquid replace this code
"blocks": [ { "type": "collection", "name": "Collection", "settings": [ { "type": "collection", "id": "collection", "label": "Collection" } ] } ],
With this
"blocks": [ { "type": "collection", "name": "Collection", "settings": [ { "type": "collection", "id": "collection", "label": "Collection" }, { "type": "url", "id": "collection_href", "label": "External URL" } ] } ],
Now if you check in theme settings there is option to add external url with each collection.
But next you have make in a modification in code so that if there is external url available for any collection it will use it else use default.
Thanks
This is an accepted solution.
Revert your collection-grid-item.liquid code to orignal and then replace this
<a href="{{ collections[featured].url }}" title="{{ 'collections.general.link_title' | t: title: collection_title }}" class="grid-link{% if settings.collections_center_grid_link %} text-center{% endif %}">
with this
{% if block.settings.collection_href %} <a href="{{ block.settings.collection_href }}" title="{{ 'collections.general.link_title' | t: title: collection_title }}" class="grid-link{% if settings.collections_center_grid_link %} text-center{% endif %}"> {% else %} <a href="{{ collections[featured].url }}" title="{{ 'collections.general.link_title' | t: title: collection_title }}" class="grid-link{% if settings.collections_center_grid_link %} text-center{% endif %}"> {% endif %}
This is an accepted solution.
Hello
In line no. 50 of collection-lists.liquid replace this code
"blocks": [ { "type": "collection", "name": "Collection", "settings": [ { "type": "collection", "id": "collection", "label": "Collection" } ] } ],
With this
"blocks": [ { "type": "collection", "name": "Collection", "settings": [ { "type": "collection", "id": "collection", "label": "Collection" }, { "type": "url", "id": "collection_href", "label": "External URL" } ] } ],
Now if you check in theme settings there is option to add external url with each collection.
But next you have make in a modification in code so that if there is external url available for any collection it will use it else use default.
Thanks
Thanks so much, that worked perfectly.
Hi again -
So I implemented the code in the block as you suggested, and I'm editing the code in the collection-grid-item.liquid so that it pulls the external url. my code seems to almost work -
I changed <a href="{{ collections[featured].url }}" title="{{ 'collections.general.link_title' | t: title: collection_title }}" class="grid-link{% if settings.collections_center_grid_link %} text-center{% endif %}">
to
<a href="{%if block.settings.collection_href == empty %} {{ collections[featured].url }} {% else %} {{ block.settings.collection_href }} {% endif %}" title="{{ 'collections.general.link_title' | t: title: collection_title }}" class="grid-link{% if settings.collections_center_grid_link %} text-center{% endif %}">
Unfortunately, it doesn't pull the collections[featured].url when i do this - it just makes the link back to the homepage (.com/?nopreview). I've tried an unless statement, and an if statement where if the collection_href !=empty, but it doesn't seem to resolve it.
Any thoughts on where my if statement is going wrong?
This is an accepted solution.
Revert your collection-grid-item.liquid code to orignal and then replace this
<a href="{{ collections[featured].url }}" title="{{ 'collections.general.link_title' | t: title: collection_title }}" class="grid-link{% if settings.collections_center_grid_link %} text-center{% endif %}">
with this
{% if block.settings.collection_href %} <a href="{{ block.settings.collection_href }}" title="{{ 'collections.general.link_title' | t: title: collection_title }}" class="grid-link{% if settings.collections_center_grid_link %} text-center{% endif %}"> {% else %} <a href="{{ collections[featured].url }}" title="{{ 'collections.general.link_title' | t: title: collection_title }}" class="grid-link{% if settings.collections_center_grid_link %} text-center{% endif %}"> {% endif %}
thank you!!
Hi I have added that first code and I can now add a url to the featured collection but that link doesn't work. How can I get that link to point to the sub collection page? Thanks very much in advance.
Hello,
how do I do the exactly the same but in Debut Theme?
Thank you! 🙂
Did you ever figure out how to do this for Debut?
Hi there,
I am using the Empire theme from Pixel Union.
I found the code you referenced in dynamic-collection-list.liquid
I edited as follows:
"blocks": [
{
"type": "collection",
"name": "Collection",
"settings": [
{
"id": "collection",
"type": "collection",
"label": "Collection"
},
{
"id": "image",
"type": "image_picker",
"label": "Image"
},
{
"type": "url",
"id": "collection_href",
"label": "External URL"
}
]
}
],
The problem that I am experiencing is that when clicking on the collection title/ image, the external URL does not load. Instead it still links to the collection.
Please can you assist me. Thank you!
Here is a screenshot of the code https://cdn.shopify.com/s/files/1/0290/4630/8939/files/Screenshot_2020-10-15_at_07.28.22.png?v=16027...
Here is a screenshot of the theme setting in sections https://cdn.shopify.com/s/files/1/0290/4630/8939/files/Screenshot_2020-10-13_at_07.56.00.png?v=16027...
Hi Guleria
shall i update this code in collection-grid-item.liquid
in order to custom url to the collection ?
Thanks
Hello,
I am trying to do exactly this but on Draw theme. Someone would have the code to edit in "collection-list.liquid"?
Thanks in advance for your help!
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025