Restyle the back-to-the-top button to make it (the arrow) thinner (Dawn 11.0.0)

Store Design
, ,

Topic summary

A user wants to make the back-to-top button arrow thinner on their Dawn 11.0.0 theme website. They provided visual examples showing their current button design versus their desired thinner arrow style.

Provided Context:

  • Shared their current back-to-the-top.liquid code (partially visible)
  • Included two comparison images demonstrating the design change
  • Website link provided for reference

Solution Offered:
Another user (@Sheesh_b) provided CSS code to achieve the desired effect:

  • Add custom CSS targeting a#BackToTop with specific styling
  • Includes properties for background color, box shadow, border radius, width adjustments, and SVG sizing
  • The CSS specifically sets the SVG width to 20px to create the thinner arrow appearance

Status: A concrete solution has been provided but not yet confirmed as implemented or tested by the original poster.

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

Hello everybody,

I’m currently using the Dawn 11.0.0 theme for my website, and I’m interested in restyling my back-to-the-top button to make it (and the arrow in particular) thinner.

The first screen shows my current button, and the second screen is the example of what I’m aiming for. I’ve included my back-to-the-top.liquid code below for reference.

Website link: https://www.drawandcare.com/

I would greatly appreciate any assistance with this!

button1.png
button1.png546×360 10.7 KB

button.png
button.png546×360 6.74 KB

{% comment %}
    Reduce below value if you need the back to the top button to appear higher up on the page.
    That value is in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 500 %}

{% comment %}
Vertical offset from bottom of browser for the position of the button.
{% endcomment %}
{% assign position_from_bottom = '0em' %}

<a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide"> <i class="fa fa-arrow-circle-o-up fa-2x"></i>
</a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
<style>
.back-to-top {
position: fixed;
bottom: {{ position_from_bottom }};
right: 75px;
text-decoration: none;
color: #efdfc1;
background-color: none;
font-size: 35px;
padding: 0.25em;
-webkit-border-top-left-radius: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius-topleft: 1px;
-moz-border-radius-bottomleft: 1px;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
z-index: 60000;
}
.back-to-top i {
vertical-align: middle;
}
.back-to-top span {
padding-left: 0.5em;
}
.back-to-top i + span {
padding-left: 0;
}
.back-to-top:hover {
text-decoration: none;
color: #555;
}
.hide {
display: none!important;
}
</style>
<script>
(function() {
function trackScroll() {
    var scrolled = window.pageYOffset;
    var coords = {{ vertical_offset_for_trigger }};

    if (scrolled > coords) {
    goTopBtn.classList.remove('hide');
    }
    if (scrolled < coords) {
    goTopBtn.classList.add('hide');
    }
}

function backToTop() {
    if (window.pageYOffset > 0) {
    window.scrollBy(0, -80);
    setTimeout(backToTop, 0);
    }
}

var goTopBtn = document.querySelector('.back-to-top');

window.addEventListener('scroll', trackScroll);
goTopBtn.addEventListener('click', backToTop);
})();
</script>  
2

Hi @DRAWandCARE

Please take care of login details.

The solution is to add the below css

a#BackToTop {
	background-color: #fff;
	border-radius: 50%;
	width: 80px;
	text-align: center;
	box-shadow: 0 5px 25px #ccc;
}
a#BackToTop svg {
	width: 20px;
}

Thanks

Sheesh B