Customisation

Store Design
,

Topic summary

Goal: show different banner images/layouts on desktop vs mobile in the Dawn theme without unwanted cropping.

Context: Dawn doesn’t offer separate desktop/mobile image settings by default. The user struggles to make one image work for both.

Key guidance:

  • Recommended sizes: desktop banner ~1920x750; mobile ~600x600.
  • Two approaches:
    1. No deep code: add two banner (or slideshow) sections—one for desktop, one for mobile—and use CSS media queries to hide/show each:
      • Mobile section: hide on ≥750px; Desktop section: hide on ≤749px. Similar selectors provided for Slideshow.
    2. Code-level (Liquid + CSS): edit sections/image-banner.liquid to add a second image picker (e.g., mobile_image), render two elements (desktop/mobile classes), and control visibility with CSS @media queries (breakpoint ~768px).

Resources: Shopify theme architecture and settings docs were referenced. Code snippets and CSS are central to the solution.

Constraints/considerations: Option 1 is simpler but requires maintaining CSS when sections change. Option 2 is more robust but needs advanced theme editing.

Outcome/status: The user is not comfortable with advanced coding and is considering hiring help. Offers for paid theme customization and contact options were provided. Discussion remains open pending the user’s choice.

Summarized with AI on December 11. AI used: gpt-5.
1

I have seen other websites have slight different picture layouts from mobile to pc. I was wondering how as i struggle with making the image look good on both as it just crops it

2 Likes
2

for banners best size is 1920x750 and for mobile 600x600

1 Like
3

Thanks for your reply, on the dawn theme it doesn’t allow me to edit each one seperately. it just crops it to fit so I cant get it to look right on both

4

Hi @user3105 to have separte settings for desktop vs mobile that is an advanced theme customization beyond the scope of the forums as it requires deeper file modifications.
Reach out if you need theme customization services.
To DIY there are various tutorials you can just google for various themes that might apply to your theme.
Or if your code savvy see the theme architecture docs to get started learning shopify theme dev.
specifically the settings system https://shopify.dev/docs/storefronts/themes/architecture/settings

5

What theme are you using?
You can create 2 image section layouts to add separate images for mobile and desktop. After that, you can add CSS code to Customize CSS of each section to hide the desktop section on mobile and vice versa.

6

Hi @user3105

Open your theme code

Online Store → Themes → Edit code

Open the image banner section

Usually:

sections/image-banner.liquid

Add two image pickers to schema

Add this inside {% schema %}:

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

Show desktop image on PC

<img class="desktop-banner" src="{{ section.settings.image | img_url: '1600x' }}" />

Show mobile image on phones

<img class="mobile-banner" src="{{ section.settings.mobile_image | img_url: '800x' }}" />

Add CSS to hide/show correctly

Add to base.css or theme.css:

.desktop-banner {
  display: block;
}

.mobile-banner {
  display: none;
}

@media (max-width: 768px) {
  .desktop-banner {
    display: none;
  }
  .mobile-banner {
    display: block;
  }
}

Best regards,
Devcoder :laptop:

7

@user3105 hello, there are 2 options

1] as mentioned by @devcoders you can edit the code and create a separate section for mobile, this is bit time taking and costly as advanced coding is needed.

or

2] you can create 2 banner sections, one for desktop and one for mobile, and then using CSS you can hide/show the one you like. This needs to update the CSS code if in future you remove one section and add new one.

1 Like
8

I am using the dawn theme, I am not too comfortable going into advance coding. Do you think it would be worth me freelancing it in that case?

9

I am not comfortable going into advanced customization, coding is not my thing at all. So could I reach out for some help? that would be great thanks

1 Like
10

If you are using the Image banner section, please create two image banner sections and add code to the Custom CSS of each.

  • Add this code to Custom CSS of mobile’s section.
@media (min-width: 750px) {
    .banner { display: none; }
}
  • Add this code to Custom CSS of desktop’s section.
@media (max-width: 749px) {
    .banner { display: none; }
}

If you are using Slideshow section, please use the codes below

  • Mobile section
@media (min-width: 750px) {
    slideshow-component { display: none; }
}
  • Desktop section
@media (max-width: 749px) {
    slideshow-component { display: none; }
}
11

@user3105 Yes, Reach out if you need theme customization services.
Click my profile-pic on the forums for options to connect, please provide reference-url/context in all new comms thanks.
Or request I send you a private-message