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:

  

    

      
Eco-Friendly Living Starts Here
      
Discover handcrafted wooden furniture and decor that bring natural warmth to your home while protecting the planet.
      Shop EcoSpan Collection
    
  
  


  

🎨 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
  and paragraph
  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