Why is the back to top button not visible on my Dawn Theme 7.0?

Store Design
,

Topic summary

A user implemented a back-to-top button on their Dawn Theme 7.0 store following a YouTube tutorial, but the button isn’t appearing despite the code functioning otherwise.

Root Cause Identified:
Another user spotted a critical typo in the CSS code: buttom: 20px; should be bottom: 20px; in the #back-to-top-button style block.

Additional Issues:
The CSS class names also contain the same misspelling:

  • .buttom-left, .buttom-center, .buttom-right should be .bottom-left, .bottom-center, .bottom-right
  • These must match the position values in the schema settings ('bottom-left', 'bottom-center', 'bottom-right')

Suggested Solutions:

  • Fix the spelling error in the CSS positioning property
  • Correct all class names to use “bottom” instead of “buttom”
  • One responder offered an alternative tutorial resource
  • Another requested the store link to provide hands-on troubleshooting

The issue remains unresolved pending the user’s implementation of these corrections.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone

I followed a video on how to add a Back to Top Button on my Store. Everything is working, except, that the Button is not visible.

Could someone help me out?

This is the code for the scroll-to-top-button.liquid

Here is the video I used : https://www.youtube.com/watch?v=7jG8ZkjBI6o

Thanks

{% if section.settings.back-to-top-button-enabled %}
Back to Top
{% endif %}

{% if section.settings.smooth-scroll-enabled %} html{ scroll-behavior: smooth; } {% endif %} #back-to-top-button { display: none; position: fixed; buttom: 20px; z-index: 99; font-size: 18px; border: none; outline: none; border-radius: 4px; background-color: {{section.settings.button-color}}; color: white; cursor: pointer; padding: 15px; } .buttom-left { left:30px; } .buttom-center { left: 50%; transform: translateX(-50%); } .buttom-right { right:30px; } #back-to-top-button:hover { background-color: green; }

{% schema %}
{
“name”: “Scroll To Top Button”,
“settings”: [
{
“type”: “checkbox”,
“id”: “back-to-top-button-enabled”,
“default”: true,
“label”: “Enable the back-to-top button”
},
{
“type”: “checkbox”,
“id”: “smooth-scroll-enabled”,
“default”: true,
“label”: “Enable smooth scrolling”
},
{
“type”: “color”,
“id”: “botton-color”,
“default”: “#333333”,
“label”: “Button Color”
},
{
“type”: “select”,
“id”: “back-to-top-button-position”,
“label”: “Back-to-Top Button Position”,
“options”: [
{
“value”: “bottom-left”,
“label”: “Bottom Left”
},
{
“value”: “bottom-center”,
“label”: “Bottom Center”
},
{
“value”: “bottom-right”,
“label”: “Bottom Right”
}
],
“default”: “bottom-center”
}

]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

2

Hello there,

Please check this article.

Click here…

3

I also tried this solution and it did not work

4

Hi @chosenfashion

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

5

There’s a spelling error in css. 'Bottom’ css in #back-to-top-button given as ‘Buttom’. Also correct classes names in css part : ‘bottom-left’, ‘bottom-center’ and ‘bottom-right’

Button will be visible after that and will work properly.