Use a collection image but link to a collection list page?

Store Design
1

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.

2

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

3 Likes
3

Thanks so much, that worked perfectly.

4

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

to

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?
5

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 %}
1 Like
6

thank you!!

7

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.

8

Hello,

how do I do the exactly the same but in Debut Theme?

Thank you! :slightly_smiling_face:

9

Did you ever figure out how to do this for Debut?

10

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=1602740233

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=1602740233

11

Hi Guleria

shall i update this code in collection-grid-item.liquid

in order to custom url to the collection ?

Thanks

12

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!