How to Create a Parallax Scroll Section in Shopify

Add a stunning split-screen parallax effect to your Shopify store — no app required!

🪄 What You’ll Learn

• Create a responsive parallax scrolling section using HTML and CSS.
• Split your section into text + image halves for a modern layout.
• Make it mobile-friendly and easily customizable inside Shopify.

🧰 Step 1: Add a Custom HTML Section

In your Shopify Admin, go to Online Store → Themes → Customize. Then add a new “Custom Liquid” or “Custom HTML” block where you want your parallax section to appear.

💻 Step 2: Paste This HTML & CSS Code

Copy and paste the entire code below inside the HTML editor of your section:

<style>
  .parallax-section {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background-color: #fff;
  }
  .parallax-text {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    background-color: #f7f7f7;
    box-sizing: border-box;
  }
  .parallax-text h2 {
    font-size: 48px;
    line-height: 1.2;
    color: #1a1a1a;
    margin-bottom: 20px;
  }
  .parallax-text p {
    font-size: 20px;
    line-height: 1.5;
    color: #555;
    margin-bottom: 30px;
  }
  .parallax-text a {
    display: inline-block;
    padding: 14px 26px;
    background-color: #000;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    transition: 0.3s ease;
  }
  .parallax-text a:hover {
    background-color: #2a8f48;
  }
  .parallax-image {
    width: 50%;
    height: 100vh;
    background-image: url('https://cdn.shopify.com/s/files/1/0680/4150/7113/files/eco-wooden-furniture.jpg?v=1725810312');
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
  }
  @media (max-width: 989px) {
    .parallax-section {
      flex-direction: column;
    }
    .parallax-text, .parallax-image {
      width: 100%;
      height: auto;
    }
    .parallax-text {
      padding: 30px 20px;
      text-align: center;
    }
    .parallax-text h2 {
      font-size: 28px;
    }
    .parallax-text p {
      font-size: 18px;
    }
    .parallax-text a {
      font-size: 16px;
      padding: 12px 20px;
    }
    .parallax-image {
      background-attachment: scroll;
      height: 300px;
    }
  }
</style>

<section class="parallax-section">
  <div class="parallax-text">
    <div>
      <h2>Eco-Friendly Living Starts Here</h2>
      <p>Discover handcrafted wooden furniture and decor that bring natural warmth to your home while protecting the planet.</p>
      <a href="/collections/all">Shop EcoSpan Collection</a>
    </div>
  </div>
  <div class="parallax-image"></div>
</section>
  

🎨 Step 3: Customize the Section

You can edit these parts of the code to match your brand:

• Background image: Replace the URL in background-image: url('...').
• Text: Edit the heading <h2> and paragraph <p> as needed.
• Button: Change link href and button text.
• Colors: Adjust background or button colors in the CSS above.

📱 Step 4: Make It Mobile Friendly

This code already includes responsive CSS rules that automatically stack the image and text vertically on smaller screens.

👀 Step 5: Preview Your Parallax Section

Save your changes, then open your Shopify store preview. Scroll through your page — you’ll see the right image gently move at a slower pace than the text, creating that smooth parallax effect.

✨ Final Result

And that’s it! You’ve just added a beautiful, responsive parallax scrolling section to your Shopify store — no apps, no extra cost, just clean HTML and CSS. 🎉

Written by Zahidul Islam | Shopify Custom Design Tutorials