Hero Image in Home Page

karavancl · August 26, 2025, 1:59pm

hello to the great shopify community.
I’ve just started experimenting with the new Horizon Collection themes by Shopify. I’ve selected the Ritual theme to play with just to explore new features and additions.
What i need to ask has to do with the Hero Image or Slideshow in the Home Page.

In my current theme there’s an option to upload two images for each section, one for mobile devices and one for desktop devices so to achieve a fully responsive look in our home page. However there’s no such option in the Horizon themes.

Do you have any idea how can i achieve that, or maybe a prompt for the Sidekick to help me create that feature?

Thank you in advance.

Moeed · August 26, 2025, 2:06pm

Hey @karavancl

Some theme’s section by default don’t support having two images option for desktop and mobile but no worries at all, just simply create two sections and add desktop image in one and mobile image in another and then just simply send me the URL and I’ll provide you with a code to fix that.

Or if you just wanna skip all of that then just let me know I’ll be happy to custom code a section for you that will support both desktop and mobile images!

Best,
Moeed

devcoders · August 27, 2025, 3:21am

@karavancl welcome to the Shopify community!

You’re right — the new Horizon collection themes (including Ritual) don’t include a built-in option for uploading separate images for desktop and mobile in the hero section. They generally rely on Shopify’s responsive image handling, which automatically scales a single image across different devices.

If you want full control (like a dedicated desktop image and a separate mobile image), you’ll need to customize the theme:

Option 1 (Code edit): Duplicate the hero section (or slideshow section) and add extra image pickers in the section schema — one for desktop and one for mobile. Then, in the Liquid/HTML, use CSS media queries to display the appropriate image depending on screen width.
Option 2 (Sidekick prompt): You could ask Sidekick something like:
“Add a mobile image picker to the hero section of the Ritual theme, so I can upload different images for desktop and mobile. Use CSS media queries to show the correct one.”

This way, you’ll get a proper responsive setup similar to what your old theme offered.

If you’re not comfortable editing the Liquid/JSON files yourself, you can either copy the existing code for the hero image section and adjust it, or share your theme code here and someone can guide you step by step.

oscprofessional · August 27, 2025, 5:08am

Hi @karavancl ,
Here’s how you can implement it in your Horizon/Ritual theme’s hero or banner section for mobile and desktop image.

Add Mobile Image Setting

In your hero/banner section (e.g. sections/image-banner.liquid), add to the schema:

{
  "type": "image_picker",
  "id": "mobile_image",
  "label": "Mobile Image"
}

Replace the existing img tag with something like this:

<picture>
  {% if section.settings.mobile_image != blank %}
    <source 
      media="(max-width: 768px)" 
      srcset="{{ section.settings.mobile_image | image_url: width: 800 }}">
  {% endif %}
  
  {% if section.settings.image != blank %}
    <source 
      media="(min-width: 769px)" 
      srcset="{{ section.settings.image | image_url: width: 2000 }}">
    
    <img 
      src="{{ section.settings.image | image_url: width: 2000 }}" 
      alt="{{ section.settings.image.alt | escape }}" 
      class="hero-image">
  {% endif %}
</picture>

mageplaza-cs · August 27, 2025, 6:44am

Hi @karavancl ,
I am from Mageplaza - Shopify solution expert.

There’s a fairly simple way to achieve this. Please follow the instructions I provided above.
Add “Desktop Image” + “Mobile Image” settings in the section
You can edit the section’s Liquid file to add two separate image pickers. For example, in sections/hero.liquid (or whichever section is powering the slideshow):

{% if section.settings.desktop_image != blank and section.settings.mobile_image != blank %}
  <picture>
    <source media="(max-width: 767px)" srcset="{{ section.settings.mobile_image | image_url }}">
    <source media="(min-width: 768px)" srcset="{{ section.settings.desktop_image | image_url }}">
    <img src="{{ section.settings.desktop_image | image_url }}" alt="{{ section.settings.alt_text | escape }}">
  </picture>
{% endif %}

And in the section schema, add:

{
  "type": "image_picker",
  "id": "desktop_image",
  "label": "Desktop image"
},
{
  "type": "image_picker",
  "id": "mobile_image",
  "label": "Mobile image"
},
{
  "type": "text",
  "id": "alt_text",
  "label": "Image alt text"
}

I hope you’ll be able to understand and apply the code snippets as guided. If you’re unable to do so, feel free to share your collaborator access with me, and I’ll be happy to assist you in implementing it easily.

Best regards!

Tipo_Sinh-Dev · August 27, 2025, 6:46am

Hi there,

You’re right — the new Horizon (Ritual) theme doesn’t currently include a built-in “separate desktop vs. mobile image” option like some older themes. There are a couple of ways you can achieve it:

1. Use built-in responsive tools
Upload one high-quality image and rely on the theme’s responsive behavior (it will crop/scale differently on desktop vs. mobile). This is the default behavior.

2. Duplicate the section and hide/show by device

Add two Hero/Slideshow sections in your editor.
Upload the desktop image in one, the mobile image in the other.
In the section settings (or with custom CSS), hide one on desktop and hide the other on mobile. Example CSS:

@media (max-width: 767px) {
  .hero-desktop { display: none; }
}
@media (min-width: 768px) {
  .hero-mobile { display: none; }
}

3. Custom code approach
If you’re comfortable editing theme files, you can update the Hero section’s Liquid code to add two image pickers (desktop + mobile) and then serve the correct one with a picture element or media queries.

4. Sidekick prompt
If you’d like to try Shopify Sidekick, you can ask something like:
“Add an option in the Hero section so I can upload separate images for desktop and mobile.”
Sidekick should generate the code for you.

If you don’t want to dive into code, the simplest path is option 2 (duplicate the section and hide one per device).

Best regards,

Sinh Developer, from Tipo

Small_Task_Help · August 27, 2025, 7:07am

Hi,

Hope this will help

Add two image_picker settings to a custom hero section and output them using a element so the browser picks the mobile image on small screens and desktop image on larger screens.

Create a new custom hero section file (hero-mobile-desktop.liquid.)

Section code example which need to paste in new custom hero section

<!-- sections/hero-mobile-desktop.liquid -->
<section id="hero-{{ section.id }}" class="hero-section">
  <div class="hero-media">
    <picture>
      {% if section.settings.mobile_image != blank %}
        <!-- mobile image used on small screens -->
        <source media="(max-width: 749px)"
                srcset="{{ section.settings.mobile_image | image_url: width: 800 }}">
      {% endif %}

      {% if section.settings.desktop_image != blank %}
        <!-- desktop image used on larger screens -->
        <source media="(min-width: 750px)"
                srcset="{{ section.settings.desktop_image | image_url: width: 1600 }}">
      {% endif %}

      <!-- fallback img (desktop as default) -->
      <img
        src="{{ section.settings.desktop_image | image_url: width: 1600 }}"
        alt="{{ section.settings.image_alt }}"
        loading="lazy"
        class="hero-img" />
    </picture>
  </div>

  {% if section.settings.show_text %}
  <div class="hero-content">
    <h1>{{ section.settings.heading }}</h1>
    {% if section.settings.cta_text != blank %}
      <a href="{{ section.settings.cta_link }}" class="btn">{{ section.settings.cta_text }}</a>
    {% endif %}
  </div>
  {% endif %}
</section>

<style>
/* Basic styling — tweak to match your theme */
.hero-section { position: relative; overflow: hidden; }
.hero-media { width: 100%; display: block; }
.hero-media picture, .hero-media img { width: 100%; display: block; }
.hero-media img { height: auto; object-fit: cover; }

/* Suggested hero heights (change to taste) */
@media (min-width: 750px) {
  .hero-media { min-height: 56vh; }
}
@media (max-width: 749px) {
  .hero-media { min-height: 40vh; }
}
</style>

{% schema %}
{
  "name": "Hero — Mobile / Desktop",
  "settings": [
    {
      "type": "image_picker",
      "id": "desktop_image",
      "label": "Desktop image"
    },
    {
      "type": "image_picker",
      "id": "mobile_image",
      "label": "Mobile image"
    },
    {
      "type": "text",
      "id": "image_alt",
      "label": "Image alt text",
      "default": "Hero image"
    },
    {
      "type": "checkbox",
      "id": "show_text",
      "label": "Show heading & CTA",
      "default": true
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Welcome to our store"
    },
    {
      "type": "text",
      "id": "cta_text",
      "label": "CTA text",
      "default": "Shop now"
    },
    {
      "type": "url",
      "id": "cta_link",
      "label": "CTA link"
    }
  ],
  "blocks": [],
  "presets": [
    {
      "name": "Hero (mobile/desktop)",
      "category": "Banner"
    }
  ]
}
{% endschema %}

karavancl · August 27, 2025, 8:19am

whoa! You all guys are amazing. I didn’t expect such a fast response and all that useful options for my request.
Can’t thank you enough.
I’ll begin by trying to ask sidekick create it with the prompt @devcoders provided and come back with the results.

@devcoders @Moeed @oscprofessional @mageplaza-cs @Tipo_Sinh-Dev @Small_Task_Help Thank you very much!

The_ScriptFlow · August 27, 2025, 8:26am

Hey @karavancl,
Thank you for the appreciation for the response given by the Shopify Developers.
By any chance can you please share your store url along with the password [If applicable] so that I can take a look and provide you with the solution code. Or if you could share the 4 digits collab code then this would help me to take a look in your theme file and do the requested changes.
Thanks

devcoders · August 27, 2025, 3:28pm

Hello @karavancl

Thank you very much for your kind words. I’m glad the suggestions were helpful, and I look forward to hearing how it goes for you.

GloboApps-Felix · August 28, 2025, 3:54am

Hi @karavancl ,

To implement a mobile and desktop image for your Hero/Banner section in the Horizon/Ritual theme, you can do the following:

First, you need to add a setting for the mobile image. In your sections/image-banner.liquid file, within the schema, add this:

{
  "type": "image_picker",
  "id": "mobile_image",
  "label": "Mobile Image"
}

Then, update the existing <img> tag to handle both mobile and desktop images. Use the <picture> element as shown below:

<picture>
  {% if section.settings.mobile_image != blank %}
    <source 
      media="(max-width: 768px)" 
      srcset="{{ section.settings.mobile_image | image_url: width: 800 }}">
  {% endif %}
  
  {% if section.settings.image != blank %}
    <source 
      media="(min-width: 769px)" 
      srcset="{{ section.settings.image | image_url: width: 2000 }}">
    
    <img 
      src="{{ section.settings.image | image_url: width: 2000 }}" 
      alt="{{ section.settings.image.alt | escape }}" 
      class="hero-image">
  {% endif %}
</picture>

This will ensure that your hero image or slideshow works responsively for both mobile and desktop views.

Let me know if you need further help!

Best,

Felix

namphan · August 28, 2025, 4:19am

Hi @karavancl,

You can follow these steps:

Step 1: Upload both Media, Media for desktop and Media 2 for mobile.
Step 2: Go to Custom CSS section and add code:

.hero__media-wrapper {
    grid-template-columns: 1fr;
}
.hero__media-wrapper .hero__image:last-child {
    display: none;
}
@media screen and (max-width: 749px) {
.hero__media-wrapper .hero__image:last-child {
    display: block;
}
.hero__media-wrapper .hero__image:first-child {
    display: none;
}
}

Topic		Replies	Views
Different home page banner image for desktop and mobile - North Theme Store Design	5	14	August 3, 2022
Verschiedene Bild für Destop als auch für mobile App Shopify Design	8	14	May 18, 2021
How to upload separate Banner Image file for Mobile And Desktop - REFRESH THEME Store Design	5	32	May 12, 2023
Show different image on mobile and desktop image banner, horizon theme Store Design design , troubleshooting	6	193	September 11, 2025
Add mobile slider hero image different than desktop Design di Shopify	0	10	October 6, 2020

Hero Image in Home Page

Related topics