How to find the "Collection list" section's URL

[Kjankko-US]

I have created a store using Debut -theme.

1. I have created a section in the homepage called "collection list" 

2. The collection list -section direct to the collection page.

3. I want to find the URL of this section (step 1.)

4. Why? Because I want to add an anchor link to the URL 

Does anyone know where in code files can find the URL?

-KJ

[ThemuMitch]

Hi KJ,

If I've understood this correctly, the following steps should solve your problem. NOTE: I used the Chrome browser for this example. Exact steps may differ between browsers.

1. Right-click on the section you want to link to.
2. In the right-click menu, click Inspect.
3. In the developer tools window that opens, locate the closest parent <div> element with the class, shopify-section (highlighted in green in the image below).
4. You want the ID of this <div> element for your anchor link (e.g. #shopify-section-1598637000958).

I hope this helps.

[Kjankko-US]

Thank you for your reply @ThemuMitch.

1. Where I can find those files in Shopify? I mean in "edit code", but where there?

2. If I want to direct clients to for example to the following anchor link: 

<a href="www.mystore.com#1">This is the anchor link, but where I add this?</a>

Thanks,

-KJ

[ThemuMitch]

@Kjankko-US could you take a screenshot of where you want to add the anchor link? Then I can point you in the right direction.

[Kjankko-US]

This is the homepage's "Collection list" section. I have done a collection page with PageFly builder where is ALL my store's products.

1. When the customer clicks "Tyres" or "Electric parts" I want that they direct to the collection page's specific point - where I add the anchor link later.

2. The only problem is the homepage's "Collection list" -section - I cannot add the anchor link.  

Did you get it?

Thanks,

-KJ

[ThemuMitch]

Have you tried using another type of section that is available (e.g. image with text) that achieves a similar thing but offers a clickable button? Do you have to use the 'collection list' section, considering you only really want to link to one collection?

[Kjankko-US]

I have considered also another type of section, but "Collection list" -section fits my needs best way. Do you know is it even possible to add new URL with anchor link to "Collection list" -section's link?

[ThemuMitch · Accepted solution]

@Kjankko-US,

Yep, this is possible. First, navigate to the Shopify online code editor. If you haven't done this before, check out this link:

https://shopify.dev/tutorials/develop-theme-getting-started-choosing-an-editor

Here, you want to modify 2 files:

1. collection-list.liquid (found in the Sections folder)
2. collection-grid-item.liquid (found in the Snippets folder)

NOTE: Before editing your theme code, it's important to save a backup of your theme.

collection-list.liquid

Change line 24 from this:

          {% include 'collection-grid-item', collection: collection %}

... to this:

          {% include 'collection-grid-item', collection: collection, collection_url: block.settings.collection_url %}

... and change line 182 from this:

        },

... to this:

        },
        {
          "id": "collection_url",
          "type": "url",
          "label": {
            "da": "Link",
            "de": "Link",
            "en": "Link",
            "es": "Enlace",
            "fi": "Linkki",
            "fr": "Lien",
            "hi": "लिंक",
            "it": "Link",
            "ja": "リンク",
            "ko": "링크",
            "nb": "Kobling",
            "nl": "Link",
            "pt-BR": "Link",
            "pt-PT": "Ligação",
            "sv": "Länk",
            "th": "ลิงก์",
            "zh-CN": "链接",
            "zh-TW": "連結"
          }
        }

collection-grid-item.liquid

Change line 19 from this:

  <a href="{% if collection.products == empty %}#{% else %}{{ collection.url }}{% endif %}" class="collection-grid-item__link">

... to this:

  <a href="{% if collection_url != empty %}{{ collection_url }}{% else %}{% if collection.products == empty %}#{% else %}{{ collection.url }}{% endif %}{% endif %}" class="collection-grid-item__link">

Following these changes, you will have an additional option in your theme customizer to set the URL that is linked to. If no URL is set, the default behaviour of the Collection list section will apply.

I hope this helps.

[Kjankko-US]

It works! Thank you so much @ThemuMitch  - I really appreciate your effort!

-KJ

[Vincentfink]

I did this and it added where I can add a link, but when you click on the image to the linked page it doesn't work, nothing happens...any advice? Thanks