We’ve developed Shopify slideshow for mobile feature in the Debut theme and used the existing Slick slider. So we’ll walk through this tutorial expecting you’re using Debut theme. If you’re not using Debut then we have a different solution for that. We’ll discuss that after the Debut theme tutorial.
Step 1: From your Shopify admin, go to Online Store > Themes.
Step2: Find the theme you want to edit, and then click Actions > Edit code
Step 3: Go to Sections > slideshow.liquid and find the following code into this file:
<div class="slideshow__media banner__media media">
{%- if block.settings.image -%}
{%- assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round -%}
{{ block.settings.image | image_url: width: 3840 | image_tag:
loading: 'lazy',
height: height,
sizes: "100vw",
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
}}
{%- else -%}
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
</div>
<div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% elsif block.settings.image != blank and block.settings.mb_image == blank %} show-desktop-image{% else %} desktop-img{% endif %}">
{%- if block.settings.image -%}
{%- assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round -%}
{{ block.settings.image | image_url: width: 3840 | image_tag:
loading: 'lazy',
height: height,
sizes: "100vw",
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
}}
{%- else -%}
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
</div>
Step 5: After the above mentioned code added please add one more slideshow code for mobile:
<div class="slideshow__media banner__media media{% if block.settings.mb_image != blank %} mb-img{% endif %}">
{%- if block.settings.mb_image -%}
{%- assign height = block.settings.mb_image.width | divided_by: block.settings.mb_image.aspect_ratio | round -%}
{{ block.settings.mb_image | image_url: width: 3840 | image_tag:
loading: 'lazy',
height: height,
sizes: "100vw",
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
}}
{%- endif -%}
</div>
Step 6: Now we can go to schema settings and add the schema settings for mobile image in the blocks:
{
"type": "image_picker",
"id": "mb_image",
"label": "t:sections.slideshow.blocks.slide.settings.mb_image.label"
},
Step 7: After added schema we need to go to Locales > en.default.schema.json file and add the following code in the slideshow section in this json file under blocks:
"mb_image": {
"label": "Mobile Image"
},
Step 8: Now we need to add css code into assets > component-slideshow.css at the bottom of css file to show mobile image and hide desktop image:
/* Show Mobile image on mobile screen and desktop image on desktop screen styles start */
.media.desktop-img{
display: block;
}
.media.mb-img{
display: none;
}
@media (max-width: 750px){
.media.desktop-img{
display: none;
}
.media.mb-img{
display: block;
}
}
/* Show Mobile image on mobile screen and desktop image on desktop screen styles end */
Step 9: Click Save and you are done.
Coding part is done.
Now you can go to the slideshow section on customization and add mobile images.
Thanks
theme.liquid
and find the ending </head>
tag and add the following slick slider cdn right above the </head>
tag:https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js
</head>
tag.Imagine! Seamlessly connecting the vast customer base of eBay with the robust features of your…
Let’s face it. Running an online store requires unwavering discipline. Juggling multiple tasks simultaneously is…
There’s no denying that Shopify has taken over the world. The ecommerce platform contributes to…
It’s true. Every marketing strategy has one common objective: to drive maximum conversion rates. If…
*Sigh*. Are you tired of trying out different methods of making money online? Hear it…
When driving traffic to your Shopify store, Search Engine Optimization (SEO) is the most affordable…
View Comments
Hi,
I´ve successfully added the "specific-device-slideshow.liquid" in the "Sections" of the Debut theme. The section "Multi Device Slideshow" can be selected in the Theme Editor and I can add the "Big device image" and "Small device image" just as in the screenshot above.
But after saving any desktop browser up to 4K resolution only displays the small device image. Any idea how I can debug or fix this?
Thanks!
You're missing the CSS Styles.
@media (max-width:749px){
.multi-slideshow-wrapper .desktop-image{
display:none;
}
}
@media (min-width:750px){
.multi-slideshow-wrapper .mobile-image{
display:none;
}
}