FROM CACHE - en_header
Promotion image
Solved

Different images for mobile than desktop web

nooreen
Tourist
7 0 3
‎06-05-2019 06:01 AM

Hello,

 

I am wondering what code I need to enter (and where!) to allow for different images on mobile web than desktop web view?

 

I currently am using a custom theme - does this determine where I need to be looking to add the code?

 

Thanks in advance!

Nooreen

 

102,284 Views
1 Like
Report
Accepted Solution (1)
In response to nooreen

Ninthony
Shopify Partner
2330 350 1024
‎06-05-2019 04:32 PM

This is an accepted solution.

It's completely understandable you're lost. At first the way that shopify does things doesnt make a whole lot of sense. Your template pages are they key parts of your site. So when you want to edit the homepage, you want to edit index.liquid. Now, if you have not developed the theme yourself, probably all you're going to even see inside of index.liquid is "{{ content_for_index }}" <--- That's a liquid object. Basically that renders everything that you've specified inside of your Customize section, your visual editor.

 

Take the section you posted, "banner.liquid" -- That's probably one of your sections you can edit when you open your visual editor. All of that:

{{ section.settings.link }}

 stuff is referring to all the options in your customize editor.  All that stuff underneath it inbetween the {% schema %} tags are where you define what kinds of things you want to have in your section. I have not worked with sections much, but I'm fairly certain I can walk you through so you can make this change. Duplicate your theme just to be sure you have a copy in case anything goes wrong.

 

First go into your {% schema %} tags and look for this portion:

 

{
"type": "image_picker",
"id": "image",
"label": "Banner Image"
},

Copy that and paste it below it and change the ID to "mobile_image":

 

{
"type": "image_picker",
"id": "image",
"label": "Banner Image"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Banner Image"
},

Be sure to keep the comma after the closing curly bracket. 

 

Then you're going to want to go into the html and duplicate the image portion kind of the same way and we're going to set it up so image 2 displays. You're also going to give your <img> tags  a class name of "hidden_desktop" and "hidden_mobile" -- I separated the duplicate part with a comment:

 

<style>
.hidden_desktop{
  display:block;
}
.hidden_mobile {
  display: none;
}
@media (min-width:992px){
  .hidden_desktop{
    display:none;
  }
  .hidden_mobile {
    display: block;
  }
}
</style>
<div class="velaBanner" style="{% if section.settings.margin_block !=blank %}margin:{{section.settings.margin_block}}; {% endif %}
{% if section.settings.padding_block !=blank %}padding:{{section.settings.padding_block}}; {% endif %}">
<div class="container{% if section.settings.full_with %}-full{% endif %}">
<div class="{{ section.settings.effect }}">
{% if section.settings.link != blank %}<a href="{{ section.settings.link }}" title="{{ block.settings.image.alt | default: shop.name }}">{% endif %}
{% if section.settings.image != blank %}
<img class="img-responsive hidden_mobile" alt="{{ section.settings.image.alt | default: shop.name }}" src="{{ section.settings.image | img_url: '2000x' }}" />
{% else %}
<img class="img-responsive hidden_mobile" alt="{{ shop.name }}" src="//placehold.it/{{ section.settings.image_size }}" />
{% endif %}
{% comment %}Above will be the desktop image and below will be the mobile image{% endcomment %}
{% if section.settings.mobile_image != blank %}
<img class="img-responsive hidden_desktop" alt="{{ section.settings.image.alt | default: shop.name }}" src="{{ section.settings.mobile_image | img_url: '992x' }}" />
{% else %}
<img class="img-responsive hidden_desktop" alt="{{ shop.name }}" src="//placehold.it/{{ section.settings.image_size }}" />
{% endif %}
{% if section.settings.link != blank %}</a>{% endif %}
</div>
</div>
</div>

Now you should be able to go into your customize section and find the portion for mobile image and upload an image there. I think this will work, like I said I have not worked in sections a whole lot but the logic seems there for me. I didn't change the other sections like image_size and whatnot, but this shouldn't matter unless you don't have an image uploaded there. Like I said, be sure to duplicate your theme and give this a shot.  Let me know how it turns out.

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

View solution in original post

94,706 Views
16 Likes
Report
Replies 202 (202)
In response to Ninthony

davispa2002
Tourist
9 0 2
‎10-14-2020 04:04 AM

@Ninthony 

Thanks so much for the reply. Sorry for asking so much but this is completely new to me.
I believe that I have found the area of code where the changes need to be made, but I cannot figure out exactly what it is I need to change (I believe I need to change the parts where it says "hero__image hero__image--"). In addition to adding the multiple image pickers by changing the code between the schema tags, I also added the top part between the style tags. Below is the slideshow.liquid code area where I think the changes need to be made.

Any help would be awesome!

 

<style>
.hidden_desktop{
display:block;
}
.hidden_mobile {
display: none;
}
@media (min-width:992px){
.hidden_desktop{
display:none;
}
.hidden_mobile {
display: block;
}
}
</style>

<div class=" hero__slide slide--{{ block.id }}{% if block.settings.image == blank %} slide--placeholder{% endif %}"
data-hero-slide
{{ block.shopify_attributes }}>
{%- if block.settings.image == blank -%}
<div class="placeholder-background">
{%- capture current -%}{% cycle 1, 2 %}{%- endcapture -%}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- else -%}
<noscript>
{%- if forloop.first == true -%}
<div class="hero__image-no-js"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}');"{% endif %}></div>
{%- endif -%}
</noscript>
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- assign mobile_img_url = block.settings.mobile_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="hero__image hero__image--{{ block.id }} lazyload fade-in{% unless forloop.first == true %} lazypreload{% endunless %} hidden-mobile"
{%- if forloop.first == true -%}
src="{{ block.settings.image | img_url: '300x' }}"
{%- endif -%}
data-src="{{ img_url }}"
data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="cover"
data-hero-image
alt="{{ block.settings.image.alt | escape }}"
style="object-position: {{ block.settings.image_position }}">
<img class="hero__image hero__image--{{ block.id }} lazyload fade-in{% unless forloop.first == true %} lazypreload{% endunless %} hidden-desktop"
{%- if forloop.first == true -%}
src="{{ section.settings.mobile_image | img_url: '300x' }}"
{%- endif -%}
data-src="{{ mobile_img_url }}"
data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="cover"
data-hero-image
alt="{{ block.settings.image.alt | escape }}"
style="object-position: {{ block.settings.image_position }}">
{%- endif -%}

 

 

6,034 Views
1 Like
Report
In response to Ninthony

Chintangala
Visitor
1 0 0
‎10-22-2020 09:39 AM

Hi Ninthony,

I'm also completely lost about where to place the HTML code. 

Can you please help 🙂

Thanks,

Chintan 

5,937 Views
0 Likes
Report
In response to Chintangala

koolchip
Visitor
1 0 0
‎10-25-2020 08:20 PM

Hi the code worked well for me. I use a slideshow however, would you be able to give me modified code for it? 

It is not clear to me how to send a private message in this forum.

 

Thanks

5,731 Views
0 Likes
Report
In response to Ninthony

KatieSunny
Visitor
1 0 1
‎11-20-2020 05:06 PM

This worked perfectly for me too! I just did a search in Google for adding a separate image to the mobile site on Shopify and found this thread with your reply, it works perfectly! THANK YOU! 

5,289 Views
1 Like
Report
In response to KatieSunny

Smifff_
Visitor
3 0 0
‎11-24-2020 10:52 AM

Creating the desktop-mobile-banner section worked great on Debut. May I ask if anyone managed to remove the padding though? Thanks

5,249 Views
0 Likes
Report
In response to Smifff_

Smifff_
Visitor
3 0 0
‎11-24-2020 11:00 AM

Scratch that, I added this just after the <style> tag

.template-index main.main-content{
margin-top: -100px;

}

 

5,242 Views
0 Likes
Report
In response to Ninthony

tcarroll123
New Member
9 0 0
‎12-08-2020 04:09 AM

hi,

is it possible to somehow adjust the padding on the desktop version and mobile version separately. 

 

At the moment the 2 never seem to be quite right. 

 

thank

 

tom 

5,445 Views
0 Likes
Report
In response to tcarroll123

Smifff_
Visitor
3 0 0
‎12-08-2020 04:36 AM

I took the padding down to -75 I think as it was cutting off too much desktop image off the top. Cuts a bit of mobile off now but much better to work with. I just got linked to this tutorial which essentially does the same but looks much longer code so interested in trying it. Gotta join FB group to grab it though so if someone could copy it and paste it here...

https://www.youtube.com/watch?v=f6qIMVKoFt4&ab_channel=EcomGraduates

5,433 Views
0 Likes
Report
In response to Ninthony

db1991
Visitor
2 0 0
‎04-14-2021 06:21 PM

@Ninthony not sure which code to switch for the hidden images can you help. I am using mr. parker theme

<div class="index-section custom-section" data-section-id="{{ section.id }}">
{% if section.settings.full_width %}<div class="gridlock-fluid"><div class="row" style="width: 100%;">{% endif %}
<div class="row">
{% if section.settings.title != blank %}
{% include 'section-headings', type: section.settings.title %}
{% endif %}

{% for block in section.blocks %}
{% case block.settings.container_width %}
{% when '25%' %}
{%- assign cont_width = 'desktop-3' -%}
{% when '33%' %}
{%- assign cont_width = 'desktop-4' -%}
{% when '40%' %}
{%- assign cont_width = 'desktop-5' -%}
{% when '50%' %}
{%- assign cont_width = 'desktop-6' -%}
{% when '60%' %}
{%- assign cont_width = 'desktop-7' -%}
{% when '66%' %}
{%- assign cont_width = 'desktop-8' -%}
{% when '75%' %}
{%- assign cont_width = 'desktop-9' -%}
{% when '100%' %}
{%- assign cont_width = 'desktop-12' -%}
{% endcase %}

<div class="{% if section.settings.no_spaces %}contained {% endif %}staggered-image-wrapper {{ cont_width }} tablet-half mobile-3 float-{{ block.settings.alignment }} section-{{ section.id }}" data-aos="{{ settings.scroll_animation }}">

<div class="image-layout image_gallery-{{ block.id }}" {{ block.shopify_attributes }}>

{% if block.settings.link != blank %}
<a href="{{ block.settings.link }}">
{% endif %}

{% if block.settings.image != blank %}
{% include 'basic-responsive-image' | type: block.settings.image %}
<noscript>
<img src="{{ block.settings.image | img_url: '800x' }}" alt="{{ block.settings.image.alt }}">
</noscript>
{% else %}
<div class="onboard">
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% endif %}

{% if block.settings.link != blank %}
</a>
{% endif %}

{% unless block.settings.title == 'blank' and block.settins.text == 'blank' %}
<div class="custom-content-featured-text-{{ block.settings.align_text }} gallery_text">
{% if block.settings.title != blank %}
<h2>{{ block.settings.title | escape }}</h2>
{% endif %}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{% if block.settings.link != blank and block.settings.button_text != blank %}
<a href="{{ block.settings.link }}" class="button">
{{ block.settings.button_text }}
</a>
{% endif %}
</div>
{% endunless %}

</div>
{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
</div>
<style>
{% if block.settings.text_options == 'on_image' %}
.image_gallery-{{ block.id }} .gallery_text { position: absolute; bottom: {{ block.settings.vertical_position }}%; left: {{ block.settings.horizontal_position }}%; }
{% endif %}
.image_gallery-{{ block.id }} .gallery_text h2 { font-size: {{ block.settings.heading_size }}px; }

@media screen and (max-width: 980px) {
.image_gallery-{{ block.id }} .gallery_text h2 { font-size: 18px; }
.image_gallery-{{ block.id }} .gallery_text p { font-size: 14px; line-height: 20px; }
}
.image_gallery-{{ block.id }} .gallery_text h2, .image_gallery-{{ block.id }} .gallery_text p { color: {{ block.settings.caption_color }}; }
</style>

{% endfor %}
</div>
{% if section.settings.full_width %}</div></div>{% endif %}
</div>

<div class="clear"></div>

<style>
.section-{{ section.id }}.contained.staggered-image-wrapper, .section-{{ section.id }}.contained.staggered-image-wrapper .image-layout {
margin-bottom: 0;
}
.index-section .staggered-image-wrapper.section-{{ section.id }} h2 { margin-left: 0; margin-right: 0; width: 100%; padding: 10px 0;}
.staggered-image-wrapper.float-left { float: left; display: inline !important; }
.staggered-image-wrapper.float-right { float: right !important; display: inline !important; }
{% if section.settings.title == blank %}
.custom-section { margin-top: 20px; }
{% endif %}

.image-layout { position: relative; }
.gallery_text h2, .gallery_text p { margin-bottom: 0; }
.gallery_text a.button { margin-top: 15px; }
.custom-content-featured-text-left, .custom-content-featured-text-left h2.sections, .custom-content-featured-text-left h2.sections span { text-align: left; padding-left: 0; }
.custom-content-featured-text-center, .custom-content-featured-text-center h2.sections, .custom-content-featured-text-center h2.sections span { text-align: center; }
.custom-content-featured-text-right, .custom-content-featured-text-right h2.sections, .custom-content-featured-text-right h2.sections span { text-align: right; padding-right: 0; }
.custom-section a.button { text-align: center !important; }
</style>

{% schema %}
{
"name":"Gallery",
"max_blocks":7,
"settings":[
{
"type": "checkbox",
"id": "full_width",
"label": "Enable full width",
"default":true
},
{
"type": "checkbox",
"id": "no_spaces",
"label": "Remove spaces",
"default":false
},
{
"type":"text",
"id":"title",
"label":"Heading",
"default":"Gallery"
}
],
"blocks":[
{
"type":"image",
"name":"Image",
"settings":[
{
"type": "header",
"content": "Image Settings"
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Mobile Image"
},
{
"type":"select",
"id":"container_width",
"label":"Width",
"default":"33%",
"options":[
{
"value":"25%",
"label":"25%"
},
{
"value":"33%",
"label":"33%"
},
{
"value":"40%",
"label":"40%"
},
{
"value":"50%",
"label":"50%"
},
{
"value":"60%",
"label":"60%"
},
{
"value":"66%",
"label":"66%"
},
{
"value":"75%",
"label":"75%"
},
{
"value":"100%",
"label":"100%"
}
]
},
{
"type":"select",
"id":"alignment",
"label":"Position",
"default":"left",
"options":[
{
"value":"left",
"label":"Left"
},
{
"value":"right",
"label":"Right"
}
]
},
{
"type":"url",
"id":"link",
"label":"Link",
"info":"Optional"
},
{
"type": "header",
"content": "Text Settings"
},
{
"type":"text",
"id":"title",
"label":"Heading",
"default":"Our Collections"
},
{
"type": "range",
"id": "heading_size",
"min": 12,
"max": 40,
"step": 1,
"unit": "px",
"label": "Heading size",
"default": 22
},
{
"id": "text",
"type": "richtext",
"label": "Text",
"default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
},
{
"type": "text",
"id": "button_text",
"label": "Button text"
},
{
"type": "color",
"id": "caption_color",
"label": "Text color",
"default": "#000000"
},
{
"type":"select",
"id":"align_text",
"label":"Text alignment",
"default":"left",
"options":[
{
"value":"left",
"label":"Left"
},
{
"value":"center",
"label":"Centered"
},
{
"value":"right",
"label":"Right"
}
]
},
{
"type": "select",
"id": "text_options",
"default": "on_image",
"options": [
{
"value": "on_image",
"label": "Over image"
},
{
"value": "below_image",
"label": "Below image"
}
],
"label": "Text position"
},
{
"type": "range",
"id": "vertical_position",
"min": 0,
"max": 100,
"step": 2,
"unit": "%",
"label": "Text over image vertical position",
"default": 12
},
{
"type": "range",
"id": "horizontal_position",
"min": 0,
"max": 100,
"step": 2,
"unit": "%",
"label": "Text over image horizontal position",
"default": 14
}
]
}
],
"presets":[
{
"name":"Gallery",
"category":"Image",
"blocks":[
{
"type":"image"
},
{
"type":"image"
},
{
"type":"image"
}
]
}
]
}
{% endschema %}

 

5,177 Views
0 Likes
Report
In response to db1991

jarmen
Visitor
1 0 0
‎04-16-2021 10:45 AM

Does anyone know how to make these images clickable?

5,164 Views
0 Likes
Report
In response to Ninthony

6clojas
Visitor
1 0 1
‎07-25-2021 02:32 AM

Hi Ninthony, 

Please can you give me your email? Desperately need help fixing my code on my website. My email is jayclosel@gmail.com 

 

5,119 Views
1 Like
Report
In response to Ninthony

goldensocksclub
Tourist
5 0 1
‎07-26-2021 12:11 AM

Hello, Im trying to get the same thing done on my website. As you said the only thing inside my index.liquid is "{{ content_for_index }}"

 

I added the code to the file but its not working for me

5,106 Views
1 Like
Report
In response to Ninthony

NATURALHEIR
Visitor
2 0 1
‎07-28-2021 08:51 AM

HI

MY PHOTOS LOOK GOOD IN MOBILE MODE BUT IN DESKTOP THEY LOOK TERRIBLE. PLEASE HELP!

5,091 Views
1 Like
Report
In response to Ninthony

vapeshed
Tourist
4 0 2
‎09-27-2021 04:16 PM

Hi Ninthony,

Is there a way to modify this code so that an SVG can be uploaded?

5,217 Views
1 Like
Report
In response to vapeshed

JWFOG
Tourist
4 0 2
‎10-07-2021 04:42 AM

Hi @Ninthony ,

So there are so many pages now I cannot find the answer.

How do I show different pictures on mobile vs desktop in the product description on the product page?

Also how do I implement lazy loading?

Thanks a lot for your help!

5,165 Views
1 Like
Report
In response to Ninthony

coraliegc
Tourist
8 0 3
‎12-06-2021 08:11 PM

Hello !

 

I am trying to do this for my slideshow.

 

I have managed to do the first thing you said, but do not understand the second step at all, when you talk about going in the html...

 

Is there anyway to have more details and explanations ?

 

I am quite lost...

4,938 Views
1 Like
Report
In response to coraliegc

coraliegc
Tourist
8 0 3
‎12-06-2021 08:25 PM

@Ninthony If you can help me please it would be so appreciated ! I have spend 10+ hours on this and still not able to do it 😞

4,937 Views
1 Like
Report
In response to Ninthony

Hottuboutfitter
Tourist
3 0 1
‎01-26-2022 01:33 PM

Hi, Can you help for our website at www.hottuboutfitters.ca 

 

The problem I am having is very similar. The top banner picture shows up correctly on desktop but cuts off the sides on mobile viewing. I would love some help with this

4,877 Views
1 Like
Report
In response to Ninthony

JenceyK
Tourist
6 0 1
‎03-18-2022 11:31 AM

Hi I have a question on a mobile image that's not being displayed. This is the current code and it's not pulling through the mobile image. It's always showing the web header image.

 

{% comment %}
** Slideshow - homepage partial **
- Draggable section
- Uses blocks
{% endcomment %}

{% assign default = '1400x' %}
{% assign size1 = '480x' %}
{% assign size2 = '765x' %}
{% assign size3 = '900x' %}
{% assign size4 = '1000x' %}
{% assign size5 = '1100x' %}
{% assign size6 = '1300x' %}
{% assign size7 = '1500x' %}
{% assign size8 = '1700x' %}
{% assign size9 = '1900x' %}
{% assign size10 = '2000x' %}

{% if section.blocks.size > 0 %}
<section id="homepage_slider-{{section.id}}"
class="homepage-slideshow js-homepage-slideshow slideshow_animation--{{ section.settings.slideshow_animation }} {% if section.settings.slideshow_text_animation != '' %}text-animation--true{% endif %}"
data-slider-id="homepage_slider-{{section.id}}"
data-slideshow-speed="{{section.settings.slideshow_speed}}"
data-slideshow-text-animation="{{section.settings.slideshow_text_animation}}"
>
{% for block in section.blocks %}
<div class="gallery-cell slide-{{ forloop.index }}" {{ block.shopify_attributes }} data-block-id="{{block.id}}">
{% if block.settings.image != nil %}
<img alt="{{ block.settings.image.alt | escape }}"
class="lazyload dsktp-img {% if block.settings.image_mobile != nil %}has-mobile-img {% endif %}{{ settings.image_loading_style }}"
sizes="100vw"
data-src="{{ block.settings.image | img_url: default, format: 'pjpg' }}"
data-srcset="
{{ block.settings.image | img_url: default, format: 'pjpg' }} {{default | replace: 'x', 'w'}},
{{ block.settings.image | img_url: size1, format: 'pjpg' }} {{size1 | replace: 'x', 'w'}},
{{ block.settings.image | img_url: size2, format: 'pjpg' }} {{size2 | replace: 'x', 'w'}},
{{ block.settings.image | img_url: size3, format: 'pjpg' }} {{size3 | replace: 'x', 'w'}},
{{ block.settings.image | img_url: size4, format: 'pjpg' }} {{size4 | replace: 'x', 'w'}},
{{ block.settings.image | img_url: size5, format: 'pjpg' }} {{size5 | replace: 'x', 'w'}},
{{ block.settings.image | img_url: size6, format: 'pjpg' }} {{size6 | replace: 'x', 'w'}},
{{ block.settings.image | img_url: size7, format: 'pjpg' }} {{size7 | replace: 'x', 'w'}},
{{ block.settings.image | img_url: size8, format: 'pjpg' }} {{size8 | replace: 'x', 'w'}},
{{ block.settings.image | img_url: size9, format: 'pjpg' }} {{size9 | replace: 'x', 'w'}},
{{ block.settings.image | img_url: size10, format: 'pjpg' }} {{size10 | replace: 'x', 'w'}}"
/>
{% else %}
{% capture i %}{% cycle "1", "2" %}{% endcapture %}
{{ 'lifestyle-' | append: i | placeholder_svg_tag: 'placeholder-svg placeholder-svg--slideshow' }}
{% endif %}

{% if block.settings.image_mobile != nil %}
<img src="{{ block.settings.image_mobile | img_url: '100x', format: 'pjpg' }}"
alt="{{ block.settings.image_mobile.alt | escape }}"
class="lazyload mobile-img {{ settings.image_loading_style }}"
sizes="100vw"
data-src="{{ block.settings.image | img_url: default, format: 'pjpg' }}"
data-srcset="
{{ block.settings.image_mobile | img_url: default, format: 'pjpg' }} {{default | replace: 'x', 'w'}},
{{ block.settings.image_mobile | img_url: size1, format: 'pjpg' }} {{size1 | replace: 'x', 'w'}},
{{ block.settings.image_mobile | img_url: size2, format: 'pjpg' }} {{size2 | replace: 'x', 'w'}},
{{ block.settings.image_mobile | img_url: size3, format: 'pjpg' }} {{size3 | replace: 'x', 'w'}},
{{ block.settings.image_mobile | img_url: size4, format: 'pjpg' }} {{size4 | replace: 'x', 'w'}},
{{ block.settings.image_mobile | img_url: size5, format: 'pjpg' }} {{size5 | replace: 'x', 'w'}},
{{ block.settings.image_mobile | img_url: size6, format: 'pjpg' }} {{size6 | replace: 'x', 'w'}},
{{ block.settings.image_mobile | img_url: size7, format: 'pjpg' }} {{size7 | replace: 'x', 'w'}},
{{ block.settings.image_mobile | img_url: size8, format: 'pjpg' }} {{size8 | replace: 'x', 'w'}},
{{ block.settings.image_mobile | img_url: size9, format: 'pjpg' }} {{size9 | replace: 'x', 'w'}},
{{ block.settings.image_mobile | img_url: size10, format: 'pjpg' }} {{size10 | replace: 'x', 'w'}}"
/>
{% endif %}

{% unless block.settings.button1_link != blank and block.settings.button2_link != blank %}
{% if block.settings.button1_link != blank %}
<a href="{{ block.settings.button1_link }}" class="banner-full-link">
{{ block.settings.title }}
</a>
{% elsif block.settings.button2_link != blank %}
<a href="{{ block.settings.button2_link }}" class="banner-full-link">
{{ block.settings.title }}
</a>
{% endif %}
{% endunless %}
{% unless block.settings.pretext == blank and block.settings.title == blank and block.settings.subtitle == blank and block.settings.button1 == blank and block.settings.button2 == blank %}
<div class="caption position-{{block.settings.text_position}} js-caption">
<div class="caption-content
caption-background-{{block.settings.caption_background}}
caption-transparency-{{ block.settings.caption_background_transparency }}
align-{{block.settings.text_align}}">
{% if block.settings.pretext != blank %}
<div class="pretext"{%- if block.settings.custom_colors != false -%} style="color: {{ block.settings.preheading_color }};"{%- endif -%}>
{{ block.settings.pretext }}
</div>
{% endif %}
{% if forloop.first == true and block.settings.title != blank %}
<h1 class="headline"{%- if block.settings.custom_colors != false -%} style="color: {{ block.settings.heading_color }};"{%- endif -%}>
{{ block.settings.title }}
</h1>
{% elsif block.settings.title != blank %}
<p class="headline"{%- if block.settings.custom_colors != false -%} style="color: {{ block.settings.heading_color }};"{%- endif -%}>
{{ block.settings.title }}
</p>
{% endif %}
{% if block.settings.subtitle != blank %}
<div class="subtitle"{%- if block.settings.custom_colors != false -%} style="color: {{ block.settings.subheading_color }};"{%- endif -%}>
{{ block.settings.subtitle }}
</div>
{% endif %}
{% if block.settings.button1 != blank %}
{% if block.settings.first_button_type == 'solid' %}{% assign btnType = 'solid' %}{% else %}{% assign btnType = 'bordered' %}{% endif %}
<a {% if block.settings.button1_link != blank %}href="{{ block.settings.button1_link }}"{% endif %} class="action_button first_button highlight-{{block.settings.button1_highlight}} {{ btnType }}"{%- if block.settings.custom_colors != false -%} style="color:{{ block.settings.first_btn_color }};"{%- endif -%}>
{{ block.settings.button1 }}
</a>
{% endif %}
{% if block.settings.button2 != blank %}
<a {% if block.settings.button2_link != blank %}href="{{ block.settings.button2_link }}"{% endif %} class="action_button second_button highlight-{{block.settings.button2_highlight}}">
{{ block.settings.button2 }}
</a>
{% endif %}
</div>
</div>
{% endunless %}

{% style %}
.slide-{{ forloop.index }} .caption-content .action_button.first_button.solid {
background: {{ block.settings.first_btn_bg }}!important;
}
.slide-{{ forloop.index }} .caption-content .action_button.first_button.bordered {
border: 2px solid {{ block.settings.first_btn_border }}!important;
}
.slide-{{ forloop.index }} .caption-content .action_button.second_button.solid {
background: {{ block.settings.second_btn_bg }};
}
.slide-{{ forloop.index }} .caption-content .action_button.second_button.bordered {
border: 2px solid {{ block.settings.second_btn_border }}!important;
}
{% endstyle %}

</div>
{% endfor %}
</section>
{% endif %}

{% schema %}

{
"name": "Slideshow",
"class": "slideshow-section under-menu",
"settings": [
{
"type": "select",
"id": "slideshow_text_animation",
"label": "Text animation",
"options": [
{
"value": "",
"label": "None"
},
{
"value": "fadeIn",
"label": "Fade In"
},
{
"value": "fadeInUp",
"label": "Fade Up"
},
{
"value": "fadeInDown",
"label": "Fade Down"
}
],
"default": "fadeInDown"
},
{
"type": "select",
"id": "slideshow_animation",
"label": "Gallery transition",
"options": [
{
"value": "slide",
"label": "Slide"
},
{
"value": "fade",
"label": "Fade"
}
],
"default": "slide"
},
{
"type": "range",
"id": "slideshow_speed",
"label": "Change slides every",
"min": 4,
"max": 12,
"step": 1,
"default": 6,
"unit": "sec"
}
],
"blocks": [
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "1600 x 1000px recommended"
},
{
"type": "image_picker",
"id": "image_mobile",
"label": "Mobile Image",
"info": "750 x 800px recommended"
},
{
"type": "richtext",
"id": "pretext",
"label": "Preheading"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Your headline"
},
{
"type": "richtext",
"id": "subtitle",
"label": "Subheading"
},
{
"type": "select",
"id": "text_position",
"label": "Text position",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "select",
"id": "text_align",
"label": "Text alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "checkbox",
"id": "caption_background",
"label": "Display text background"
},
{
"type": "checkbox",
"id": "caption_background_transparency",
"label": "Enable text background transparency"
},
{
"type": "text",
"id": "button1",
"label": "First button label"
},
{
"type": "url",
"id": "button1_link",
"label": "First button link"
},
{
"type": "radio",
"id": "first_button_type",
"label": "Button Type",
"options": [
{ "value": "solid", "label": "Solid" },
{ "value": "bordered", "label": "Bordered" }
],
"default": "solid"
},
{
"type": "checkbox",
"id": "button1_highlight",
"label": "Highlight first button"
},
{
"type": "text",
"id": "button2",
"label": "Second button label"
},
{
"type": "url",
"id": "button2_link",
"label": "Second button link"
},
{
"type": "radio",
"id": "second_button_type",
"label": "Button Type",
"options": [
{ "value": "solid", "label": "Solid" },
{ "value": "bordered", "label": "Bordered" }
],
"default": "solid"
},
{
"type": "checkbox",
"id": "button2_highlight",
"label": "Highlight second button"
},
{
"type": "header",
"content": "Custom Colors"
},
{
"type": "checkbox",
"id": "custom_colors",
"label": "Use Custom Colors",
"default": false
},
{
"type": "header",
"content": "Text"
},
{
"type": "color",
"id": "preheading_color",
"label": "Preheading",
"default": "#000000"
},
{
"type": "color",
"id": "heading_color",
"label": "Heading",
"default": "#000000"
},
{
"type": "color",
"id": "subheading_color",
"label": "Subheading",
"default": "#000000"
},
{
"type": "header",
"content": "Button"
},
{
"type": "color",
"id": "first_btn_bg",
"label": "First Button Background",
"default": "#000000"
},
{
"type": "color",
"id": "first_btn_color",
"label": "First Button Text",
"default": "#000000"
},
{
"type": "color",
"id": "first_btn_border",
"label": "First Button Border",
"default": "#000000"
},
{
"type": "color",
"id": "second_btn_bg",
"label": "Second Button Background",
"default": "#000000"
},
{
"type": "color",
"id": "second_btn_color",
"label": "Second Button Text",
"default": "#000000"
},
{
"type": "color",
"id": "second_btn_border",
"label": "Second Button Border",
"default": "#000000"
}
]
}
],
"presets": [{
"name": "Slideshow",
"category": "Image",
"settings": {
},
"blocks": [
{
"type": "image",
"settings": {
"image": "",
"title": "Turbo Shopify Theme",
"subtitle": "",
"text_align": "center"
}
},
{
"type": "image",
"settings": {
"image": "",
"title": "",
"subtitle": "",
"text_align": "center"
}
}
]
}]
}

{% endschema %}

4,807 Views
1 Like
Report
In response to Ninthony

JoNg01
Tourist
5 0 2
‎04-04-2022 04:38 AM

Hi Ninthony,

Thank you for this solution as it has helped me change to a different image in mobile view. However, my desktop view now has two images.... Wondering if you would be able to help with this? I edited and inserted the code under "hero.liquid" as that is the element I'm using for my banner. Attached below is the issue I am facing now.

JoNg01_0-1649061498111.png

 

4,788 Views
0 Likes
Report
In response to Ninthony

prapti
Visitor
1 0 0
‎06-22-2022 01:32 AM

im facing the same issue but with boundless theme, 

 

here is slideshow.liquid from "section"

please advise

{%- if section.settings.hero_home_height == 'adapt' -%}
  {%- comment -%}
    'min_aspect_ratio' is the minimum aspect ratio of images shown without
    whitespace when 'hero_home_height' is set to 'adapt'.
    The aspect ratio values for the first image in the slideshow will be used
    unless it is blank, in that case a ratio of 2:1 will be used.
  {%- endcomment -%}

  {%- assign first_block = section.blocks[0] -%}
  {%- if first_block.settings.hero_slide.aspect_ratio == blank -%}
    {%- assign min_aspect_ratio = 2.0 -%}
  {%- else -%}
    {%- assign min_aspect_ratio = first_block.settings.hero_slide.aspect_ratio -%}
  {%- endif -%}
  {%- assign wrapper_height = 100 | divided_by: min_aspect_ratio -%}

  {%- style -%}
    .hero {
      height: {{- wrapper_height -}}vw !important;
      overflow: hidden;
    }
    .hero .slick-track,
    .hero .hero__slide:before {
      height: {{- wrapper_height -}}vw;
    }
  {%- endstyle -%}
{%- endif -%}

{%- style -%}
  .site-header__link,
  .site-header__logo-link {
    color: {{ section.settings.hero_icons_color }} !important;
  }

  .hero__text-title {
    color: {{ section.settings.hero_icons_color }};
  }

  .hero__slide:after {
    background-color: {{ section.settings.hero_overlay_color }};
    opacity: {{ section.settings.hero_overlay_amount | divided_by: 100.00 }};
  }

  .hero__button-circle {
    background: {{ section.settings.hero_overlay_color | color_modify: 'alpha', 0.30 }};
  }

  .slick-prev .icon:before,
  .slick-next .icon:before,
  .hero__pause .icon:before {
    color: {{ section.settings.hero_icons_color }};
  }

  .slick-dots {
    background: {{ section.settings.hero_overlay_color | color_modify: 'alpha', 0.30 }};
  }

  .hero__dots:before {
    background-color: {{ section.settings.hero_icons_color }};
    border-color: {{ section.settings.hero_icons_color }};
  }

  .slick-active .hero__dots:before {
    background-color: transparent;
    border: 2px solid {{ section.settings.hero_icons_color }};
  }
{%- endstyle -%}

<div data-section-id="{{ section.id }}" data-section-type="slideshow-section"
  {%- if section.settings.hero_home_height == 'adapt' -%}
    class="hero--adapt"
  {%- endif -%}>
  <div class="hero slideshow-{{ section.id }}"
        id="Hero"
        role="region"
        aria-label="slideshow"
        aria-describedby="slideshow-info"
        tabindex="-1"
        data-autoplay="{{ section.settings.hero_home_auto }}"
        data-autoplayspeed="{{ section.settings.hero_home_auto_speed | times: 1000 }}"
        data-adapt="{% if section.settings.hero_home_height == 'adapt' %}true{% else %}false{% endif %}"
        data-slide-nav-a11y="{{ 'homepage.slideshow.load_slide' | t: slide_number: '[slide_number]' }}"
        data-slide-nav-active-a11y="{{ 'homepage.slideshow.active_slide' | t: slide_number: '[slide_number]' }}">
    {%- if section.blocks.size > 0 -%}
      {%- for block in section.blocks -%}
        <div id="SlickSlide{{ forloop.index }}" aria-hidden="true" class="hero__slide hero__slide--{{ block.id }}{% if block.settings.hero_slide  == blank %} placeholder-background{% endif %}" {{ block.shopify_attributes }}>
          {%- if block.settings.hero_slide  == blank -%}
            {% capture current %}{% cycle 1, 2 %}{% endcapture %}
            {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'icon icon--placeholder' }}
          {%- else -%}
            {% assign img_url = block.settings.hero_slide | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
            <img class="hero__image hero__image--{{ block.id }} lazyload{% unless forloop.first == true %} lazypreload{% endunless %}"
              {%- if forloop.first == true -%}
                src="{{ block.settings.hero_slide | img_url: '300x' }}"
              {%- endif -%}
              data-src="{{ img_url }}"
              data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
              data-aspectratio="{{ block.settings.hero_slide.aspect_ratio }}"
              data-sizes="auto"
              data-parent-fit="cover"
              alt="{{ block.settings.hero_slide.alt | escape }}"
              style="object-position: {{ block.settings.image_position }}">
            {%- if forloop.first == true -%}
              <noscript>
                <div class="hero__image-no-js hero__image--{{ block.id }}" data-image="{{ block.id }}" style="background-image: url('{{ block.settings.hero_slide | img_url: "2048x2048" }}');"></div>
              </noscript>
            {%- endif -%}
          {%- endif -%}
          <div class="hero__content-wrapper">
            <div class="hero__content">
              <div class="hero__content-centered">
                {%- unless block.settings.hero_title == blank -%}
                  <h1 class="hero__text-title" itemscope itemtype="http://schema.org/Organization">
                    {{ block.settings.hero_title | escape }}
                  </h1>
                {%- endunless -%}
                {%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
                  <a href="{{ block.settings.button_link }}" class="btn">
                    {{ block.settings.button_label | escape }}
                  </a>
                {%- endif -%}
              </div>
            </div>
          </div>
        </div>
      {%- endfor -%}
    {%- else -%}
      <div class="hero__slide placeholder-background">
        {{ 'lifestyle-1' | placeholder_svg_tag: 'icon icon--placeholder' }}
      </div>
    {%- endif -%}
    {%- if section.blocks.size > 1 -%}
      {%- capture arrows_slide -%}
        <ul>
          <li>
            <button class="hero__controls-icon slick-prev" aria-label="{{ 'homepage.slideshow.previous_slide' | t }}">
              <span class="hero__button-circle"></span>
              <span class="icon icon-arrow" aria-hidden="true"></span>
            </button>
          </li>
          <li>
            <button class="hero__controls-icon slick-next" aria-label="{{ 'homepage.slideshow.next_slide' | t }}">
              <span class="hero__button-circle"></span>
              <span class="icon icon-arrow" aria-hidden="true"></span>
            </button>
          </li>
        </ul>
      {%- endcapture -%}
      <div class="hero__controls">
        <div class="hero__dots-wrapper hero__dots-wrapper-desktop">
          {%- if section.settings.hero_home_auto -%}
            <button class="hero__pause hero__controls-icon" aria-live="polite" aria-label="{{ 'homepage.slideshow.pause' | t }}" data-label-pause="{{ 'homepage.slideshow.pause' | t }}" data-label-play="{{ 'homepage.slideshow.play' | t }}">
              <span class="hero__button-circle"></span>
              <span class="icon icon-pause" aria-hidden="true"></span>
              <span class="icon icon-play" aria-hidden="true"></span>
            </button>
          {%- endif -%}
        </div>
        {{ arrows_slide }}
      </div>
    {%- endif -%}
  </div>
  {%- if section.settings.hero_home_height == 'adapt' -%}
    <div class="hero__content-wrapper-mobile">
      {%- if section.blocks.size > 1 -%}
        <div class="hero__controls">
          <div class="hero__dots-wrapper">
            {%- if section.settings.hero_home_auto -%}
              <button class="hero__pause hero__controls-icon" aria-live="polite" aria-label="{{ 'homepage.slideshow.pause' | t }}" data-label-pause="{{ 'homepage.slideshow.pause' | t }}" data-label-play="{{ 'homepage.slideshow.play' | t }}">
                <span class="icon icon-pause" aria-hidden="true"></span>
                <span class="icon icon-play" aria-hidden="true"></span>
              </button>
            {%- endif -%}
            {{ arrows_slide }}
          </div>
        </div>
      {%- endif -%}
      {%- for block in section.blocks -%}
        {%- assign show_link_button = false -%}
        {%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
          {%- assign show_link_button = true -%}
        {%- endif -%}
        {%- if block.settings.hero_title != blank or show_link_button -%}
          <div class="hero__content-mobile text-center{% if section.blocks.size == 1 %} is-active{% endif %}" data-index="{{ forloop.index }}">
            {%- unless block.settings.hero_title == blank -%}
              <h2 class="{% if section.blocks.size == 1 %}hero-title-empty {% endif %}hero-title-mobile h1">
                {{ block.settings.hero_title | escape }}
              </h2>
            {%- endunless -%}
            {%- if show_link_button -%}
              <a href="{{ block.settings.button_link }}" class="hero-btn-mobile btn">
                {{ block.settings.button_label | escape }}
              </a>
            {%- endif -%}
          </div>
        {%- endif -%}
      {%- endfor -%}
    </div>
  {%- endif -%}
</div>
<p id="slideshow-info" class="visually-hidden" aria-hidden="true">
  {{- 'homepage.slideshow.navigation_instructions' | t -}}
</p>

{% schema %}
{
  "name": {
    "cs": "Prezentace",
    "da": "Diasshow",
    "de": "Slideshow",
    "en": "Slideshow",
    "es": "Diapositivas",
    "fi": "Diaesitys",
    "fr": "Diaporama",
    "it": "Presentazione",
    "ja": "スライドショー",
    "ko": "슬라이드 쇼",
    "nb": "Lysbildefremvisning",
    "nl": "Diavoorstelling",
    "pl": "Pokaz slajdów",
    "pt-BR": "Apresentação de slides",
    "pt-PT": "Apresentação de diapositivos",
    "sv": "Bildspel",
    "th": "สไลด์โชว์",
    "tr": "Slayt gösterisi",
    "vi": "Bản trình chiếu",
    "zh-CN": "幻灯片",
    "zh-TW": "素材輪播"
  },
  "max_blocks": 5,
  "settings": [
    {
      "type": "select",
      "id": "hero_home_height",
      "label": {
        "cs": "Výška snímku",
        "da": "Diashøjde",
        "de": "Diahöhe",
        "en": "Slide height",
        "es": "Altura de diapositiva",
        "fi": "Dian korkeus",
        "fr": "Hauteur de la diapositive",
        "it": "Altezza slide",
        "ja": "スライドの高さ",
        "ko": "슬라이드 높이",
        "nb": "Lysbildehøyde",
        "nl": "Diahoogte",
        "pl": "Wysokość slajdu",
        "pt-BR": "Altura do slide",
        "pt-PT": "Altura do diapositivo",
        "sv": "Bildhöjd",
        "th": "ความสูงของสไลด์",
        "tr": "Slayt yüksekliği",
        "vi": "Chiều cao trang chiếu",
        "zh-CN": "幻灯片高度",
        "zh-TW": "投影片高度"
      },
      "default": "full",
      "info": {
        "cs": "Prostudujte si [nápovědu k prezentaci](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "da": "Få mere at vide om [slideshow guidelines](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "de": "Erfahre mehr über die [Richtlinien für Slideshows](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific)",
        "en": "Learn more about [slideshow guidelines](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "es": "Más información sobre [pautas de presentación de diapositivas](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "fi": "Lisätietoja [diaesitysohjeet](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "fr": "En savoir plus sur [directives de diaporama](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific)",
        "it": "Maggiori informazioni sulle [linee guida per le presentazioni](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "ja": "[スライドショーのガイドライン](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific)に関して詳しくはこちら。",
        "ko": "[슬라이드 쇼 가이드라인에 대해 자세히 알아보기](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific)",
        "nb": "Finn ut mer om [retningslinjer for lysbilder](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "nl": "Meer informatie over [richtlijnen voor diavoorstellingen](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "pl": "Dowiedz się więcej o [wytycznych dotyczących pokazu slajdów](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "pt-BR": "Saiba mais sobre [diretrizes de apresentação de slides](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific)",
        "pt-PT": "Saiba mais sobre [diretrizes de apresentação de diapositivos](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "sv": "Läs mer om [bildspelets riktlinjer](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "th": "ดูข้อมูลเพิ่มเติมเกี่ยวกับ [แนวทางสไลด์โชว์](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific)",
        "tr": "[Slayt gösterisi yönergeleri](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific) hakkında daha fazla bilgi edinin.",
        "vi": "Tìm hiểu thêm về [hướng dẫn trình chiếu](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "zh-CN": "详细了解[幻灯片指南](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific)",
        "zh-TW": "深入瞭解 [素材輪播準則](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific)。"
      },
      "options": [
        {
          "value": "full",
          "label": {
            "cs": "Celá obrazovka",
            "da": "Fuld skærm",
            "de": "Vollbild",
            "en": "Full screen",
            "es": "Pantalla completa",
            "fi": "Kokonäyttö",
            "fr": "Plein écran",
            "it": "A schermo intero",
            "ja": "全画面表示",
            "ko": "전체 화면",
            "nb": "Fullskjerm",
            "nl": "Volledig scherm",
            "pl": "Tryb pełnoekranowy",
            "pt-BR": "Tela cheia",
            "pt-PT": "Ecrã inteiro",
            "sv": "Helskärm",
            "th": "โหมดเต็มหน้าจอ",
            "tr": "Tam ekran",
            "vi": "Toàn màn hình",
            "zh-CN": "全屏",
            "zh-TW": "全螢幕"
          }
        },
4,744 Views
0 Likes
Report
In response to Ninthony

HellGames
New Member
6 0 0
‎03-08-2023 06:42 PM

Hi,

 

I did all what you say but i'm having issues.

In my Shopify appears 2 times "Banner Image" and 1 time "Second Image".

 

Can you help me please?

 

Captura de pantalla 2023-03-09 a las 0.34.02.png

4,559 Views
0 Likes
Report
In response to Ninthony

Lukejackson
Visitor
2 0 0
‎09-03-2023 04:28 AM

Thank you so much for the detailed answer here. I was wondering where I should go to do the second part of this: "Then you're going to want to go into the html and duplicate the image portion kind of the same way and we're going to set it up so image 2 displays. You're also going to give your <img> tags  a class name of "hidden_desktop" and "hidden_mobile" -- I separated the duplicate part with a comment:" I'm not sure what you mean by "go into the html" and I'm not sure where I should copy and paste this part: "

<style>
.hidden_desktop{
  display:block;
}
.hidden_mobile {
  display: none;
}
@media (min-width:992px){
  .hidden_desktop{
    display:none;
  }
  .hidden_mobile {
    display: block;
  }
}
</style>
<div class="velaBanner" style="{% if section.settings.margin_block !=blank %}margin:{{section.settings.margin_block}}; {% endif %}
{% if section.settings.padding_block !=blank %}padding:{{section.settings.padding_block}}; {% endif %}">
<div class="container{% if section.settings.full_with %}-full{% endif %}">
<div class="{{ section.settings.effect }}">
{% if section.settings.link != blank %}<a href="{{ section.settings.link }}" title="{{ block.settings.image.alt | default: shop.name }}">{% endif %}
{% if section.settings.image != blank %}
<img class="img-responsive hidden_mobile" alt="{{ section.settings.image.alt | default: shop.name }}" src="{{ section.settings.image | img_url: '2000x' }}" />
{% else %}
<img class="img-responsive hidden_mobile" alt="{{ shop.name }}" src="//placehold.it/{{ section.settings.image_size }}" />
{% endif %}
{% comment %}Above will be the desktop image and below will be the mobile image{% endcomment %}
{% if section.settings.mobile_image != blank %}
<img class="img-responsive hidden_desktop" alt="{{ section.settings.image.alt | default: shop.name }}" src="{{ section.settings.mobile_image | img_url: '992x' }}" />
{% else %}
<img class="img-responsive hidden_desktop" alt="{{ shop.name }}" src="//placehold.it/{{ section.settings.image_size }}" />
{% endif %}
{% if section.settings.link != blank %}</a>{% endif %}
</div>
</div>
</div>

"

 

Any help would be greatly appreciated!

1,310 Views
0 Likes
Report
In response to Ninthony

trep
Visitor
1 0 0
‎11-23-2023 03:13 PM

Hi Ninthony!

 

I am having the same issue, but I when I do as it says the image changes in mobile and desktop but the text and buttons on top of the images dissapear, here is my original code:

 

<!-- Slider main container Start -->
<div class="home6-slider section" id="section-{{ section.id }}">
  <div class="home6-slide-item" data-bg-image="{% if section.settings.slider_bg_img %}{{ section.settings.slider_bg_img | img_url: 'master' }}{% else %}http:\/\/via.placeholder.com\/1920x845{% endif %}">
    <div class="container">
      <div class="home6-slide1-content">
        {%if section.settings.slider_sub_title != '' %}
        <h3 class="sub-title">{{ section.settings.slider_sub_title }}</h3>
        {% endif %}
        {%if section.settings.slider_title != '' %}
        <h2 class="title">{{ section.settings.slider_title }}</h2>
        {% endif %}
        {%if section.settings.slider_button != '' %}
        <div class="link"><a href="{{ section.settings.slider_button_url }}" class="btn btn-light btn-hover-black">{{ section.settings.slider_button }}</a></div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
<!-- Slider main container End -->

{%- style -%}


  .home6-slide1-content .title {
      color: {{ block.settings.slider_title_color }};
  }
  .home6-slide1-content .sub-title {
      color: {{ block.settings.slider_subtitle_color }};
  }
  .home6-slide1-content .btn-light {
      border-color: {{ block.settings.slider_btn_bc_color }};
      color: {{ block.settings.slider_btn_color }};
	  background-color: {{ block.settings.slider_btn_bg_color }};
  }
  .home6-slide1-content .btn-hover-black:hover {
      color: {{ block.settings.slider_btn_color_hov }};
      border-color: {{ block.settings.slider_btn_bc_color_hov }};
	  background-color: {{ block.settings.slider_btn_bg_color_hov }};
  }


{%- endstyle -%}



{% schema %}
  {
    "name": "Slider Six",
    "settings": [
			  {
                "type": "header",
                "content": "Slide Backgrount",
                "info": "--------"
              },
              {
                  "type": "image_picker",
                  "id": "slider_bg_img",
                  "label": "Image",
                  "info": "Recommended Size: 1920 x 845px"
              },
			  {
                "type": "header",
                "content": "Slide Content",
                "info": "--------"
              },
			  {
                  "type": "text",
                  "id": "slider_title",
                  "label": "Title",
                  "default": "Where Motivations Take Root"
              },
              {
                  "type": "text",
                  "id": "slider_sub_title",
                  "label": "Sub Title",
                  "default": "Little Simple Things"
              },
              {
                  "type": "text",
                  "id": "slider_button",
                  "label": "Button Text",
                  "default": "Shop now"
              },
              {
                  "type": "url",
                  "id": "slider_button_url",
                  "label": "Button URL"
              },
              {
                "type": "header",
                "content": "Slider Style",
				"info": "--------"
              },
              {
                "type": "color",
                "id": "slider_title_color",
                "label": "Slide Title Color",
                "default": "#fff"
              },
			  {
                "type": "color",
                "id": "slider_subtitle_color",
                "label": "Slide Sub title Color",
                "default": "#fff"
              },
			  {
                "type": "color",
                "id": "slider_btn_color",
                "label": "Slide Button Color",
                "default": "#000"
              },
			  {
                "type": "color",
                "id": "slider_btn_bg_color",
                "label": "Slide Button BG Color",
                "default": "#f8f9fa"
              },
			  {
                "type": "color",
                "id": "slider_btn_bc_color",
                "label": "Slide Button Border Color",
                "default": "#f8f9fa"
              },
			  {
                "type": "color",
                "id": "slider_btn_color_hov",
                "label": "Slide Button Hover Color",
                "default": "#f8f9fa"
              },
			  {
                "type": "color",
                "id": "slider_btn_bg_color_hov",
                "label": "Slide Button BG Hover Color",
                "default": "#000"
              },
			  {
                "type": "color",
                "id": "slider_btn_bc_color_hov",
                "label": "Slide Button Border Hover Color",
                "default": "#000"
              }
	],
	"blocks":[
	   {
          "type": "section_padding",
          "name": "Section Padding",
		  "limit": 1,
          "settings": [
            {
			  "type": "header",
			  "content": "Large/Desktop Device"
			},
			{
			  "type": "range",
			  "id": "section_padding_top",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Padding Top",
			  "unit": "px",
			  "default": 0
			},
			{
			  "type": "range",
			  "id": "section_padding_bottom",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Padding Bottom",
			  "unit": "px",
			  "default": 100
			},
			{
			  "type": "header",
			  "content": "Tablet Device"
			},
			{
			  "type": "range",
			  "id": "section_padding_top_md",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Padding Top",
			  "unit": "px",
			  "default": 0
			},
			{
			  "type": "range",
			  "id": "section_padding_bottom_md",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Padding Bottom",
			  "unit": "px",
			  "default": 80
			},
			{
			  "type": "header",
			  "content": "Mobile Device"
			},
			{
			  "type": "range",
			  "id": "section_padding_top_xs",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Padding Top",
			  "unit": "px",
			  "default": 0
			},
			{
			  "type": "range",
			  "id": "section_padding_bottom_xs",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Padding Bottom",
			  "unit": "px",
			  "default": 60
			}
          ]
       },
	   {
          "type": "section_margin",
          "name": "Section Margin",
		  "limit": 1,
          "settings": [
            {
			  "type": "header",
			  "content": "Large/Desktop Device"
			},
			{
			  "type": "range",
			  "id": "section_margin_top",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Margin Top",
			  "unit": "px",
			  "default": 0
			},
			{
			  "type": "range",
			  "id": "section_margin_bottom",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Margin Bottom",
			  "unit": "px",
			  "default": 0
			},
			{
			  "type": "header",
			  "content": "Tablet Device"
			},
			{
			  "type": "range",
			  "id": "section_margin_top_md",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Margin Top",
			  "unit": "px",
			  "default": 0
			},
			{
			  "type": "range",
			  "id": "section_margin_bottom_md",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Margin Bottom",
			  "unit": "px",
			  "default": 0
			},
			{
			  "type": "header",
			  "content": "Mobile Device"
			},
			{
			  "type": "range",
			  "id": "section_margin_top_xs",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Margin Top",
			  "unit": "px",
			  "default": 0
			},
			{
			  "type": "range",
			  "id": "section_margin_bottom_xs",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Margin Bottom",
			  "unit": "px",
			  "default": 0
			}
          ]
       },
	   {
          "type": "section_background",
          "name": "Section Background",
		  "limit": 1,
          "settings": [
            {
			  "type": "image_picker",
			  "id": "section_bg_image",
			  "label": "BG Image"
			},
			{
			  "type": "color",
			  "id": "section_bg_color",
			  "label": "BG Color",
			  "default": "#ffffff"
			}
          ]
       }
	],
	"presets": [
		{
		  "name": "Slider Six",
		  "category": "1. slideshow",
		  "blocks":[

			]
		}
	]
  }
{% endschema %}

 

 

This is the changes i have made in my code but it seems tis is not working, can you help me with this?

 

<!-- Slider main container Start -->

<div class="home6-slider section"  id="section-{{ section.id }}">
  <div class="home6-slide-item hidden_mobile" data-bg-image ="{% if section.settings.image %}{{ section.settings.image | img_url: '2000x' }}{% else %}http:\/\/via.placeholder.com\/1920x{% endif %}">
    <div class="home6-slide-item hidden_desktop" data-bg-image ="{% if section.settings.mobile_image %}{{ section.settings.mobile_image | img_url: '992x' }}{% else %}http:\/\/via.placeholder.com\/992x{% endif %}">
      <div class="container">
        <div class="home6-slide1-content">
          {%if section.settings.slider_sub_title != '' %}
          <h3 class="sub-title">{{ section.settings.slider_sub_title }}</h3>
          {% endif %}
          {%if section.settings.slider_title != '' %}
          <h2 class="title">{{ section.settings.slider_title }}</h2>
          {% endif %}
          {%if section.settings.slider_button != '' %}
          <div class="link"><a href="{{ section.settings.slider_button_url }}" class="btn btn-light btn-hover-black">{{ section.settings.slider_button }}</a></div>
          {% endif %}
        </div> 
      </div>
    </div>
  </div>
</div>
<!-- Slider main container End -->

{%- style -%}

  
  .home6-slide1-content .title {
      color: {{ block.settings.slider_title_color }};
  }
  .home6-slide1-content .sub-title {
      color: {{ block.settings.slider_subtitle_color }};
  }
  .home6-slide1-content .btn-light {
      border-color: {{ block.settings.slider_btn_bc_color }};
      color: {{ block.settings.slider_btn_color }};
	  background-color: {{ block.settings.slider_btn_bg_color }};
  }
  .home6-slide1-content .btn-hover-black:hover {
      color: {{ block.settings.slider_btn_color_hov }};
      border-color: {{ block.settings.slider_btn_bc_color_hov }};
	  background-color: {{ block.settings.slider_btn_bg_color_hov }};
  }


{%- endstyle -%}



{% schema %}
  {
    "name": "Sophie's Slider",
    "settings": [
			  {
                "type": "header",
                "content": "Slide Backgrount",
                "info": "--------"
              },
              {
                  "type": "image_picker",
                  "id": "image",
                  "label": "Banner Image",
                  "info": "Recommended Size: 1920 x 845px"
              },
                  {
                  "type": "image_picker",
                  "id": "mobile_image",
                  "label": "Banner Image",
                  "info": "Recommended Size: 1920 x 845px"
              },
			  {
                "type": "header",
                "content": "Slide Content",
                "info": "--------"
              },
			  {
                  "type": "text",
                  "id": "slider_title",
                  "label": "Title",
                  "default": "Where Motivations Take Root"
              },
              {
                  "type": "text",
                  "id": "slider_sub_title",
                  "label": "Sub Title",
                  "default": "Little Simple Things"
              },
              {
                  "type": "text",
                  "id": "slider_button",
                  "label": "Button Text",
                  "default": "Shop now"
              },
              {
                  "type": "url",
                  "id": "slider_button_url",
                  "label": "Button URL"
              },
              {
                "type": "header",
                "content": "Slider Style",
				"info": "--------"
              },
              {
                "type": "color",
                "id": "slider_title_color",
                "label": "Slide Title Color",
                "default": "#fff"
              },
			  {
                "type": "color",
                "id": "slider_subtitle_color",
                "label": "Slide Sub title Color",
                "default": "#fff"
              },
			  {
                "type": "color",
                "id": "slider_btn_color",
                "label": "Slide Button Color",
                "default": "#000"
              },
			  {
                "type": "color",
                "id": "slider_btn_bg_color",
                "label": "Slide Button BG Color",
                "default": "#f8f9fa"
              },
			  {
                "type": "color",
                "id": "slider_btn_bc_color",
                "label": "Slide Button Border Color",
                "default": "#f8f9fa"
              },
			  {
                "type": "color",
                "id": "slider_btn_color_hov",
                "label": "Slide Button Hover Color",
                "default": "#f8f9fa"
              },
			  {
                "type": "color",
                "id": "slider_btn_bg_color_hov",
                "label": "Slide Button BG Hover Color",
                "default": "#000"
              },
			  {
                "type": "color",
                "id": "slider_btn_bc_color_hov",
                "label": "Slide Button Border Hover Color",
                "default": "#000"
              }
	],
	"blocks":[
	   {
          "type": "section_padding",
          "name": "Section Padding",
		  "limit": 1,
          "settings": [
            {
			  "type": "header",
			  "content": "Large/Desktop Device"
			},
			{
			  "type": "range",
			  "id": "section_padding_top",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Padding Top",
			  "unit": "px",
			  "default": 0
			},
			{
			  "type": "range",
			  "id": "section_padding_bottom",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Padding Bottom",
			  "unit": "px",
			  "default": 100
			},
			{
			  "type": "header",
			  "content": "Tablet Device"
			},
			{
			  "type": "range",
			  "id": "section_padding_top_md",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Padding Top",
			  "unit": "px",
			  "default": 0
			},
			{
			  "type": "range",
			  "id": "section_padding_bottom_md",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Padding Bottom",
			  "unit": "px",
			  "default": 80
			},
			{
			  "type": "header",
			  "content": "Mobile Device"
			},
			{
			  "type": "range",
			  "id": "section_padding_top_xs",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Padding Top",
			  "unit": "px",
			  "default": 0
			},
			{
			  "type": "range",
			  "id": "section_padding_bottom_xs",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Padding Bottom",
			  "unit": "px",
			  "default": 60
			}
          ]
       },
	   {
          "type": "section_margin",
          "name": "Section Margin",
		  "limit": 1,
          "settings": [
            {
			  "type": "header",
			  "content": "Large/Desktop Device"
			},
			{
			  "type": "range",
			  "id": "section_margin_top",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Margin Top",
			  "unit": "px",
			  "default": 0
			},
			{
			  "type": "range",
			  "id": "section_margin_bottom",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Margin Bottom",
			  "unit": "px",
			  "default": 0
			},
			{
			  "type": "header",
			  "content": "Tablet Device"
			},
			{
			  "type": "range",
			  "id": "section_margin_top_md",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Margin Top",
			  "unit": "px",
			  "default": 0
			},
			{
			  "type": "range",
			  "id": "section_margin_bottom_md",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Margin Bottom",
			  "unit": "px",
			  "default": 0
			},
			{
			  "type": "header",
			  "content": "Mobile Device"
			},
			{
			  "type": "range",
			  "id": "section_margin_top_xs",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Margin Top",
			  "unit": "px",
			  "default": 0
			},
			{
			  "type": "range",
			  "id": "section_margin_bottom_xs",
			  "min": 0,
			  "max": 150,
			  "step": 5,
			  "label": "Margin Bottom",
			  "unit": "px",
			  "default": 0
			}
          ]
       },
	   {
          "type": "section_background",
          "name": "Section Background",
		  "limit": 1,
          "settings": [
            {
			  "type": "image_picker",
			  "id": "section_bg_image",
			  "label": "BG Image"
			},
			{
			  "type": "color",
			  "id": "section_bg_color",
			  "label": "BG Color",
			  "default": "#ffffff"
			}
          ]
       }
	],
	"presets": [
		{
		  "name": "Sophie's Slider",
		  "category": "1. slideshow",
		  "blocks":[

			]
		}
	]
  }
{% endschema %}

      <style>
.hidden_desktop{
  display:block;
}
.hidden_mobile {
  display: none;
}
@media (min-width:992px){
  .hidden_desktop{
    display:none;
  }
  .hidden_mobile {
    display: block;
  }
}

 

909 Views
0 Likes
Report
In response to nooreen

gaurav123
Visitor
1 0 0
‎02-26-2020 04:29 AM

Hey dear, 

can you help me in this, I want different images for my desktop view and from the mobile view. 

 

As in desktop, we have more area horizontally, so I want to update a horizontal banner size image

 

For mobile, we have more areas vertically, so I want to update a verticle banner size image.

When my webpage loads on desktop, mobile images hides and when my webpage loads on mobile, desktop image hides .

 

is it possible on products page ?

 

 

7,944 Views
0 Likes
Report
In response to Ninthony

qbiqbi
Tourist
23 0 2
‎01-03-2020 05:24 PM

@Ninthony i try this for Venture Theme and its not working for me

.mobile-image{
display: block;
}
desktop-image{
display: none;
}
@media (min-width:992px){
.mobile-image{
display: none;
}
desktop-image{
display: block;
}
}

 

 

 

<div class="mobile-image">
<img src="img src">
</div>
<div class="desktop-image">
<img src="img src">
</div>

 

On desktop all is okay - i see only one image but on my mobile i see 2 images 😕
Can you help me pls?

9,352 Views
0 Likes
Report
In response to qbiqbi

mr_mason
Tourist
5 1 1
‎01-06-2022 02:07 AM

you lost   .

 

<style>
.mobile-image{
display: block;
}
.desktop-image{
display: none;
}
@media (min-width:992px){
.mobile-image{
display: none;
}
.desktop-image{
display: block;
}
}
</style>
<div class="image-container">
<div class="mobile-image">
<img src="path-to-your-mobile-image.jpg">
</div>
<div class="desktop-image">
<img src="path-to-your-desktop-image.jpg">
</div>
</div>

4,901 Views
1 Like
Report
In response to Ninthony

zayn321
Excursionist
16 0 2
‎01-30-2020 11:19 AM

@Ninthony Please assist me. I tried using the attached code as a custom HTML on my page and what ended up happening was that only the desktop image appeared on desktop, but the both images displayed on  mobile. I have attached link to screenshots of that as well. I was wondering how I could have different images for desktop and mobile and I would also like to add an href to those images as i would like to use them as banners that will link to another site. Here are the screenshots:
https://prnt.sc/qv5n0s

https://prnt.sc/qv5ren

<style>
.mobile-image{
display: block;
}
desktop-image{
display: none;
}
@media (min-width:992px){
.mobile-image{
display: none;
}
desktop-image{
display: block;
}
}
</style>
<div class="image-container">
<div class="mobile-image">
<img src="https://cdn.shopify.com/s/files/1/2274/7581/files/kod-no-limits-build-installed_2000x.jpg?v=1578691716">
</div>
<div class="desktop-image">
<img src="https://cdn.shopify.com/s/files/1/2274/7581/files/nbc-fog-bowl-skycam-featured_1000x.jpg?v=1578692659">
</div>
</div>

 

9,243 Views
0 Likes
Report
In response to zayn321

Ninthony
Shopify Partner
2330 350 1024
‎01-30-2020 03:40 PM

@zayn321  add a period before desktop-image in the css, I missed that I guess when typing:

 

<style>
.mobile-image{
display: block;
}
.desktop-image{
display: none;
}
@media (min-width:992px){
.mobile-image{
display: none;
}
.desktop-image{
display: block;
}
}
</style>
<div class="image-container">
<div class="mobile-image">
<img src="https://cdn.shopify.com/s/files/1/2274/7581/files/kod-no-limits-build-installed_2000x.jpg?v=1578691716">
</div>
<div class="desktop-image">
<img src="https://cdn.shopify.com/s/files/1/2274/7581/files/nbc-fog-bowl-skycam-featured_1000x.jpg?v=1578692659">
</div>
</div>

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
9,231 Views
2 Likes
Report
In response to Ninthony

ManishNikam
Visitor
2 0 0
‎04-30-2020 02:11 PM
Hello, even I'm facing the same issue...on Desktop it's all fine..but when it comes to mobile version all the grids look big.
I'm not into Coding and all...please provide the solution step by step 😁
My website is www.destinationmoto.com
Using Nesos Theme downloaded from ThemeForest.
7,602 Views
0 Likes
Report
In response to Ninthony

Taryn
Visitor
3 0 0
‎10-21-2020 05:18 PM

Hey ninthony 

wondering if I can hire you to do this for me and how much it would cost? I’m using Atlantic theme 

5,643 Views
0 Likes
Report
In response to Ninthony

Lorine
New Member
10 0 0
‎11-11-2020 08:28 AM

Hey Ninthony, how would i do this with a parallax theme. I would like to do this on the image overlay section. My website is www.gymlavida.com ,  as you can see it looks fine on desktop but on mobile it looks zoomed in. it will be great if this issue can be solved.

Thank you

5,404 Views
0 Likes
Report
In response to Ninthony

ashlynn
Visitor
2 0 0
‎01-09-2021 11:24 AM

Hi, I'm looking to do this as well. However, I'm looking to add a still image on mobile and a YouTube video for desktop... how do I go about doing that?

5,078 Views
0 Likes
Report
In response to Ninthony

shaneleeevans
Tourist
9 0 1
‎01-21-2021 08:09 AM

Are you able to help me implement the same on our store please? we use impulse theme. We need it for our homepage banner/slideshow. I have attached our slideshow.liquid below. Thanks.

<div
  data-section-id="{{ section.id }}"
  data-section-type="slideshow-section"
  data-align-top="true"
  {% if section.settings.parallax %}data-parallax="true"{% endif %}>

  {% if section.blocks.size > 0 %}
    <div class="slideshow-wrapper">
      {% if section.settings.autoplay and section.settings.style == 'bars' and section.blocks.size > 1 %}
        {% style %}
          .slick-slider[data-bars][data-autoplay="true"] .slick-dots li.slick-active button::before {
            animation-duration: {{ section.settings.autoplay_speed | times: 1000 }}ms;
          }
        {% endstyle %}

        <button type="button" class="visually-hidden slideshow__pause" data-id="{{ section.id }}" aria-live="polite">
          <span class="slideshow__pause-stop">
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-pause" viewBox="0 0 10 13"><g fill="#000" fill-rule="evenodd"><path d="M0 0h3v13H0zM7 0h3v13H7z"/></g></svg>
            <span class="icon__fallback-text">{{ 'sections.slideshow.pause_slideshow' | t }}</span>
          </span>
          <span class="slideshow__pause-play">
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-play" viewBox="18.24 17.35 24.52 28.3"><path fill="#323232" d="M22.1 19.151v25.5l20.4-13.489-20.4-12.011z"/></svg>
            <span class="icon__fallback-text">{{ 'sections.slideshow.play_slideshow' | t }}</span>
          </span>
        </button>
      {% endif %}

      {%- assign natural_height = false -%}
      {% if section.settings.section_height == 'natural' %}
        {% comment %}
          Get first image's aspect ratio
        {% endcomment %}
        {% for block in section.blocks limit: 1 %}
          {% if block.settings.image != blank %}
            {%- assign natural_height = true -%}
            {%- capture natural_height_ratio -%}{{ 100 | divided_by: block.settings.image.aspect_ratio }}%{% endcapture %}
          {% endif %}
        {% endfor %}
      {% endif %}

      {% if natural_height %}
        {% style %}
          .hero-natural--{{ section.id }} {
            height: 0;
            padding-bottom: {{ natural_height_ratio }};
          }
        {% endstyle %}
      {% endif %}

      {% if natural_height %}
        <div class="hero-natural--{{ section.id }}">
      {% endif %}
        <div id="Slideshow-{{ section.id }}"
          class="hero hero--{{ section.settings.section_height }} hero--{{ section.id }} hero--mobile--{{ section.settings.mobile_height }} loading loading--delayed"
          {% if natural_height %}
            data-natural="true"
          {% endif %}
          data-autoplay="{{ section.settings.autoplay }}"
          data-speed="{{ section.settings.autoplay_speed | times: 1000 }}"
          data-aos="hero__animation"
          {% if section.settings.style == 'arrows' %}
            data-arrows="true"
          {% endif %}
          {% if section.settings.style == 'dots' %}
            data-dots="true"
          {% endif %}
          {% if section.settings.style == 'bars' %}
            data-dots="true"
            data-bars="true"
          {% endif %}
          data-slide-count="{{ section.blocks.size }}">
          {% for block in section.blocks %}
            <div
              {{ block.shopify_attributes }}
              class="slideshow__slide slideshow__slide--{{ block.id }}"
              data-id="{{ block.id }}">

              {% style %}
                .slideshow__slide--{{ block.id }} .hero__title {
                  font-size: {{ block.settings.title_size | times: 0.5 }}px;
                }
                @_media only screen and (min-width: 769px) {
                  .slideshow__slide--{{ block.id }} .hero__title {
                    font-size: {{ block.settings.title_size }}px;
                  }
                }

                {% unless block.settings.color_accent contains 'rgba(0,0,0,0)' %}
                  .slideshow__slide--{{ block.id }} .btn {
                    background: {{ block.settings.color_accent }} !important;
                    border: none;

                    {%- assign accent_brightness = block.settings.color_accent | color_extract: 'lightness' -%}

                    {% if accent_brightness > 40 %}
                      color: #000 !important;
                    {% endif %}
                  }

                  {% if settings.button_style == 'angled' %}
                    .slideshow__slide--{{ block.id }} .btn:before,
                    .slideshow__slide--{{ block.id }} .btn:after {
                      background: {{ block.settings.color_accent }} !important;
                      border: none;
                    }
                  {% endif %}
                {% endunless %}
              {% endstyle %}

              {%- assign hero_text = false -%}
              {%- assign link_slide = false -%}
              {% if block.settings.top_subheading != blank or block.settings.title != blank or block.settings.subheading != blank or block.settings.link_text != blank %}
                {%- assign hero_text = true -%}
              {% endif %}
              {% if block.settings.link != blank and block.settings.link_2 == blank %}
                {%- assign link_slide = true -%}
              {% endif %}

              {% if section.settings.parallax %}
                {% if block.settings.image != blank %}
                  {% style %}
                    .hero__image--{{ block.id }} {
                      background-position: {{ block.settings.focal_point }};
                      background-size: cover;
                    }
                  {% endstyle %}
                {% endif %}
                <div class="parallax-container">
                  <div class="hero__image-wrapper">
                    <div
                      class="parallax-image hero__image hero__image--{{ block.id }}{% unless hero_text %} hero__image--no-overlay{% endunless %}{% if block.settings.image != blank %} lazyload{% else %} hero__image--svg{% endif %}"
                      {% if block.settings.image != blank %}
                        data-bgset="{% include 'bgset', image: block.settings.image %}"
                        data-sizes="auto"
                      {% endif %}>
                      {% if block.settings.image == blank %}
                        {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
                      {% endif %}
                    </div>
                  </div>
                </div>
              {% else %}
                <div class="hero__image-wrapper{% unless hero_text %} hero__image-wrapper--no-overlay{% endunless %}">
                  {% if block.settings.image != blank %}
                    {% style %}
                      .hero__image--{{ block.id }} {
                        object-position: {{ block.settings.focal_point }};
                        font-family: "object-fit: cover; object-position: {{ block.settings.focal_point }};";
                      }
                    {% endstyle %}

                    {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

                    <img class="image-fit hero__image hero__image--{{ block.id }} lazyload"
                      src=""
                      data-src="{{ img_url }}"
                      data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                      data-sizes="auto"
                      data-parent-fit="cover"
                      alt="{{ block.settings.image.alt | escape }}">
                    <noscript>
                      <img class="image-fit hero__image hero__image--{{ block.id }}"
                        src="{{ block.settings.image | img_url: '1400x' }}"
                        alt="{{ block.settings.image.alt | escape }}">
                    </noscript>
                  {% else %}
                    {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
                  {% endif %}
                </div>
              {% endif %}

              {% if link_slide %}
                <a href="{{ block.settings.link }}" class="hero__slide-link"></a>
              {% endif %}

              {% if hero_text %}
                <div class="hero__text-wrap">
                  <div class="page-width">
                    <div class="hero__text-content {{ block.settings.text_align }}">
                      <div class="hero__text-shadow">
                        {% unless block.settings.top_subheading == blank %}
                          <div class="hero__top-subtitle">
                            <div class="animation-cropper"><div class="animation-contents">
                              {{ block.settings.top_subheading | escape }}
                            </div></div>
                          </div>
                        {% endunless %}
                        {% unless block.settings.title == blank %}
                          <h2 class="h1 hero__title">
                            <div class="animation-cropper"><div class="animation-contents">
                            {{ block.settings.title | newline_to_br }}
                            </div></div>
                          </h2>
                        {% endunless %}
                        {% if block.settings.subheading or block.settings.link or block.settings.link_2 %}
                          {% unless block.settings.subheading == blank %}
                            <div class="hero__subtitle">
                              <div class="animation-cropper"><div class="animation-contents">
                                {{ block.settings.subheading | escape }}
                              </div></div>
                            </div>
                          {% endunless %}
                          {% if block.settings.link_text != blank or block.settings.link_text_2 != blank %}
                            <div class="hero__link">
                              {% if block.settings.link_text != blank %}
                                <a href="{{ block.settings.link }}" class="btn{% if block.settings.color_accent contains 'rgba(0,0,0,0)' %} btn--inverse{% endif %}">
                                  {{ block.settings.link_text }}
                                </a>
                              {% endif %}
                              {% if block.settings.link_text_2 != blank %}
                                <a href="{{ block.settings.link_2 }}" class="btn{% if block.settings.color_accent contains 'rgba(0,0,0,0)' %} btn--inverse{% endif %}">
                                  {{ block.settings.link_text_2 }}
                                </a>
                              {% endif %}
                            </div>
                          {% endif %}
                        {% endif %}
                      </div>
                    </div>
                  </div>
                </div>
              {% endif %}
            </div>
          {% endfor %}
        </div>
      {% if natural_height %}
        </div>
      {% endif %}
    </div>
  {% endif %}

  {% if section.blocks.size == 0 %}
    <div class="placeholder-noblocks">
      {{ 'home_page.onboarding.no_content' | t }}
    </div>
  {% endif %}
</div>

{% schema %}
  {
    "name": "Slideshow",
    "class": "index-section--hero",
    "max_blocks": 5,
    "settings": [
      {
        "type": "select",
        "id": "section_height",
        "label": "Desktop height",
        "default": "650px",
        "options": [
          {
            "label": "Natural",
            "value": "natural"
          },
          {
            "label": "450px",
            "value": "450px"
          },
          {
            "label": "550px",
            "value": "550px"
          },
          {
            "label": "650px",
            "value": "650px"
          },
          {
            "label": "750px",
            "value": "750px"
          },
          {
            "label": "Full screen",
            "value": "100vh"
          }
        ]
      },
      {
        "type": "select",
        "id": "mobile_height",
        "label": "Mobile height",
        "default": "auto",
        "info": "Not used if desktop height is set to natural",
        "options": [
          {
            "label": "Auto",
            "value": "auto"
          },
          {
            "label": "250px",
            "value": "250px"
          },
          {
            "label": "300px",
            "value": "300px"
          },
          {
            "label": "400px",
            "value": "400px"
          },
          {
            "label": "500px",
            "value": "500px"
          },
          {
            "label": "Full screen",
            "value": "100vh"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "parallax",
        "label": "Enable parallax",
        "default": true
      },
      {
        "type": "select",
        "id": "style",
        "label": "Slide navigation style",
        "default": "minimal",
        "options": [
          {
            "value": "minimal",
            "label": "Minimal"
          },
          {
            "value": "arrows",
            "label": "Arrows"
          },
          {
            "value": "bars",
            "label": "Bars"
          },
          {
            "value": "dots",
            "label": "Dots"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "autoplay",
        "label": "Auto-change slides",
        "default": true
      },
      {
        "type": "range",
        "id": "autoplay_speed",
        "label": "Change images every",
        "default": 7,
        "min": 5,
        "max": 10,
        "step": 1,
        "unit": "s"
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Slide",
        "settings": [
          {
            "type": "text",
            "id": "top_subheading",
            "label": "Subheading"
          },
          {
            "type": "textarea",
            "id": "title",
            "label": "Heading",
            "default": "Two line\ntitle slide."
          },
          {
            "type": "range",
            "id": "title_size",
            "label": "Heading text size",
            "default": 80,
            "min": 40,
            "max": 100,
            "unit": "px"
          },
          {
            "type": "text",
            "id": "subheading",
            "label": "Text",
            "default": "And optional subtext"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Slide link"
          },
          {
            "type": "text",
            "id": "link_text",
            "label": "Slide link text",
            "default": "Optional button"
          },
          {
            "type": "url",
            "id": "link_2",
            "label": "Slide link 2"
          },
          {
            "type": "text",
            "id": "link_text_2",
            "label": "Slide link text 2"
          },
          {
            "type": "color",
            "id": "color_accent",
            "label": "Buttons",
            "default": "rgba(0,0,0,0)"
          },
          {
            "type": "select",
            "id": "text_align",
            "label": "Text alignment",
            "default": "vertical-center horizontal-center",
            "options": [
              {
                "value": "vertical-center horizontal-left",
                "label": "Center left"
              },
              {
                "value": "vertical-center horizontal-center",
                "label": "Center"
              },
              {
                "value": "vertical-center horizontal-right",
                "label": "Center right"
              },
              {
                "value": "vertical-bottom horizontal-left",
                "label": "Bottom left"
              },
              {
                "value": "vertical-bottom horizontal-center",
                "label": "Bottom center"
              },
              {
                "value": "vertical-bottom horizontal-right",
                "label": "Bottom right"
              }
            ]
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "select",
            "id": "focal_point",
            "label": "Image focal point",
            "info": "Used to keep the subject of your photo in view.",
            "default": "center center",
            "options": [
              {
                "value": "20% 0",
                "label": "Top left"
              },
              {
                "value": "top center",
                "label": "Top center"
              },
              {
                "value": "80% 0",
                "label": "Top right"
              },
              {
                "value": "20% 50%",
                "label": "Left"
              },
              {
                "value": "center center",
                "label": "Center"
              },
              {
                "value": "80% 50%",
                "label": "Right"
              },
              {
                "value": "20% 100%",
                "label": "Bottom left"
              },
              {
                "value": "bottom center",
                "label": "Bottom center"
              },
              {
                "value": "80% 100%",
                "label": "Bottom right"
              }
            ]
          }
        ]
      }
    ],
    "presets": [{
      "name": "Slideshow",
      "category": "Image",
      "settings": {
        "autoplay": true,
        "autoplay_speed": 5
      },
      "blocks": [
        {
          "type": "image",
          "settings": {
            "title": "Endless\npossibilities.",
            "subheading": "Bring your brand to life"
          }
        },
        {
          "type": "image",
          "settings": {
            "title": "Two line\ntitle slide.",
            "subheading": "And big, beautiful imagery"
          }
        }
      ]
    }]
  }
{% endschema %}

the same thing on our site? we use the impulse theme. 

5,026 Views
0 Likes
Report
In response to Ninthony

mhkh
Excursionist
18 0 2
‎02-28-2021 06:21 PM

@Ninthony 

Hi, I wondered if you're able to help out here?

I tried following your instructions and have run into a problem implementing the second part. I was able to implement the first part which enables me to add a secondary image, however, I could not follow from <style>. Therefore, I am not able to apply one image to the desktop version and the second to the mobile version.

 

This is the code I currently have showing in index-hero.liquid section:

<!-- /sections/index-hero.liquid -->

{%- if section.settings.image -%}
{%- assign img_object = section.settings.image -%}
{%- assign img_small = section.settings.image | img_url: '18x' -%}
{%- assign img_api = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- else -%}
{%- assign img_object = 'blank.svg' | asset_url -%}
{%- assign img_small = 'blank.svg' | asset_url -%}
{%- assign img_api = 'blank.svg' | asset_url -%}
{%- endif -%}
{%- assign transparency_class = '' -%}
{%- if section.settings.transparent or section.settings.button_image -%}
{%- assign transparency_class = 'hero__content--transparent' -%}
{%- endif -%}

<div class="index-hero wide-image {{ section.settings.text_color }} {{ section.settings.height }}"
data-section-id="{{ section.id }}"
data-section-type="hero"
id="FeaturedImage-{{ section.id }}"
{%- if section.settings.parallax -%}
data-parallax-src="{{ img_small }}"
data-parallax-alt="{{ section.settings.image.alt | default: section.settings.title }}"
data-src="{{ img_api }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
data-aspectratio="{{ section.settings.image.aspect_ratio }}"
data-sizes="auto"
{%- endif -%}>
{% if section.settings.link_text == '' and section.settings.link and section.settings.button_image == nil %}
<a href="{{ section.settings.link }}">
{% endif %}
<div class="hero__content__wrapper {{ section.settings.flex_align }} {{ transparency_class }}">
<div class="hero__content" data-aos="fade-up">
{% if section.settings.button_image %}
{%- assign img_button = section.settings.button_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<a href="{{ section.settings.link }}" class="button-image">
<img class="lazyload image--flex"
alt="{{ section.settings.button_image.alt | default: section.settings.link_text }}"
src="{{ section.settings.button_image | img_url: '180x' }}"
data-src="{{ img_button }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
data-aspectratio="{{ section.settings.button_image.aspect_ratio }}"
data-sizes="auto"/>
</a>
{% else %}
{% unless section.settings.title == '' %}
<h1 class="hero__title"
data-aos-duration="500"
data-aos="fade-up">
{{ section.settings.title | escape }}</h1>{% endunless %}
{% unless section.settings.description == '' %}
<p class="hero__description h5--body"
data-aos="fade-up"
data-aos-duration="600"
data-aos-delay="100">
{{ section.settings.description }}
</p>
{% endunless %}
{% unless section.settings.link_text == '' %}
<a class="hero__btn btn btn--large btn--secondary caps"
href="{{ section.settings.link }}"
data-aos="fade-up"
data-aos-duration="700"
data-aos-delay="200">
{{ section.settings.link_text | escape }}
</a>
{% endunless %}
{% endif %}
</div>
</div>
{% assign overlay_opacity = section.settings.overlay_opacity | times: 0.01 %}
<div class="image-overlay" style="background-color:{{ section.settings.overlay_color }} !important; opacity:{{ overlay_opacity }};"></div>

{% if section.settings.height == 'image-height' %}
<img class="lazyload responsive-wide-image" {% if section.settings.parallax %} style="opacity: 0;"{% endif %}
alt="{{ section.settings.image.alt | default: section.settings.title }}"
src="{{ img_small }}"
data-src="{{ img_api }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
data-aspectratio="{{ section.settings.image.aspect_ratio }}"
data-parent-fit="cover"
data-sizes="auto"/>
{% endif %}

{% if section.settings.parallax == false and section.settings.height != 'image-height' %}
<div class="background-size-cover lazyload" data-bgset="{% render 'bgset', image: img_object %}"></div>
{% endif %}

{% if section.settings.link_text == '' and section.settings.link and section.settings.button_image == nil %}
</a>
{% endif %}

<noscript>
<img src="{{ section.settings.image | img_url: '1440x' }}" alt="{{ section.settings.image.alt | default: section.settings.title }}" class="responsive-wide-image"/>
</noscript>
{% if section.settings.button_image %}
<noscript>
<div class="flex--centered"><a href="{{ section.settings.link }}" class="button-image"><img src="{{ section.settings.button_image | img_url: '540x' }}" alt="{{ section.settings.button_image.alt | default: section.settings.link_text }}" class="image--flex" /></a></div>
</noscript>
{% endif %}
</div>

{% schema %}
{
"name": "Image with text overlay",
"class": "section-fullscreen",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Image mobile"
},
{
"type": "checkbox",
"id": "parallax",
"default": false,
"label": "Enable parallax scroll"
},
{
"type": "select",
"id": "height",
"label": "Section height",
"default": "screen-height-two-thirds",
"options": [
{ "value": "screen-height-full", "label": "Full screen height"},
{ "value": "screen-height-three-quarters", "label": "3/4 of screen"},
{ "value": "screen-height-two-thirds", "label": "2/3 of screen"},
{ "value": "screen-height-one-half", "label": "1/2 of screen"},
{ "value": "screen-height-one-third", "label": "1/3 of screen"},
{ "value": "seven-fifty-height-hero", "label": "750px" },
{ "value": "sixty-fifty-height-hero", "label": "650px" },
{ "value": "five-fifty-height-hero ", "label": "550px" },
{ "value": "four-fifty-height-hero", "label": "450px" },
{ "value": "image-height", "label": "Image height" }
]
},
{
"type": "header",
"content": "Overlay"
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Opacity",
"info": "Increase contrast for legible text.",
"min": 0,
"max": 90,
"step": 5,
"unit": "%",
"default":15
},
{
"type": "color",
"id": "overlay_color",
"label": "Overlay color",
"default": "#fff"
},
{
"type": "header",
"content": "Text"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Image with text overlay"
},
{
"type": "textarea",
"id": "description",
"label": "Subheading",
"default": "Tell your brand's story through images."
},
{
"type": "select",
"id": "flex_align",
"label": "Block alignment",
"default": "align--middle-center",
"options": [
{ "value": "align--top-left", "label": "Top left"},
{ "value": "align--top-center", "label": "Top center"},
{ "value": "align--top-right", "label": "Top right"},
{ "value": "align--middle-left", "label": "Middle left"},
{ "value": "align--middle-center", "label": "Absolute center"},
{ "value": "align--middle-right", "label": "Middle right"},
{ "value": "align--bottom-left", "label": "Bottom left"},
{ "value": "align--bottom-center", "label": "Bottom center"},
{ "value": "align--bottom-right", "label": "Bottom right"}
]
},
{
"type": "select",
"id": "text_color",
"label": "Text color",
"default": "text-light",
"options": [
{ "value": "text-light", "label": "White"},
{ "value": "text-dark", "label": "Dark"}
]
},
{
"type": "checkbox",
"id": "transparent",
"label": "Transparent background",
"default": true
},
{
"type": "header",
"content": "Button"
},
{
"type": "text",
"id": "link_text",
"label": "Text",
"default": "View products",
"info": "Leave blank to link entire image"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "header",
"content": "Button image (optional)"
},
{
"type": "image_picker",
"id": "button_image",
"label": "Button image",
"info": "Transparent .png recommended "
}
],
"presets": [
{
"name": "Image with text overlay",
"category": "Image"
}
]
}
{% endschema %}

 

With my current theme settings, I am able to set the image to full screen, 3/4 screen, 2/3 screen, 1/2 screen, 1/3 screen. I would like to be able to apply the same options to the second image for mobile.

I understand that I will also need to amend the second part of the code from <style> to correlate with my theme and wondered if you can help?

Any help here would be greatly appreciated - thanks in advance!

5,268 Views
0 Likes
Report
In response to Ninthony

ShopOwner28
Tourist
14 0 13
‎07-11-2021 01:48 AM
Click to expand...
Hi there, how would you possibly add a shop all button on the custom desktop image?
5,041 Views
0 Likes
Report
In response to ShopOwner28

ShopOwner28
Tourist
14 0 13
‎07-31-2021 10:24 PM

Also, is there a way to make the image clickable with a hyperlink?

4,940 Views
1 Like
Report
In response to ShopOwner28

Ninthony
Shopify Partner
2330 350 1024
‎08-02-2021 11:15 AM

On page 7 I provided the code with the option to add a link in:

https://community.shopify.com/c/Shopify-Design/Different-images-for-mobile-than-desktop-web/m-p/8144...

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
4,920 Views
1 Like
Report
In response to Ninthony

Wish_Me_Luck
Tourist
7 1 3
‎08-14-2021 09:25 AM

Hi Ninthony, I have tried to implement this code in my slideshow liquid, the images for desktop and mobile both seem to appear on the screen but for some reason none of the blocks are being displayed despite having their state being set to none. please tell me where i have gone wrong

 

Wish_Me_Luck_0-1628947535629.png

 

Thank you.

4,861 Views
1 Like
Report
In response to Wish_Me_Luck

Wish_Me_Luck
Tourist
7 1 3
‎08-14-2021 02:13 PM

I mean both are showing in the browser but the code indicates when the user is on a desktop screen only one image should be showing not 2. 

4,847 Views
1 Like
Report
In response to Wish_Me_Luck

Wish_Me_Luck
Tourist
7 1 3
‎08-14-2021 06:17 PM

I acheived using different images for the slideshow in the narrative theme. code below

{%- else -%}
              {%- assign img_url2 = block.settings.image_slide_mobile | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
              {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            
              
 
              <style>
                .slideshow__image--{{ block.id }} {
                  object-position: {{ block.settings.alignment }};
                  font-family: "object-fit: cover; object-position: {{ block.settings.alignment }};";
                }
                
                .slideshow__image_desktop--{{ block.id }} {
                display: block;
                }
 
                .slideshow__image_mobile--{{ block.id }}{
                  display: none;
                }
                
                
                @media screen and (max-width:600px) {
                  
                  .slideshow__image_desktop--{{ block.id }}{
                  display:none !important;
                  }
                  .slideshow__image_mobile--{{ block.id }}{
                      display: block !important;
                  }
                }
              </style>
 
              
              <img class="slideshow__image slideshow__image_desktop--{{ block.id }} lazyload"
                  src="{{ img_url.image | img_url: '300x' }}"
                  data-src="{{ img_url }}"
                  data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
                  data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                  data-sizes="auto"
                  data-parent-fit="cover"
                  alt="{{ block.settings.image.alt | escape }}">
            
            
             <img class="slideshow__image slideshow__image_mobile--{{ block.id }} lazyload"
                  src="{{ img_url2.image | img_url: '300x' }}"
                  data-src="{{ img_url2 }}"
                  data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
                  data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                  data-sizes="auto"
                  data-parent-fit="cover"
                  alt="{{ block.settings.image.alt | escape }}">
 
hope this helps someone.
4,816 Views
0 Likes
Report
In response to Wish_Me_Luck

Wish_Me_Luck
Tourist
7 1 3
‎08-15-2021 06:01 AM

Hi I managed to solve it please see link https://community.shopify.com/c/Shopify-Design/Trying-to-Change-the-images-that-appear-on-slideshow-...

 

4,832 Views
1 Like
Report
In response to Ninthony

InesBourgeois
Excursionist
36 1 12
‎08-27-2021 02:36 PM

Hello! Sorry for hoping in the discussion but I wanted to do the same thing! 

I tried this solution and it worked perfectly for desktop: it shows the image I want for desktop. However, when I go on mobile it shows both pictures one after the other (the one I want for mobile but also the one I want for desktop). Is that related to the size of the images? If so, which one should I resize?

 

Thanks a lot!!!

Ines

4,783 Views
1 Like
Report
In response to InesBourgeois

Ninthony
Shopify Partner
2330 350 1024
‎08-27-2021 02:56 PM

No it's related to the class names and the CSS. Can  you post your store url so I can take a look?

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
4,771 Views
1 Like
Report
In response to Ninthony

InesBourgeois
Excursionist
36 1 12
‎08-27-2021 03:15 PM

Yes ! The store is lesizmoor.com and password shopifylesizmoor2021

The code has been changed a bit from the brooklyn theme

4,943 Views
1 Like
Report
In response to InesBourgeois

Ninthony
Shopify Partner
2330 350 1024
‎08-27-2021 03:39 PM

I don't see double images or anything. This published theme doesnt appear to be using the code I provided.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
4,929 Views
1 Like
Report
In response to Ninthony

InesBourgeois
Excursionist
36 1 12
‎08-27-2021 05:36 PM

Sorry, forgot to mention it's on the product page: https://lesizmoor.com/products/garment-02?variant=40562091655351

And it only appears double for mobile

4,917 Views
1 Like
Report
In response to Ninthony

Jerem1
Tourist
5 0 2
‎10-10-2021 08:15 AM

Hello @Ninthony and thanks for your code with link ! I try to add an header (H1) in your code but it's no work...

---

Thanks in advance,

Jeremy

 

5,018 Views
1 Like
Report
In response to Ninthony

Ozcorp_Web
Shopify Partner
12 0 1
‎10-19-2021 04:56 PM

Hello @Ninthony , I know this thread was a long time ago, but if you are still looking into it, I would really apprecciate the help! as you are the hero of the topic haha, I'm using Prestige theme and need the same thing posted here, to display diferent images on Desktop and mobile. The section is "Image with text overlay", is there any chance you are still helping with this?

Thanks in advance, Oscar

4,968 Views
1 Like
Report
In response to Ozcorp_Web

Sherryko
Tourist
5 0 2
‎10-27-2021 08:02 AM

Hi @Ninthony,

I used one of your solutions and added a section to the Debut theme with the code below. I was wondering if there is anyway to make the images clickable by adding url to them? Your solutions have truly helped me a ton in the past. Thank you so much!

the code:

<style>
.banner-container img{
width: 100%;
}
.hidden-mobile {
display: none;
}
.hidden-desktop {
display: block;
}
@media (min-width: 767px){
.hidden-mobile {
display: block;
}
.hidden-desktop {
display: none;
}
}
</style>
{% if section.settings.desktop_image != blank and section.settings.mobile_image != blank %}
<div class="banner-container">
<img class="hidden-mobile" src="{{ section.settings.desktop_image | img_url: "master" }}">
<img class="hidden-desktop" src="{{ section.settings.mobile_image | img_url: "master" }}">
</div>
{% endif %}

{% schema %}
{
"name": "Desktop Mobile Banner",
"class": "desktop-mobile-banner",
"tag": "section",
"settings": [
{
"type": "header",
"content": "Desktop Settings"
},
{
"type": "image_picker",
"label": "Desktop Image",
"id": "desktop_image"
},
{
"type": "header",
"content": "Mobile Settings"
},
{
"type": "image_picker",
"label": "Mobile Image",
"id": "mobile_image"
}
],
"presets": [
{
"name": "Desktop Mobile Banner",
"category":"Image",
"settings": {
}
}
]

}
{% endschema %}


{% javascript %}
{% endjavascript %}

 

4,927 Views
1 Like
Report

Community Blog Articles

Image 3 - Header image 16_9 V1@2x.png
A guide to Shopify POS Launch and Operations success

Are you ready to take your business to the next level? Look no further than the latest ...

By SarahF_Shopify Apr 15, 2024
JasonH_0-1712162359820.png
Community Connect: Recap March 24’

We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...

By JasonH Apr 8, 2024
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World logo displayed above.
Shopify Store Design: Expert Advice from Stephen’s World

Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...

By JasonH Mar 18, 2024
Terms of Service Privacy Policy