Make different image of slideshow for desktop and mobile for refresh theme

Store Design
,
1

i need code for slideshow image so it cab be show different in mobile and disktop

2

Hello @Rechard

Refer this link: it will be helpful to you -

https://community.shopify.com/c/shopify-design/seperate-slideshow-images-on-mobile-and-desktop-refresh-theme/td-p/1815765

3

Hi @Rechard

To change the hero images in the slideshow for desktop and mobile in the Shopify “Refresh” theme, you can customize the Liquid templates and CSS. Here’s an example code to achieve this:

  1. Edit the “index.liquid” file:
  • In your Shopify admin, go to “Online Store” > “Themes”.
  • Locate the “Refresh” theme and click on “Actions” > “Edit code”.
  • In the “Sections” folder, find the “index.liquid” file and open it.
  1. Update the “index.liquid” file with the following code:
{% if template contains 'index' %}
  {% for block in section.blocks %}
    {% if block.type == 'slideshow' %}
      
        {% for slide in block.slides %}
          {% assign slide_image = slide.settings.image %}
          
        {% endfor %}
      

    {% endif %}
  {% endfor %}
{% endif %}
  1. Add the following CSS code to your theme’s stylesheet (e.g., “theme.scss.liquid”):
.slideshow {
position: relative;
}
@media (min-width: 768px) {
/* Styles for desktop */
.slideshow img.mobile {
display: none;
}
}
@media (max-width: 767px) {
/* Styles for mobile */
.slideshow img.desktop {
display: none;
}
}

Explanation:

  • The Liquid code retrieves the hero images from the slideshow section in the “index.liquid” template.
  • The images are looped through, and their source (img_url) and alt attributes are used.
  • Each image has a class assigned based on whether it is the first image (desktop) or subsequent images (mobile).
  • The CSS code uses media queries to hide the appropriate image based on the screen size. On desktop, the mobile images are hidden, and on mobile, the desktop images are hidden.

Make sure to save your changes and preview the theme to see the updated slideshow with different hero images for desktop and mobile. Remember to replace any placeholder images or alt text with your actual image URLs and appropriate descriptions.

Thanks & Regards
SaarTech || Shopify Partner

4

hello sir thanks for reply but where i put these commands in liquid and css below or above ?

5

Screenshot (19).png
Screenshot (19).png1920×1080 112 KB

Screenshot (20).png
Screenshot (20).png1920×1080 109 KB

Screenshot (20).png
Screenshot (20).png1920×1080 109 KB

6

there is no such file sir what should i do next

7

Hi @Rechard You have search for the section in which you have to make changes .
First search for code for the section and find the code from where the desktop image is rendering . Remove that code and please the code mentioned in my last comment .

8

Please refer to the below video to implement the same.