How to add the back to top button only on homepage for Dawn theme?
Topic summary
A user seeks to add a “back to top” button exclusively on the homepage of their Dawn theme Shopify store.
Initial Solution:
- Add a Custom Liquid section in the theme customizer
- Use conditional logic (
{% if template == 'index' %}) to display the button only on the homepage - Include basic HTML/CSS for the button functionality
Follow-up Issue:
- The button’s position overlaps with an existing chat box widget
- User requests adjustment to move the button higher on the page
Alternative Solution Provided:
- Edit the
theme.liquidfile directly instead of using Custom Liquid - Insert complete code within the
<body>tag, including:- CSS styling with customizable
bottomandrightpositioning properties (currently set to 20px each) - JavaScript for scroll detection (appears after 300px scroll) and smooth scroll-to-top behavior
- SVG icon for the button
- CSS styling with customizable
- Adjust the
bottomvalue in CSS to resolve overlap issues
Status: Solutions provided; awaiting user confirmation on whether positioning adjustment resolves the overlap problem.
Hi @NatalieY123 ,
Go to Customize, add a Custom Liquid section, and paste the code below.
{% if template == 'index' %}
{% endif %}
1 Like
thank for so much, but the position of the back to top button overlap with my chat box, can the back to top button move up a bit?
Good day, @NatalieY123 ,
To achieve this, simply follow these steps:
-
Open your theme editor in Shopify, then click on Edit code.
-
Find and open the theme.liquid file.
-
Inside the theme.liquid file, place the following code (along with the styles) within the tag.
#backToTop { display: none; /* Initially hidden */ width: 35px; height: 35px; position: fixed; right: 20px; /* You can adjust the position */ bottom: 20px; /* You can adjust the position */ background: powderblue; border: none; border-radius: 5px; text-align: center; line-height: 35px; cursor: pointer; z-index: 9999; } #backToTop .icon.icon-caret { transform: rotate(180deg); padding: 5px; vertical-align: middle; width: 25px; height: 25px; color: white; } #backToTop:hover { background-color: lightblue; } .show-back-to-top-btn { display: block; }
Here is the code…{% if template == ‘index’ %}
{% endif %}
If this was helpful and you have any further questions, please don’t hesitate to ask. If you found my solution useful, feel free to accept and like it. (S.P)
1 Like
