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

Store Design
,
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.