How to Add Parallax Banner in Shopify Theme

Want to add a stunning parallax scrolling banner to your Shopify store without using an app? Parallax effects make your store feel premium, like Apple, Gucci, or Nike. This complete tutorial walks you through adding a fully-functional parallax banner using a single Shopify section file. No app needed, no monthly fees, works on iOS (most tutorials break there).

Works with Dawn, Refresh, Sense, Craft, Studio, Horizon and any free Shopify 2.0 theme.

Watch the Parallax Banner Tutorial

Prefer to follow along visually? Watch the full walkthrough where I install the parallax banner on a live Dawn theme and demonstrate both parallax methods:

What You’ll Get With This Shopify Parallax Banner

This is not a basic image banner. It is a complete parallax system with TWO different parallax methods built in – a smooth JavaScript transform method that works on iOS (where most parallax tutorials break) and a simpler CSS fixed background method for desktop-only sites. Add stunning depth to your store like Gucci, Apple, and other premium brands – without paying for any app.

2 Parallax Methods
JS Transform (iOS-safe) or CSS Fixed.

Smooth GPU-Accelerated
requestAnimationFrame + translate3d.

Adjustable Speed
Subtle (5%) to dramatic (40%).

Mobile-Aware
Disable on mobile to save battery.

Sequential Fade-In
Subheading then heading then text.

9 Content Positions
3×3 grid: top/center/bottom + L/C/R.

2 CTA Buttons
Primary + secondary, 3 shapes.

Image Focal Points
5 crop positions for smart framing.

Color Overlay
Solid or 5-direction gradient.

Per-Breakpoint Heights
Different heights for desktop/tablet/mobile.

Inset Banner Style
Side margins + corner radius.

Text Shadow Toggle
Better readability over busy images.

Step 1: Create a New Section File

Open Your Theme Code

From your Shopify admin, go to Online Store > Themes.
Click the three dots on your current theme > “Edit code”.
In the left sidebar, scroll to the Sections folder.
Click “Add a new section”.
Name it: parallax-banner-ecomranks
Delete any default code Shopify puts in the file.

Step 2: Copy & Paste the Parallax Banner Code

Click the Copy Code button below, then paste it into your new parallax-banner-ecomranks.liquid file and click Save.

parallax-banner-ecomranks.liquid

{% comment %}
  PARALLAX BANNER -- by EcomRanks
  Fiverr: https://fvrr.co/3BsbtyA
{% endcomment %}

{%- assign s = section.settings -%}

<style>
  /* Full CSS with 30+ customizable properties */
  /* JS Transform parallax (works on iOS) */
  /* CSS Fixed background fallback */
  /* Sequential fade-in animation */
  /* All driven by Customizer settings */
</style>

<section class="ecr-px-section">
  <!-- Parallax background image -->
  <!-- Color or gradient overlay -->
  <!-- Content: subheading + heading + desc + buttons -->
</section>

<script>
  /* requestAnimationFrame parallax loop */
  /* GPU-accelerated translate3d */
  /* IntersectionObserver fade-in */
  /* Mobile detection + auto-disable */
</script>

{% schema %}
  /* 30+ settings: image, parallax method,      */
  /* speed, content, alignment, sizes, buttons, */
  /* colors, overlay, gradient, dimensions,     */
  /* margins, branding                          */
{% endschema %}

Important: The code block above is a preview. Click Copy Code to get the complete working file with all 720+ lines of code.

Step 3: Add the Parallax Banner in the Customizer

Open Customize and Add the Section

Go to Online Store > Themes > Customize.
Navigate to where you want the banner (Home page, About page, Collection page, etc.).
Click “Add section”.
Search for “Parallax Banner”.
Upload your banner image and customize all the settings.
Click Save.

Step 4: Configure Your Parallax Banner Settings

The section comes with 30+ settings split into clear groups. Here is the full breakdown:

Image	Upload banner image. 5 focal points (top/center/bottom/left/right) for smart cropping.
Parallax Method	JS Transform (recommended, iOS-safe), CSS Fixed Background, or None (static).
Parallax Speed	Adjust from subtle 5% to dramatic 40%. Default 20% is balanced.
Content	Subheading, main heading, description with custom sizes and weights.
Content Position	9 positions via 3×3 grid (horizontal: left/center/right, vertical: top/center/bottom).
Buttons	Primary + secondary buttons with custom text and links. 3 shapes (pill/rounded/square).
Colors	Text, accent (subheading + button), overlay color and opacity (0-90%).
Gradient Overlay	Optional fade overlay in 5 directions for cinematic effect.
Dimensions	Different heights for desktop, tablet, and mobile. Corner radius for inset look.
Margins	Top, bottom, and side margins for floating banner with rounded corners.
Animations	Sequential fade-in (subheading then heading then desc then buttons), text shadow toggle.

Need Custom Shopify Development?

I build custom Shopify sections, full theme customizations, and conversion-optimized stores. If you need something beyond this free code – I am here to help.

Hire Me on Fiverr

Free Website Audit

Don’t Have a Shopify Store Yet?

Start your Shopify store for just $1/month – 3-day free trial + $1/month for 3 months (90 days total).

Start Your Shopify Store

Shopify Parallax Banner FAQ & Troubleshooting

Does the parallax effect work on iPhone (iOS Safari)?

Yes – if you use the JS Transform method (the default and recommended option). The CSS Fixed Background method is broken on iOS Safari due to a known bug, which is why most parallax tutorials look terrible on iPhone. My JS method uses requestAnimationFrame + translate3d for smooth, GPU-accelerated parallax that works perfectly on every device.

Why is my CSS Fixed Background breaking my homepage?

If you used another tutorial that used position: fixed on the image element directly, the image escapes its section and covers the whole viewport. My section avoids this by applying background-attachment: fixed to the section container itself with isolation: isolate for proper stacking context. If you need maximum compatibility, use the JS Transform method instead.

Can I use this banner on product pages and collection pages?

Yes. The section is enabled on all templates – home, product, collection, page, blog. Add it as many times as you want, in any position. Each instance has its own settings and unique scoped styles, so they will not conflict.

Does it work with all Shopify themes?

It works with Dawn and all free Shopify 2.0 themes including Refresh, Sense, Craft, Studio, Origin, Colorblock, Crave, Spotlight, and Horizon. For paid themes or heavily customized themes, minor CSS adjustments may be needed – hire me on Fiverr if you want it integrated cleanly with your theme.

Can I add multiple parallax banners on one page?

Yes. Each instance uses a unique scoped ID, so you can stack multiple parallax banners on the same page without any CSS or JavaScript conflicts. Many premium stores use 2-3 parallax banners on the home page to break up content sections.

What image size should I use for the parallax banner?

Use a high-resolution image at least 2000px wide. Aspect ratios of 16:9 or 21:9 work best for landscape banners. The section auto-generates responsive sizes (480px, 720px, 990px, 1400px, 1800px, 2400px) using Shopify’s image_url filter, so customers only download the size their device needs.

Will the parallax effect slow down my Shopify store?

No. The JS implementation uses requestAnimationFrame with proper throttling and only runs when the banner is visible in the viewport. The transform is GPU-accelerated via translate3d. Total JavaScript is under 2KB minified. By default, parallax is disabled on mobile to save battery and keep scrolling smooth – you can enable it via the checkbox if you want.

Why is my text hard to read on the banner?

Two settings help: increase the Overlay Opacity slider (35-60% darkens busy images), and turn on the Text Shadow checkbox. For dramatic results, enable the gradient overlay – it fades from solid color at the bottom to transparent at the top, perfect for placing white text over photography.

I need help or want more custom features.

Happy to help. Send me a message on WhatsApp or hire me on Fiverr for custom parallax effects, multi-layer parallax (foreground + background), video backgrounds, or full theme customization.

Let’s Build Your Dream Shopify Store

I’m a Shopify developer specializing in theme customization, CRO, and custom sections. Small tweak or full store build – I’m here to help.

Built by EcomRanks – Shopify Development & CRO