How to change top slideshow image on responsive mode from lap top

Technical Q&A

Topic summary

A Dawn theme user wants to display different slideshow images for desktop versus mobile/responsive views.

Proposed Solution:
Cedcommerce provides a two-step technical approach:

Step 1 - Liquid Code:

  • Add conditional code to the slideshow.liquid file
  • Wrap the existing desktop image with class desktop_img
  • Create a new mobile image block using block.settings.mob_image and block.settings.mob_im

Step 2 - CSS & Schema:

  • Add media queries to hide/show images based on screen width (768px breakpoint)
  • Add an image picker setting to the schema for selecting the mobile image

Current Status:
The user asks for clarification about which specific liquid file to modify in Step 1. Cedcommerce confirms the code should be added to the slideshow.liquid file. MS Web Designer also offers assistance but their full response appears incomplete.

The solution requires editing theme code files and adding custom CSS for responsive image switching.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Hello.

I am using Dawn theme.

I would like to change top slideshow image on responsive mode from lap top.

Could anyone guide me please?

スクリーンショット 2023-01-09 12.34.05.png
スクリーンショット 2023-01-09 12.34.05.png2880×1579 392 KB

Here is the URL:

https://fuswbm86yeaq9rbv-58606616633.shopifypreview.com

Thank you in advance!

2

Hello @harukajmickey ,

To fix this issue, you need to create a setting for responsive mode. Follow the below steps to do the same.

Step-1:

Add the below-provided code underneath the liquid file and add class desktop_img into your current image div.

{% if block.settings.show_mob_image %}

<img class=”mob_img” src=”{{block.settings.mob_image | img_url: ‘master’ }}” alt=“{{ block.settings.mob_image.alt | escape }}”

{% endif %}

Schema:

{

“type” : “image_picker”,

“id”: “mob_image”,

“label”: “Responsive / Mobile Image”
}

Step-2:

Now add CSS:

@media(min-width: 768px) {

.mob_img {

display: none;

}

}

@media(max-width: 767px) {

desktop_img {

display: none;

}

}

Hope it helps. Let us know if you need any help.

Regards,

CedCommerce

3

Hi @harukajmickey !

I hope you are doing good and welcome to the Shopify Community!

This is MS Web Designer (Top Rated Shopify Certified Experts and eCommerce Consultant from India & Singapore).

You need to add a liquid code for your responsive image.

4

@Cedcommerce

Which liquid file do I need to add Step 1?

Thank you.

5

Hello @harukajmickey ,

Thank you for reaching out to us. You need to add the liquid code to the slideshow.liquid file.

Let us know if you need any further help with this.

All the best,

CedCommerce