Solved

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

Kjankko-US
Shopify Partner
236 4 41

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

Accepted Solution (1)
ThemuMitch
Explorer
45 11 15

This is an 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.

 

Screenshot 2020-09-02 at 11.22.40.png

 

I hope this helps.

Was your problem solved? Please mark this post as an Accepted Solution

View solution in original post

Replies 9 (9)

ThemuMitch
Explorer
45 11 15

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.

 

Screenshot 2020-08-28 at 18.59.01.png

Was your problem solved? Please mark this post as an Accepted Solution
Kjankko-US
Shopify Partner
236 4 41

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
Explorer
45 11 15

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

Was your problem solved? Please mark this post as an Accepted Solution
Kjankko-US
Shopify Partner
236 4 41

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?

image-97878.png

 

 

 

 

 

Thanks,

-KJ

ThemuMitch
Explorer
45 11 15

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?

Was your problem solved? Please mark this post as an Accepted Solution
Kjankko-US
Shopify Partner
236 4 41

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
Explorer
45 11 15

This is an 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.

 

Screenshot 2020-09-02 at 11.22.40.png

 

I hope this helps.

Was your problem solved? Please mark this post as an Accepted Solution
Kjankko-US
Shopify Partner
236 4 41

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

-KJ

Vincentfink
Tourist
9 1 2

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