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

Solved

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

Cthom1964
Excursionist
34 0 4

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

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
10147 2015 2075

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

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 16 (16)

Dan-From-Ryviu
Shopify Partner
10147 2015 2075

Hi @Cthom1964 

Did you add a collection link in the button link of the banner? Screenshot 2024-09-18 at 09.07.53.png

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Cthom1964
Excursionist
34 0 4

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

  banner.JPG anchor here.JPG template.JPG


@Dan-From-Ryviu wrote:

Hi @Cthom1964 

Did you add a collection link in the button link of the banner? Screenshot 2024-09-18 at 09.07.53.png




Dan-From-Ryviu
Shopify Partner
10147 2015 2075

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

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Cthom1964
Excursionist
34 0 4

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

Dan-From-Ryviu
Shopify Partner
10147 2015 2075

Which collection or section you want to anchor it? 

 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Cthom1964
Excursionist
34 0 4

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

Cthom1964
Excursionist
34 0 4

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
Excursionist
34 0 4

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

 

Dan-From-Ryviu
Shopify Partner
10147 2015 2075

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

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Cthom1964
Excursionist
34 0 4

Like this?

 

1a.JPG

 

Dan-From-Ryviu
Shopify Partner
10147 2015 2075

Please remove {{ }} and any space around. 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Cthom1964
Excursionist
34 0 4

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

Cthom1964
Excursionist
34 0 4

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
Shopify Partner
10147 2015 2075

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>

 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Cthom1964
Excursionist
34 0 4

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!

 

2.JPG

 

cart.JPG

 

popup.JPG

 

 

 

Cthom1964
Excursionist
34 0 4

Here is how I used the code you  provided. 

Cthom1964_0-1726705790131.png