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

Solved

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

scullystwin42
Tourist
5 0 2

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.

Accepted Solutions (2)

Guleria
Shopify Partner
3974 793 1130

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

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder

View solution in original post

Guleria
Shopify Partner
3974 793 1130

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 %}
- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder

View solution in original post

Replies 11 (11)

Guleria
Shopify Partner
3974 793 1130

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

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
scullystwin42
Tourist
5 0 2

Thanks so much, that worked perfectly. 

scullystwin42
Tourist
5 0 2

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?

 

Guleria
Shopify Partner
3974 793 1130

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 %}
- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
scullystwin42
Tourist
5 0 2

thank you!!

bolsta
Excursionist
11 0 25

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.

dianazrm
Visitor
1 0 0

Hello, 

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

Thank you! 🙂

bpda
Visitor
1 0 0

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

Troy_Constandak
Visitor
2 0 0

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...

 

Narinova
Excursionist
16 0 3

Hi Guleria

 

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

in order to custom url to the collection ?

Thanks 

lexignot
Tourist
9 0 2

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!