← Back to Snippets
Scroll Progress Indicator
Thin progress bar at the top of the page showing how far the user has scrolled. Lightweight, smooth animation, and zero dependencies. Great for long product descriptions and blog posts.
snippets/plynthr-scroll-progress.liquid
{% comment %}
Plynthr — Scroll Progress Indicator
https://plynthr.com/snippets/scroll-progress-indicator/
INSTALL:
1. Create snippets/plynthr-scroll-progress.liquid
2. Paste this code
3. Add {%- render 'plynthr-scroll-progress' -%} before </body> in theme.liquid
CUSTOMIZE:
- --psp-color for the bar color
- --psp-height for the bar thickness
{% endcomment %}
<style>
:root {
--psp-color: {{ settings.colors_solid_button_labels | default: '#1a1a1a' }};
--psp-height: 3px;
--psp-z: 9999;
}
.plynthr-scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: var(--psp-height);
background: var(--psp-color);
z-index: var(--psp-z);
transition: width 0.1s linear;
pointer-events: none;
}
</style>
<div class="plynthr-scroll-progress" id="plynthr-scroll-progress"></div>
<script>
(() => {
const bar = document.getElementById('plynthr-scroll-progress');
if (!bar) return;
function update() {
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
const pct = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
bar.style.width = pct + '%';
}
window.addEventListener('scroll', update, { passive: true });
update();
})();
</script>
Installation
- In your Shopify admin, go to Online Store → Themes → Edit Code
- Under Snippets, click "Add a new snippet"
- Name it
plynthr-scroll-progress - Paste the code above and save
- Open
layout/theme.liquid - Add
{%- render 'plynthr-scroll-progress' -%}just before the closing</body>tag - Save and preview your store
Customization
--psp-color— Bar color (defaults to your theme's button color)--psp-height— Bar thickness (default: 3px)--psp-z— Z-index layer (default: 9999)
Want this installed for you?
I'll add this to your Shopify store, test it, and make sure it's working perfectly. Done within 24 hours.
Install for Me — $29
✓ Installed & tested
✓ Within 24 hours
✓ Any OS 2.0 theme
FAQ
Does it appear on all pages?
Yes. It renders on every page. To restrict it to specific pages, wrap the render tag in a Liquid condition like
{%- if template.name == 'article' -%}.Will this interfere with my sticky header?
No. The bar sits above everything with a high z-index. If your header overlaps it, increase
--psp-z or add top: 60px (your header height) to the CSS.How do I add a gradient color?
Replace the
background in the CSS with background: linear-gradient(to right, #6366f1, #8b5cf6).