← Back to Snippets
Back to Top Button
Animated scroll-to-top button with smooth scroll. Fades in when the user scrolls down, fades out at the top. Fully customizable colors, size, position, and scroll threshold. Zero dependencies.
snippets/plynthr-back-to-top.liquid
{% comment %}
Plynthr — Back to Top Button
https://plynthr.com/snippets/back-to-top-button/
INSTALL:
1. Create snippets/plynthr-back-to-top.liquid
2. Paste this code
3. Add {% render 'plynthr-back-to-top' %} before </body> in theme.liquid
CUSTOMIZE:
- --pbt-bg for button color
- --pbt-size for button size
- scrollThreshold for when it appears
{% endcomment %}
<style>
:root {
--pbt-bg: {{ settings.colors_solid_button_labels | default: '#000' }};
--pbt-color: #ffffff;
--pbt-size: 44px;
--pbt-radius: 50%;
--pbt-bottom: 2rem;
--pbt-right: 2rem;
}
.plynthr-btt {
position: fixed;
bottom: var(--pbt-bottom);
right: var(--pbt-right);
width: var(--pbt-size);
height: var(--pbt-size);
border-radius: var(--pbt-radius);
background: var(--pbt-bg);
color: var(--pbt-color);
border: none;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
transform: translateY(10px);
z-index: 999;
box-shadow: 0 2px 12px rgba(0,0,0,0.15);
display: flex;
align-items: center;
justify-content: center;
}
.plynthr-btt.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.plynthr-btt:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.plynthr-btt svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
</style>
<button class="plynthr-btt" aria-label="Back to top">
<svg viewBox="0 0 24 24">
<polyline points="18 15 12 9 6 15"></polyline>
</svg>
</button>
<script>
(() => {
const btn = document.querySelector('.plynthr-btt');
const scrollThreshold = 400;
if (!btn) return;
const toggle = () => {
btn.classList.toggle('is-visible', window.scrollY > scrollThreshold);
};
window.addEventListener('scroll', toggle, { passive: true });
btn.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
toggle();
})();
</script>
Installation
- In your Shopify admin, go to Online Store → Themes → Edit Code
- Under Snippets, click "Add a new snippet"
- Name it
plynthr-back-to-top - Paste the code above and save
- Open
layout/theme.liquid - Add
{% render 'plynthr-back-to-top' %}just before the closing</body>tag - Save and preview your store
Customization
--pbt-bg— Button background color (defaults to your theme's button color)--pbt-color— Arrow icon color (default: white)--pbt-size— Button diameter (default: 44px)--pbt-radius— Border radius (50% = circle, try 8px for rounded square)--pbt-bottom / --pbt-right— Position from edges (default: 2rem)scrollThreshold— Pixels scrolled before button appears (default: 400)
Video Tutorial
FAQ
Does this work with all Shopify themes?
Yes — this snippet works with any Shopify OS 2.0 theme including Dawn, Focal, Prestige, Impulse, and custom themes. It uses standard CSS and vanilla JavaScript with zero dependencies.
Can I change the icon?
Yes. Replace the SVG inside the button element with any icon — an arrow emoji (↑), text ("Top"), or any SVG from Heroicons or Feather Icons.
Will this slow down my store?
No. The snippet is under 1KB total with passive event listeners. Zero external dependencies and negligible impact on page speed.
How do I move it to the left side?
Change
--pbt-right: 2rem to --pbt-right: auto and add a left: 2rem property to the .plynthr-btt class.