Different images for mobile than desktop web

Solved
Shopify Partner
1445 195 525

Are you referring to the non optimized code that @Brittany_Witt is using? I can probably make up a slideshow version.

If my solution helped you, please like and accept as 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 :D
0 Likes
Highlighted
New Member
5 0 0

@Ninthony I'm not sure, you posted some code that allowed for a "desktop-mobile-banner" on the homepage. that also allowed people to click it and it leads to a collection. This is the code I'm referring to:

<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">
<a href="{{ section.settings.banner_link }}">
<img class="hidden-mobile" src="{{ section.settings.desktop_image | img_url: "master" }}">
<img class="hidden-desktop" src="{{ section.settings.mobile_image | img_url: "master" }}">
</a>
</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"
},
{
"type": "text",
"label": "Banner Link",
"id": "banner_link"
}
],
"presets": [
{
"name": "Desktop Mobile Banner",
"category":"Image",
"settings": {
}
}
]

}
{% endschema %}


{% javascript %}
{% endjavascript %}

0 Likes
Highlighted
New Member
2 0 0

Hi  

this code worked very good for me, but can you modify it in a way where it is turned into a slider with 3 addable pictures and with the option to add a "Shop Now" button?

Thanks a lot bro

0 Likes
Highlighted
Shopify Partner
1445 195 525

It would not, my section is just a single image, not a slideshow. That may be something I look into doing in the future.

If my solution helped you, please like and accept as 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 :D
0 Likes
Highlighted
New Member
5 0 0

Hey @Ninthony 

 

I feel like I could speak for a few of us on this thread and potentials in the future. Would you please be able to create an updated (almost like a final form) slideshow that has the ability to

1) Have a sliding slideshow that is mobile responsive
2) Ability to have multiple images present
3) Contains a Button

This would be the most kickass section that I'd add to all my Shopify stores! Thanks in advanced


0 Likes
Highlighted
New Member
1 0 0

Hi, I'm trying to follow these same steps to add this functionality to our store.  We're using the debut theme.  I was able to locate the "{% schema %}" section to edit, but i'm not seeing where the rest of that goes in the "html" section.  Do I wedge that into "theme.liquid" under layout?

0 Likes
Highlighted
Tourist
9 0 1

@Ninthony 

When you say "go into the html," does that mean that we enter into the theme.liquid file? I am using the Brooklyn theme and have managed to get the image pickers working, but haven't figured out where to put the code to make each separate image show up.

0 Likes
Highlighted
Shopify Partner
1445 195 525

The html that is output from dynamic sections (the sections you can drag around in the customize editor) are all output through the section itself above the schema. Take this blank dynamic section for example, feel free to use this as a little starter template to play with dynamic sections:

{% if section.settings.my_text != blank %}
  <h1>{{ section.settings.my_text}}</h1>
{% endif %}

{% schema %}
{
"name": "Dynamic Section",
"class": "dynamic-section",
"tag": "section",
"settings": [
{
"type": "text",
"id": "my_text",
"label": "Insert text here"
}

],
"presets": [
{
"name": "Dynamic Section",
"category":"Custom",
"settings": {
}
}
]

}
{% endschema %}


{% javascript %}
{% endjavascript %}

 

If you go into your files and add a new section, called whatever you want -- paste this code and save -- then head over to your customize editor, when you press Add Section you'll see a section under the category of "Custom" called "Dynamic Section. When you add it, you'll notice nothing happens. Thats because of the statement at the top:


{% if section.settings.my_text != blank %}
  <h1>{{ section.settings.my_text}}</h1>
{% endif %}

 

That's saying, if your setting with the id of "my_text" is not empty, then output it. You'll notice that you can add some text in a text field in the customize editor with the label "Insert text here" -- if you type something in there, it'll end up outputting that <h1> tag with your text. 

Your section with the image picker likely has many more settings and information above the schema. But this is the general idea. That's where you'll be looking to edit.

If my solution helped you, please like and accept as 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 :D
Highlighted
Tourist
9 0 1

@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 -%}

 

 

Highlighted
Tourist
9 0 1

@Alric Did you ever find out how to get the two images to show up differently on mobile and desktop? I know this post is pretty old but since I am using the Brooklyn theme as well I thought I'd ask.

0 Likes