Shopify themes, liquid, logos, and UX
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!!
Solved! Go to the solution
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.
Hi @Cthom1964
Did you add a collection link in the button link of the banner?
- 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.
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?
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.
This what is in there now. I don't know how to anchor it to the collection.
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.
I want to anchor the banner to the "Best Sellers" section underneath it
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.
The section is a collection list. The first of several on the page.
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.
Like this?
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.
wow it's working!!! Is there any way to move it up a little so the title of the collection shows?
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.
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.
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!
Here is how I used the code you provided.
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024