Large hero banners are one of the biggest contributors to slow Shopify page loads. But using Shopify’s responsive image filters and dynamic section settings, you can load the perfect banner size for every device—without sacrificing quality.

This tutorial teaches you how to:

• Add a hero banner image picker in the theme editor
• Load the correct image size based on screen width
• Serve retina-quality images using Shopify’s image_url filters
• Improve page speed with responsive markup

🔥 Why Correct Image Sizing Matters

If you upload a 3000px hero image, but someone views your site on a mobile phone (375px wide), Shopify will still load the full-size image unless you specify responsive sizes.

That means:

• Huge page weight
• Slow mobile speed
• Poor Core Web Vitals

So we will use <img srcset> + Shopify image_url filters for perfect sizing.

📌 Step 1: Create or Edit the Hero Banner Section

Go to:

Online Store → Themes → Edit Code

Open the section file (or create a new one):

sections/hero-banner.liquid

Add this base HTML structure:

{% if section.settings.hero_image %} {% endif %} {% if section.settings.heading != blank %}

{{ section.settings.heading }}

{% endif %}

Now let’s make it responsive.

📌 Step 2: Add Responsive Image Sizes (srcset)

Replace the <img> tag with this fully responsive version:

This tells the browser:

• Use the right image size for the visitor’s screen
• Load smaller files on mobile
• Load large, crisp images on desktop/retina

📌 Step 3: Add Section Schema for Easy Editing

At the bottom of the file, add:

{% schema %}
{
  "name": "Hero Banner",
  "settings": [
    {
      "type": "image_picker",
      "id": "hero_image",
      "label": "Hero Banner Image"
    },
    {
      "type": "text",
      "id": "hero_alt_text",
      "label": "Image Alt Text",
      "default": "Hero banner image"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Banner Heading",
      "default": "Welcome to Our Store"
    }
  ],
  "presets": [
    {
      "name": "Hero Banner"
    }
  ]
}
{% endschema %}

This lets store owners visually choose the banner image from the theme editor.

📌 Step 4: Add Basic Styling for the Banner

Open:

assets/base.css or assets/custom.css

Add:

.hero-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.hero-text {
  position: absolute;
  bottom: 20%;
  left: 5%;
  color: #fff;
  font-size: 2.2rem;
  text-shadow: 0 0 10px rgba(0,0,0,0.4);
}

You can customize the layout later to match your theme.

📌 Step 5: Add Optional Lazy-Load Background Version

If you prefer background-image banners:

And CSS:

.hero-banner-bg {
  width: 100%;
  height: 70vh;
  background-size: cover;
  background-position: center;
}

🎉 Final Result

• Your hero banner loads perfect image sizes on all devices
• Improved page speed & Core Web Vitals (LCP)
• Images stay crisp on retina screens
• Store owners can change hero images directly in the theme editor

If you want, I can also create:

• Version with gradient overlays
• Version with text + button + alignment controls
• Version using videos instead of images
• Version with fade-in animation

Just tell me! 😊