Customisation

Store Design
,
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

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

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.

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

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