Issue: In Shopify’s Dawn theme, a user wants the “Shop Now” button in an Image with text section to scroll up to a specific part of the product page (like the top or variants), similar to a reference site.
Proposed solution:
Outcome: The user confirmed it works after applying the guidance.
Notes:
Status: Resolved with clear implementation steps for multiple products via anchor links and a global smooth-scroll CSS.
Hello Everyone!
I am using the Shopify Dawn theme. I have added image with text section to a product. I want the “Shop Now” button to scroll up when I click on it. I want to keep it like this in multiple products. Is it possible? Please help me. Thank you very much.
Password: Admin
Reference website: https://bleame.com/products/crystal-hair-eraser#product-variants
Please click on Claim Offer.
Hi @dreamtechzone_5 , set the button link to the ID of the element you want to scroll to. In the Bleame example this is “#product-variants”. To add a smooth scrolling effect, use CSS scroll-behavior: smooth; on the HTML element for example.
Thank you very much. It would be very helpful if you could tell me how to use the code. Please give me the code and where should I paste it.
Go to Online store → Themes → Three dots left of Customize → Edit Code → assets folder → base.css and add the following at the bottom of the file
html {
scroll-behavior: smooth;
}
and save the file.
In the theme editor, select your button. Set the Button link to # (this will make it go to the top of the page, if you want to scroll to a specific element, edit sections/multirow.liquid and add an ID to the element you want to scroll to and set the Button link to #ID). Save the changes. Test your page.
From admin section change the URL and add Id of the element to which you want to scroll, since I do not see fixed ID in your theme, you can add #MainContent in button.
Really you are Great. It worked. Thank you very much.