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

Solved
Highlighted
Explorer
62 2 6

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

0 Likes
Highlighted
Excursionist
32 10 8

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
0 Likes
Highlighted
Explorer
62 2 6

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

0 Likes
Highlighted
Excursionist
32 10 8

@Kjankko 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
0 Likes
Highlighted
Explorer
62 2 6

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

0 Likes
Highlighted
Excursionist
32 10 8

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
0 Likes
Highlighted
Explorer
62 2 6

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?

 

0 Likes
Highlighted
Excursionist
32 10 8

This is an accepted solution.

@Kjankko,

 

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
1 Like
Highlighted
Explorer
62 2 6

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

-KJ

1 Like