(Craft) Need help anchoring a clickable banner to the collection directly beneath it.

[Cthom1964]

I have a clickable banner that I want anchored to the collection directly underneath it. The image link is directed to an "all collections" collection which I believe is default for Shopify. I thought I had it figured out two weeks ago and now it's been over-ridden by the default. Please help!! 

[Dan-From-Ryviu]

Hi @Cthom1964 

Did you add a collection link in the button link of the banner? 

[Cthom1964]

No, I did not but it defaults to a collection page.  I want to anchor the banner on the homepage to the first collection underneath it. I have attached two snippets. The banner, and the collection underneath. The default link to the banner is a collections "page" and opens https://christhompsonbags.com/collections . Note: To make the banner clickable I had leave the template options (Heading, Text, Buttons) blank. I know it needs code, I just don't know how to do that. You're help would be greatly appreciated!!

    

---

@Dan-From-Ryviu wrote:

Hi @Cthom1964 

Did you add a collection link in the button link of the banner? 

---

[Dan-From-Ryviu]

Please open image-banner.liquid file, change the link of the collection page that you added in customized code to solve this.

[Cthom1964]

This what is in there now. I don't know how to anchor it to the collection. 

[Dan-From-Ryviu]

Which collection or section you want to anchor it? 

[Cthom1964]

I want to anchor the banner to the "Best Sellers" section underneath it

[Cthom1964]

In the first pictures I attached is the banner... the second picture is the bottom of the banner and the top of the section I want to anchor it to.

[Cthom1964]

The section is a collection list. The first of several on the page. 

[Dan-From-Ryviu · Accepted solution]

Please add link as #shopify-section-template--17389677281469__collection_list_7jiGwi to the setting section link in your theme customize of that section 

[Cthom1964]

Like this?

[Dan-From-Ryviu]

Please remove {{ }} and any space around. 

[Cthom1964]

wow it's working!!! Is there any way to move it up a little so the title of the collection shows?

[Cthom1964]

You are so helpful, thank you! Could you help me with one more? I don't think it's as complicated but everything is complicated to me! I would like my continue shopping button to go back to that same collection list.

[Dan-From-Ryviu]

Which Continue shopping button could you show me?

Also, you can add this script to theme.liquid file, before </body> to make it smooth scroll and don't miss the section title.

<script>
document.querySelectorAll(".custom-link[href="#shopify-section-template--17389677281469__collection_list_7jiGwi"]").forEach(function(link) {
    link.addEventListener("click", function(event) {
        event.preventDefault();  // Prevent the default link behavior

        const targetSection = document.querySelector("#shopify-section-template--17389677281469__collection_list_7jiGwi");
        const offset = 50;  // The 50px offset you want

        const elementPosition = targetSection.getBoundingClientRect().top + window.pageYOffset;
        const offsetPosition = elementPosition - offset;

        window.scrollTo({
            top: offsetPosition,
            behavior: "smooth"
        });
    });
});
</script>

[Cthom1964]

Sorry, just getting back to this now. I entered that code where you said but it didn't adjust. 

Here's the cart "Continue Shopping" links/buttons that I would like to link back to that anchor collection list on the homepage you just helped me create. One is a text link on the cart page, another text link on the cart pop-up and the other a button when customer removed all items from cart. I would greatly appreciate it if you could help me with the code to link them all back to the collection list anchor, on the homepage, you helped me do last night. Thank you so much!

[Cthom1964]

Here is how I used the code you  provided.