—
Introduction
The hero section is the most important part of your Shopify store’s homepage. It’s the first thing customers see when they land on your site, and it sets the tone for your entire brand. A plain static image can sometimes feel lifeless. That’s why many modern sites use the parallax effect — a design trick that makes your background image scroll more slowly than the content in front of it. The result is depth, movement, and a more immersive shopping experience.
In this tutorial, we’re going to build a parallax hero section for Shopify from scratch. Don’t worry — you don’t need advanced coding knowledge. All you have to do is copy and paste the code we provide into a Shopify page, section, or custom HTML block. After that, we’ll explain how it works, how to customize it, and what to watch out for.
This is the same approach we used for our scrolling gallery example: pure HTML, CSS, and JavaScript inside a <html> snippet. No Shopify Liquid code needed, which means it’s easy to paste, test, and adapt.
What You’ll Build
By the end of this article, you’ll have a full-width parallax hero section that includes:
- A large background image with parallax scrolling.
- Foreground content (headline, subheading, and a CTA button).
- Adjustable scroll speed and section height.
- Clean, responsive design that looks modern and professional.
Here’s the full code:
<body>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopify Parallax Hero Section</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.parallax-hero {
position: relative;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
}
.parallax-bg {
background-image: url('https://cdn.shopify.com/s/files/1/0550/1183/5979/files/sample-hero.jpg?v=1754372070');
background-size: cover;
background-position: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
will-change: transform;
z-index: -1;
}
.parallax-content {
z-index: 1;
padding: 20px;
}
.parallax-content h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
.parallax-content p {
font-size: 1.25rem;
margin-bottom: 2rem;
}
.hero-button {
background: #111;
color: #fff;
padding: 12px 24px;
text-decoration: none;
border-radius: 4px;
transition: background 0.3s ease;
}
.hero-button:hover {
background: #333;
}
</style>
<div class="parallax-hero">
<div class="parallax-bg" id="parallaxBg"></div>
<div class="parallax-content">
<h1>Welcome to Our Store</h1>
<p>Discover the new collection today.</p>
<a href="/collections/all" class="hero-button">Shop Now</a>
</div>
</div>
<script>
(function() {
var bg = document.getElementById('parallaxBg');
if (!bg) return;
function handleScroll() {
var scrolled = window.pageYOffset;
bg.style.transform = 'translateY(' + scrolled * 0.5 + 'px)';
}
window.addEventListener('scroll', handleScroll);
})();
</script>
</body>Step-by-Step Instructions
Step 1: Duplicate Your Theme
Always duplicate your Shopify theme before adding custom code. This way, if anything breaks, you can easily revert.
Step 2: Add a Custom HTML Section
- Go to Online Store → Themes → Customize.
- Open the Homepage template.
- Click Add section → Custom Liquid (or Custom HTML).
- Paste the code above into the block.
- Save your changes.
Step 3: Replace the Background Image
In the .parallax-bg class, update the background-image URL with your own Shopify-hosted image.
- Upload your hero image in Settings → Files.
- Copy the URL and paste it into background-image: url('YOUR_URL_HERE');.
How the Code Works
- .parallax-hero → main container, full height of the viewport.
- .parallax-bg → the background image layer. It’s absolutely positioned behind everything else.
- .parallax-content → your headline, text, and button.
- JavaScript listens to the scroll event and moves the background image using translateY(). Because we multiply the scroll position by 0.5, the background moves at half the speed of the page, creating a parallax effect.
Customization Options
- Scroll speed: Change scrolled * 0.5 to a different multiplier. Lower values = slower movement.
- Hero height: Replace height: 100vh; with 70vh or a fixed pixel value.
- Typography: Adjust font sizes in .parallax-content h1 and .parallax-content p.
- Button styling: Change background colors, add border radius, or use gradients.
- Overlay: If text is hard to read, add a semi-transparent overlay using ::before with background: rgba(0,0,0,0.5).
Best Practices
- Use high-quality but optimized images: Large uncompressed images will slow your store. Compress them first.
- Test on mobile: Parallax can look glitchy on mobile devices. If needed, disable the effect with a media query.
- Keep it simple: One parallax hero is impactful. Too many can overwhelm.
- Accessibility: Always make sure your text contrasts enough with the background image.
Troubleshooting
- Background doesn’t move: Make sure the script is at the bottom of the snippet and the element ID matches.
- Image not loading: Double-check your image URL.
- Text not visible: Add an overlay or switch to a lighter/darker background.
- Jumpy scrolling: Try lowering the scroll multiplier or reducing image resolution.
Advanced Ideas
- Replace the background image with a looping video.
- Add multiple parallax layers for a 3D effect.
- Combine with a scroll-to anchor button that jumps to the next section.
- Add schema settings if you later want to turn this into a full Shopify section.
Conclusion
Adding a parallax hero section is one of the simplest ways to make your Shopify store look premium and engaging. With just a few lines of HTML, CSS, and JavaScript, you can create depth, movement, and storytelling power in the very first fold of your homepage.
This tutorial gave you the full snippet, explained how it works, and showed you how to customize it. Now it’s your turn — paste the code, tweak the styles, and let your hero image tell your brand’s story in motion.
