Solved

Different images for mobile than desktop web

nooreen
Tourist
7 0 3

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

 

Accepted Solution (1)
Ninthony
Shopify Partner
2329 350 1023

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

Replies 201 (201)
Ninthony
Shopify Partner
2329 350 1023

Could you maybe post your store url and show me a screenshot of what you'd like as opposed to what you currently see?

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 😄
Johnt8
Visitor
2 0 0
How do I message you personally??
Huixinong
Visitor
2 0 0

hi ninthony,

 

my store url https://www.vsoutlet.co 

I'm facing the problem of viewing in mobile and desktop. Currently using Debut mobile viewmobile viewdesktop viewdesktop view

NatachiaMilana
Visitor
2 0 0

Thank you so much! This solves my long time problem about showing two different images for desktop and mobile devices.

studioformadmin
Visitor
1 0 0

Hey @Ninthony,

I am looking to do this same thing in the boundless theme. (Create the option for uploading different images for desktop and mobile within a slideshow.) After reviewing the section code for slideshow.liquid below I cannot track the changes made to the section code to try and implement it into my theme. 

Any help would be greatly appreciated!

Thanks!

 

diego_ezfy
Shopify Partner
2934 562 883

@studioformadmin 
@Smifff_ 
@tcarroll123 

If you or anyone else still need any help on this, I have recently wrote a blog post about it.

It's a custom section as well but contains tons of other options!

Let me know if you have any questions.

Kind regards,
Diego

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

Luvita
Excursionist
55 0 9

Hi There

We tried @Ninthony solution but we're getting an "Invalid JSON in tag 'schema'" error when trying to add the first part of the code to our slideshow.liquid which reads (with the added code):

},
"settings": [

{
"type": "image_picker",
"id": "image",
"label": {

{
"type": "image_picker",
"id": "mobile_image",
"label": {


"cs": "Obrázek",
"da": "Billede",
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"nb": "Bilde",
"nl": "Afbeelding",
"pl": "Obraz",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"tr": "Görsel",
"vi": "Hình ảnh",
"zh-CN": "图片",
"zh-TW": "圖片"
}
},

We also tried the below code and got the same error:

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


"cs": "Obrázek",
"da": "Billede",
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"nb": "Bilde",
"nl": "Afbeelding",
"pl": "Obraz",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"tr": "Görsel",
"vi": "Hình ảnh",
"zh-CN": "图片",
"zh-TW": "圖片"
}
},

Please could someone assist? We're using the Debut theme.

Thanks! 

kiroki
Visitor
3 0 0

Hello everybody, I have a similar problem with Narrative theme. I was able to add second option in the customizer for the mobile images, but i am not able to make it load the image. 
Anybody got any solutions with narrative?

Luvita
Excursionist
55 0 9

Hi, would someone be able to please help as soon as possible?

Many thanks in advance.

WENSwind
Shopify Partner
7 0 3

Hey Ninthony!

 

 I don't know if you will see this considering that this is a 4 year old thread, but I wanted to ask if you can provide me with a code for the "DAWN" theme's slideshow to have an option for different mobile picture. Also if you could specify where exactly do I have to paste the text I would be very greatful. I am not a programmer so it is hard for me to find where to put the code.

Thank you!

zayn321
Excursionist
16 0 2
 

I have tried following the post as I have the turbo theme, not quite the same as that one, however I was able to find that Image-picker part and changed it within my image-text.liquid; however I have no clue where to place that second part of the code with the <style> tag. I tried placing it under my styles.scss (i dont have a theme.scss) but that didnt work when i inserted that whole code (possibly because i dont have a VelaBanner?) Anyway, now there are 2 image slots in my image with text picker, however only the image in the first box shows. Please help, I have attached my image-text liquid. Also if you could help me find a way to make this picture a link I would appreciate it. @Ninthony 

{% comment %}
** Image with text (half and half view) - homepage partial **
- Draggable section
- Uses blocks
{% endcomment %}
{% if section.settings.frontpage_grid_style == false %}
  <div class="container">
    <div class="sixteen columns">
{% endif %}

    <div class="image-with-text
                featured_collections
                clearfix across-{{section.settings.featured_links_per_row}} image-align--{{ section.settings.frontpage_image_position }}
                full-width--{{ section.settings.frontpage_grid_style }}
                ">
      {% if section.blocks.size > 0 %}
        {% for block in section.blocks %}
          <section class="featured-link--section featured-link--image section-{{ forloop.index }}" {{ block.shopify_attributes }}>
            <div class="featured-link--half featured-link--image featured-link--margin image-crop--{{ block.settings.image_crop }}">
              <div class="featured-link--wrap">
                <a {% if block.settings.link != blank %}href="{{ block.settings.link }}"{% endif %} title="{{ block.settings.title }}">
                  {% if block.settings.image %}
                    {% include 'image-element', image: block.settings.image, alt: block.settings.image.alt, stretch_width: true %}
                  {% else %}
                    {% capture i %}{% cycle "1", "2", "3", "4", "5", "6" %}{% endcapture %}
                    {{ 'collection-' | append: i | placeholder_svg_tag: 'placeholder-svg placeholder-svg--promotions' }}
                  {% endif %}
                </a>
              </div>
            </div>
            <div class="featured-link--half block--{{ block.id }}">
              <div class="info text-align--{{section.settings.frontpage_text_align}}">
                <a {% if block.settings.link != blank %}href="{{ block.settings.link }}"{% endif %} class="collection_title">
                  {{ block.settings.title }}
                </a>
                {% if block.settings.text != blank %}
                  <div class="description">{{ block.settings.text }}</div>
                {% endif %}
                {% if block.settings.button_label != blank %}
                  <a {% if block.settings.link != blank %}href="{{ block.settings.link }}"{% endif %} class="button">
                    {{ block.settings.button_label }}
                  </a>
                {% endif %}
              </div>
            </div>
          </section>
        {% endfor %}
      {% endif %}
    </div>
{% if section.settings.frontpage_grid_style == false %}
    </div>
  </div>
{% endif %}

<style>

  {% for block in section.blocks %}
    .block--{{ block.id }} {
      background-color: {{ block.settings.bg_color }};
    }

    .block--{{ block.id }} .collection_title,
    .block--{{ block.id }} p {
      color: {{ block.settings.text_color }};
    }

    .block--{{ block.id }} a.button {
      color: {{ block.settings.text_color }};
      border-color: {{ block.settings.text_color }};
    }
  {% endfor %}

  {% if section.settings.frontpage_grid_style == false and section.settings.featured_links_per_row == '1' %}
      #shopify-section-{{ section.id }} .featured-link--section {
        margin-bottom: 3%;
      }
      @media only screen and (max-width: 480px) {
        #shopify-section-{{ section.id }} .featured-link--section {
          margin-bottom: 10%;
        }
      }

      #shopify-section-{{ section.id }} .featured-link--half {
        width: 45%;
      }
      #shopify-section-{{ section.id }} .featured-link--margin {
        {% if section.settings.frontpage_image_position == 'right' %}
          margin-left: 3%;
        {% else %}
          margin-left: 0;
          margin-right: 3%;
        {% endif %}
      }
      #shopify-section-{{ section.id }} .featured-link--section:nth-child(even) .featured-link--margin {
        {% if section.settings.frontpage_image_position == 'right' %}
          margin-left: 0;
          margin-right: 3%;
        {% else %}
          margin-left: 3%;
          margin-right: 0;
        {% endif %}
      }

    {% elsif section.settings.frontpage_grid_style == false and section.settings.featured_links_per_row == '2' %}

        @media only screen and (max-width: 480px) {
          #shopify-section-{{ section.id }} .featured-link--section {
            margin-bottom: 10%;
          }
        }

        #shopify-section-{{ section.id }} .featured-link--margin {
          margin-right: 0;
          margin-left: 0;
        }

        #shopify-section-{{ section.id }} .featured-link--section:nth-child(even) .featured-link--margin {
          margin-left: 0;
          margin-right: 0;
        }

      {% endif %}
</style>

{% schema %}
{
  "name": "Image with text",
  "class": "image-with-text-section",
  "max_blocks": 16,
  "settings": [
    {
      "type": "checkbox",
      "id": "frontpage_grid_style",
      "label": "Wide display"
    },
    {
      "type": "select",
      "id": "featured_links_per_row",
      "label": "Images per row",
      "options": [
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        }
      ]
    },
    {
      "type": "select",
      "id": "frontpage_text_align",
      "label": "Text alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    },
    {
      "type": "select",
      "id": "frontpage_image_position",
      "label": "First image position",
      "info": "Subsequent images will appear staggered",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image with text",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image",
          "info": "1024 x 1024px recommended"
        },
		{
		"type": "image_picker",
		"id": "mobile_image",
		"label": "Image"
		},
        {
          "type": "select",
          "id": "image_crop",
          "label": "Image cropping",
          "default": "none",
          "info": "Only applied when text area is taller than image.",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "right",
              "label": "Right"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "none",
              "label": "None"
            }
          ]
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Your headline"
        },
        {
          "type": "textarea",
          "id": "text",
          "label": "Text",
          "default": "<p>Promotion description appears here.</p>"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button label",
          "default": "View all"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Button link"
        },
        {
          "type": "header",
          "content": "Colors"
        },
        {
          "type": "color",
          "id": "bg_color",
          "label": "Background"
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text"
        }
      ]
    }
  ],
  "presets": [{
    "name": "Image with text",
    "category": "Image",
    "settings": {
      "featured_links_per_row": "1",
      "frontpage_text_align": "left"
    },
    "blocks": [
      {
        "type": "image"
      },
      {
        "type": "image"
      }
    ]
  }]
}
{% endschema %}

 

Ninthony
Shopify Partner
2329 350 1023

The code you're going to want to edit is going to be in another file. There's an include in the code you pasted called 'image-element' which will be image-element.liquid in your snippets folder:

 

{% include 'image-element', image: block.settings.image, alt: block.settings.image.alt, stretch_width: true %}

 

That include is passing variables to the snippet -- so you'll need to pass your mobile image too and then edit the code inside of image-element to work with your mobile image. This isn't a very easy customization to make, and I also don't know what other parts of your code rely on the "image-element" snippet, so changing it may screw with other things in your website as well. Maybe not though, but walking you through all that would be extremely difficult especially considering I don't have access to this theme and anything I tell you would be a guess at best.

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 😄
zayn321
Excursionist
16 0 2

Oh okay isee, well i ended up getting that custom html to work with the .dekstop-mage, however - could you help me set it up so that those images can act as a link? I tried adding <a href="link" before the img src=link, and that made them act as links but it reverted back to 2 images on mobile

 

edit: nevermind i just had to copy the code in to my notes and then edit and then paste it back as it kept automatically editing the code as i was entering it into the custom html box. Thank you soo much. I appreciate it lots

Ninthony
Shopify Partner
2329 350 1023
No problem, glad you got it figured 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 😄
FoxStarr
Visitor
2 0 0

Hi, 

Csn someone please help me as I am trying to design my page and its taking me forever. The image sizes are not accepted from my camera so I have to keep attempting to resize them in photoshop. Then when I preview the webpage its in different places on the mobile and desktop views. I have not designed a website from CSS or javascript in four almost five years when I was in college so I do not remember much. Please can someone help me I just want to get my website up and running and for it to look professional. Thank you

rjgould
Visitor
1 0 0

I am also very new to the shopify liquid coding. I am having a problem with the Flow theme, featured product section. The featured image looks fine on mobile but not on desktop. If I size the image for desktop it doesn't display correctly on mobile and vice versa. It appears the img div for mobile is a rectangle, but for desktop it's square. How do I make the image divs the same shape for both, or use different images for mobile and desktop? I tried following the code for similar posts, but the file names are all different which makes it even more difficult. Any help would be greatly appreciated!

I cannot post a link to the site as we are working on customizing this theme to replace the theme that is currently live, but here are screen shots of both:

Mobile view

mobile-screen-shot.jpg:

Desktop view

desktop-screen-shot.jpg

Thank you in advance!

 

theteamville
Shopify Partner
1 0 0

Hey Ninthony, 

 

I'm trying to add this code to my html for gallery section on Narrative theme. I see the <style> I just don't know where to paste the code you provided. Also I did the first step for schema and it worked.!I have the option to use 2 different images just trying to get them to display on the different devices thankdesktop viewdesktop viewmobile viewmobile view

AdrienCorsetti
Visitor
3 0 0

Hi theteamville, 
Do you have find the solution ?

Xhojaa
Visitor
1 0 0

Hi there, how did you get this option of being able to change the picture for mobile and web please ?


@theteamville wrote:

Hey Ninthony, 

 

I'm trying to add this code to my html for gallery section on Narrative theme. I see the <style> I just don't know where to paste the code you provided. Also I did the first step for schema and it worked.!I have the option to use 2 different images just trying to get them to display on the different devices thankdesktop viewdesktop viewmobile viewmobile view


 

meek_mel
Visitor
1 0 0

Hey, I'm also looking for a solution to this. I'm currently using Canopy theme and I'm having trouble understanding how to duplicate the image portion in the slideshow.liquid file. 

 

Code:

<section class="border-top section slideshow-section" data-section-type="slideshow">
<div class="container">
<div class="slideshow smoothheight">
{% for block in section.blocks %}
<div class="slide" {{ block.shopify_attributes }}>

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

{% if block.settings.image == blank %}
<div class="placeholder-image placeholder--banner {% if block.settings.title != blank or block.settings.text != blank %}dark{% endif %}">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% else %}
<img src="{{ block.settings.image | img_url: 'master' }}" alt="{{ block.settings.image.alt | escape }}"
srcset="{{ block.settings.image | img_url: '320x' }} 320w,
{{ block.settings.image | img_url: '640x' }} 640w,
{{ block.settings.image | img_url: '1024x' }} 1024w,
{{ block.settings.image | img_url: '1800x' }} 1800w" sizes="100vw" />
{% endif %}

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

{% if block.settings.title != blank or block.settings.text != blank or block.settings.button_text != blank %}
<div class="slide-overlay align-{{ block.settings.position }}" style="color:{{ block.settings.text_colour }}">
<div class="inner">
{% if block.settings.title != blank %}
<div class="line-1 trans-out">
{{ block.settings.title | escape }}
</div>
{% endif %}
{% if block.settings.text != blank %}
<div class="line-2 trans-out">
{{ block.settings.text | escape }}
</div>
{% endif %}
{% if block.settings.button_text != blank %}
<div class="line-3 trans-out">
<a class="btn" href="{{ block.settings.link_url }}">{{ block.settings.button_text | escape }}</a>
</div>
{% endif %}
</div>
</div>
{% endif %}

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

NicholasD
Visitor
2 0 0

Hello Ninthony, I've been trying to crack this for the Turbo v5 Theme for the past 12 hours and it is only now that I have decided to ask for additional help, if you would be so kind to provide.

I am trying to add the Mobile Upload box for Image with Overlay. I have successfully added the code to the image-with-overlay-text.liquid
In my case is was this

{
      "type": "image_picker",
      "id": "image",
      "label": "Image",
      "info": "1800 x 1000px recommended"
    },
{
"type": "image_picker",
"id": "mobile_image",
"label": "Image",
      "info": "mobile device size recommended"
},

I then tried to find the next liquid file I should upload the code that you wrote as a follow up which was this:

<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>

I could only assume by html you meant Layout -> Theme.liquid

I tried to insert that code in a place where it wouldn't affect any other code lines. I tried a few spots, but it didn't work. Nothing was showing up in the Customise View Dashboard.

Do you have any tips for me?

Thank you so much! This is such an amazing thread you have resolved here

NicholasD
Visitor
2 0 0

For the Turbo Theme Section - Image Text Overlay, I have the following code

{% comment %}
** Image with text overlay - homepage partial **
- Draggable section
{% endcomment %}

{% include 'include-image-with-text-overlay' %}

{% schema %}

{
  "name": "Image with text overlay",
  "class": "image-with-text-overlay-section under-menu desktop-only",
  "settings": [
    {
      "type": "checkbox",
      "id": "wide_display",
      "label": "Wide display",
      "default": true
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image",
      "info": "1800 x 1000px recommended"
    },

    {
      "type": "richtext",
      "id": "pretext",
      "label": "Preheading"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Heading"
    },
    {
      "type": "richtext",
      "id": "subtitle",
      "label": "Text"
    },
    {
      "type": "checkbox",
      "id": "caption_background",
      "label": "Display solid text background",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "caption_background_transparency",
      "label": "Enable background transparency"
    },
    {
      "type": "text",
      "id": "button1",
      "label": "First button label"
    },
    {
      "type": "url",
      "id": "button1_link",
      "label": "First button link"
    },
    {
      "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": "checkbox",
      "id": "button2_highlight",
      "label": "Highlight second button"
    },
    {
      "type": "select",
      "id": "text_position",
      "label": "Text position",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    },
    {
      "type": "select",
      "id": "text_align",
      "label": "Text alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    },
    {
      "type": "header",
      "content": "Mobile"
    },
    {
      "type": "select",
      "id": "mobile_image_crop",
      "label": "Image cropping",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "mobile_text_below_image",
      "label": "Show text below image",
      "default": true
    },
    {
      "type": "color",
      "id": "mobile_text_color",
      "label": "Text"
    }
  ],
  "presets": [
    {
      "name": "Image with text overlay",
      "category": "Image",
      "settings": {
        "image": "",
        "title": "Your Headline",
        "text_position": "center",
        "text_align": "center"
      }
    }
  ]
}

{% endschema %}

 Then for the :include-image-with-text-overlay

{% if type == 'block' %}
  {% assign id = block.id %}
  {% assign wide_display = block.settings.wide_display %}
  {% assign image = block.settings.image %}
  {% assign pretext = block.settings.pretext %}
  {% assign title = block.settings.title %}
  {% assign subtitle = block.settings.subtitle %}
  {% assign caption_background = block.settings.caption_background %}
  {% assign caption_background_transparency = block.settings.caption_background_transparency %}
  {% assign text_position = block.settings.text_position %}
  {% assign text_align = block.settings.text_align %}
  {% assign mobile_text_below_image = block.settings.mobile_text_below_image %}
  {% assign mobile_image_crop = block.settings.mobile_image_crop %}
  {% assign button1 = block.settings.button1 %}
  {% assign button1_link = block.settings.button1_link %}
  {% assign button1_highlight = block.settings.button1_highlight %}
  {% assign button2 = block.settings.button2 %}
  {% assign button2_link = block.settings.button2_link %}
  {% assign button2_highlight = block.settings.button2_highlight %}
  {% assign mobile_text_color = block.settings.mobile_text_color %}
{% else %}
  {% assign id = section.id %}
  {% assign wide_display = section.settings.wide_display %}
  {% assign image = section.settings.image %}
{% assign mobile_image = section.settings.image %}
  {% assign pretext = section.settings.pretext %}
  {% assign title = section.settings.title %}
  {% assign subtitle = section.settings.subtitle %}
  {% assign caption_background = section.settings.caption_background %}
  {% assign caption_background_transparency = section.settings.caption_background_transparency %}
  {% assign text_position = section.settings.text_position %}
  {% assign text_align = section.settings.text_align %}
  {% assign mobile_text_below_image = section.settings.mobile_text_below_image %}
  {% assign mobile_image_crop = section.settings.mobile_image_crop %}
  {% assign button1 = section.settings.button1 %}
  {% assign button1_link = section.settings.button1_link %}
  {% assign button1_highlight = section.settings.button1_highlight %}
  {% assign button2 = section.settings.button2 %}
  {% assign button2_link = section.settings.button2_link %}
  {% assign button2_highlight = section.settings.button2_highlight %}
  {% assign mobile_text_color = section.settings.mobile_text_color %}
{% endif %}

{% assign mobile_crop = 'mobile-banner--crop-' | append: mobile_image_crop %}

{% comment %}Is the color set to transparent?{% endcomment %}
{% assign mobile_text_alpha = mobile_text_color | color_extract: 'alpha' %}

{% comment %}Section specific CSS{% endcomment %}
{% style %}
  @media only screen and (max-width: 480px) {
    #shopify-section-{{ id }} .pretext,
    #shopify-section-{{ id }} .headline,
    #shopify-section-{{ id }} .subtitle,
    .block__{{ id }} .pretext,
    .block__{{ id }} .headline,
    .block__{{ id }} .subtitle {
      color: {% if mobile_text_alpha != 0 %}{{ mobile_text_color}}{% endif %};
    }
  }
{% endstyle %}


{% if wide_display == false %}
<div class="container">
  <div class="sixteen columns">
{% endif %}

<section id="banner-{{id}}" class="banner full-width--{{ wide_display }}">
  {% if image != nil %}
    {% include 'image-element', image: image, alt: image.alt, stretch_width: true, additional_classes: mobile_crop %}
  {% else %}
    {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg placeholder-svg--banner' }}
  {% endif %}
  {% unless button1_link != blank and button2_link != blank %}
    {% if button1_link != blank and button1 == blank %}
      <a href="{{ button1_link }}" class="banner-full-link">
        {{ button1 }}
      </a>
    {% endif %}
    {% if button2_link != blank and button2 == blank %}
      <a href="{{ button2_link }}" class="banner-full-link">
        {{ button2 }}
      </a>
    {% endif %}
  {% endunless %}
  {% unless pretext == blank and title == blank and subtitle == blank and button1 == blank and button2 == blank %}
    <div class="position-{{ text_position }} caption js-caption mobile-text-below--{{ mobile_text_below_image }}">
      <div class="caption-content caption-background-{{ caption_background }} caption-transparency-{{ caption_background_transparency }} align-{{ text_align }}">
        {% if pretext != blank %}
          <div class="pretext">
            {{ pretext }}
          </div>
        {% endif %}
        {% if title != blank %}
          <h1 class="headline">
            {{ title }}
          </h1>
        {% endif %}
        {% if subtitle != blank %}
          <div class="subtitle">
            {{ subtitle }}
          </div>
        {% endif %}
        {% if button1 != blank %}
          <a {% if button1_link != blank %}href="{{ button1_link }}"{% endif %} class="action_button first_button highlight-{{ button1_highlight }}">
            {{ button1 }}
          </a>
        {% endif %}
        {% if button2 != blank %}
          <a {% if button2_link != blank %}href="{{ button2_link }}"{% endif %} class="action_button second_button highlight-{{ button2_highlight }}">
            {{ button2 }}
          </a>
        {% endif %}
      </div>
    </div>
  {% endunless %}
</section>

{% if wide_display == false %}
  </div>
</div>
{% endif %}

and there is another include command for "image-element"  that consists of this




{% comment %}
Required values
image: <image object>
alt: <image alt property>
______________
Optional values
progressive: <boolean>
stretch_width: <boolean>
additional_classes: <string>
inline_style: <string>
back_to_basics: <boolean>
object_fit: <boolean>
max_height: <number>
{% endcomment %}

{% comment %}Check if image is progressive (does not support transparent pngs){% endcomment %}
{% if progressive %}
  {%- capture srcset -%}
    {{ image | img_url: '5000x', format: 'pjpg' }} 5000w,
    {{ image | img_url: '4500x', format: 'pjpg' }} 4500w,
    {{ image | img_url: '4000x', format: 'pjpg' }} 4000w,
    {{ image | img_url: '3500x', format: 'pjpg' }} 3500w,
    {{ image | img_url: '3000x', format: 'pjpg' }} 3000w,
    {{ image | img_url: '2500x', format: 'pjpg' }} 2500w,
    {{ image | img_url: '2000x', format: 'pjpg' }} 2000w,
    {{ image | img_url: '1800x', format: 'pjpg' }} 1800w,
    {{ image | img_url: '1600x', format: 'pjpg' }} 1600w,
    {{ image | img_url: '1400x', format: 'pjpg' }} 1400w,
    {{ image | img_url: '1200x', format: 'pjpg' }} 1200w,
    {{ image | img_url: '1000x', format: 'pjpg' }} 1000w,
    {{ image | img_url: '800x', format: 'pjpg' }} 800w,
    {{ image | img_url: '600x', format: 'pjpg' }} 600w,
    {{ image | img_url: '400x', format: 'pjpg' }} 400w,
    {{ image | img_url: '200x', format: 'pjpg' }} 200w
  {%- endcapture -%}
{% else %}
  {%- capture srcset -%}
    {{ image | img_url: '5000x' }} 5000w,
    {{ image | img_url: '4500x' }} 4500w,
    {{ image | img_url: '4000x' }} 4000w,
    {{ image | img_url: '3500x' }} 3500w,
    {{ image | img_url: '3000x' }} 3000w,
    {{ image | img_url: '2500x' }} 2500w,
    {{ image | img_url: '2000x' }} 2000w,
    {{ image | img_url: '1800x' }} 1800w,
    {{ image | img_url: '1600x' }} 1600w,
    {{ image | img_url: '1400x' }} 1400w,
    {{ image | img_url: '1200x' }} 1200w,
    {{ image | img_url: '1000x' }} 1000w,
    {{ image | img_url: '800x' }} 800w,
    {{ image | img_url: '600x' }} 600w,
    {{ image | img_url: '400x' }} 400w,
    {{ image | img_url: '200x' }} 200w
  {%- endcapture -%}
{% endif %}

{% comment %}Loading style{% endcomment %}
{% if settings.image_loading_style == 'blur-up' %}
  {% comment %}Low quality image loads first{% endcomment %}
  {% assign low_quality_image = image | img_url: '50x' %}
{% elsif settings.image_loading_style == 'color' %}
  {% comment %}Dominant image color loads first{% endcomment %}
  {% assign dominant_color_image = image | img_url: '1x' %}
  {% if object_fit == true %}
    {% capture crop_to_aspect_ratio %}
        max-height: {{ max_height }}px; width: calc({{ image.width }} /  {{ image.height }} * {{ max_height }}px);
    {% endcapture %}
  {% endif %}

  {% capture background_color %}
    background: url({{ dominant_color_image }});
  {% endcapture %}
{% endif %}


{% if back_to_basics %}
  <div class="image-element__wrap" style="{{ background_color }}{{ crop_to_aspect_ratio }};">
      <img  alt="{{ alt | escape }}" src="{{ image | img_url: '2000x' }}"
            {% if inline_style %}
              style="{{ inline_style }}"
            {% endif %}
            {% if additional_classes %}
              class="{{ additional_classes }}"
            {% endif %}
      />
  </div>
{% else %}
{% comment %}Build image element{% endcomment %}
<div class="image-element__wrap" style="{{ background_color }}{{ crop_to_aspect_ratio }} {% unless stretch_width == true or object_fit %}max-width: {{ image.width }}px;{% endunless %}">
  <img  alt="{{ alt | escape }}"
        {% if low_quality_image %}
          src="{{ low_quality_image }}"
        {% endif %}
        data-src="{{ image | img_url: '1600x' }}"
        data-sizes="auto"
        data-aspectratio="{{ image.width }}/{{ image.height }}"
        data-srcset="{{ srcset }}"
        height="{{ image.height }}"
        width="{{ image.width }}"
        style="{{ inline_style }};"
        class="lazyload transition--{{ settings.image_loading_style }} {{ additional_classes }}"
  />
</div>
{% endif %}

{% comment %}Fallback for no javascript{% endcomment %}
<noscript>
  <img src="{{ image | img_url: '2000x' }}" alt="{{ alt | escape }}" class="{{ additional_classes }}">
</noscript>

It seems to me that the code for this section is more complicated than your previous answer. Is it still possible for me to achieve the same result?

angelz
Visitor
1 0 0

Hi @Ninthony ,

I am a new Shopify user and I have been scrolling thorough this topic and still none of this makes since. I have been playing around with my website for some time now and i added a 3 pictures together under one photo in the slideshow( if that makes since). My problem is that i want to make the mobile view just the middle picture. I tried to play around with the coding, I looked at the videos you recommended, and i am still very confused. I am using the Boundless theme and I need help with putting the information in the codes. 

Thank you in advance.  

nickdaelemans
Visitor
3 0 0

@angelz Have you read my post on Medium? You should be able to get a separate image upload for mobile images. I didn't test this with multiple slides, however, I would recommend to only use one slide after all..

jennycleanwater
Tourist
3 0 1

Hi Ninthony,

I'm using Debut theme and need the exact adjustment for the slideshow. Is there any way you could help me? The website is keep-ya-hands-clean.com.

Thank you so much
Jenny

Matt_W89
Excursionist
25 0 4

Hey there,

This is great it seems like it's exactly what I'm looking to do for my site! 🙂

I'm not using a custom theme, however. I'm using the Debut theme.

Also, there is no option to add a banner to the homepage for the Debut theme, so I'm currently using a single Gallery image. My issue is that the image I load onto the site changes when I view it on a computer vs when I view it on a phone (the edges get cut off in one or the other). Ideally instead of having a single image that loads consistently on both browsers, I'd like separate images to load if possible.

As a complete novice, please could you help me with the code I need in order to load separate web / mobile images in the Gallery? Or any alternative means of doing this even it's not via loading a gallery image would be much appreciated!

I also have no idea where exactly to input the code, I'm a real beginner to Shopify editing.

I hope this request makes sense 🙂

Thanks in advance,

Matt

thekimbrothers
Visitor
1 0 0

Hi,

so I am trying to follow along with "minimal" themed website but cannot seem to get it to work. Could you help me find where I should paste your code into my minimal themed shopify code?

Ninthony
Shopify Partner
2329 350 1023

Since I am constantly  contacted about this thread and I just posted a very minimal solution on another thread I thought I'd share it here. Here is a very basic static section that will allow you to add a desktop image and a mobile image to your home page. It's merely 2 image pickers and it will display your pictures in their intrinsic dimensions, not optimized for different resolutions or screen widths. Use this as a starting point for developing your own dynamic section, or use it for what it is, a simple way to display a desktop image and a mobile image on your home page. Post:

The pictures will be displayed in their actual dimensions, not be served according to screen resolution or width. I'd suggest 1920x1080 for desktop and 767x1290 for mobile. You will have to set an image for both desktop and mobile for the section to appear on your homepage. Go into Online Store > Themes > Actions > Edit Code on the theme that you want to edit. Create a new section called "desktop-mobile-banner". Copy and paste this code and save it:

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

Then go into your customize editor and click "Add Section" and scroll to the "Image" category, you should see a section named Desktop Mobile Banner -- click it and then upload both your desktop and mobile banner images. Then you can drag it wherever you want it to appear on your homepage. This will meet your basic needs. You can further customize the schema to give yourself more options, here's some documentation on how to configure the schema and the types of settings you can use in the schema settings:

https://shopify.dev/tutorials/develop-theme-use-sections

https://shopify.dev/docs/themes/sections/content-schema

 

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 😄
KrazyGear
Tourist
9 0 6

Hi! worked a charm! thankyou so much!!!!! Now how would I make these images clickable :))

Ninthony
Shopify Partner
2329 350 1023

Here you go. This is updated with a text field that you can add a link into. Include the entire url if linking externally, (https://www.google.com -- not www.google.com ) If you use only www. it will take you to

https://www.your-shopify-store/www.google.com

Otherwise if linking to a collection in your store or product you can feel free to use "/collections/your-collection" or "/products/your-product".

<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 %}
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 😄
KrazyGear
Tourist
9 0 6

Hi, thanks so much Ninthony. Is there anyway i can adjust the padding on the banner itself?Padding remove.PNG

KrazyGear
Tourist
9 0 6

note: I added this:

.shopify-section {
padding-top: 10px;

But it will only decrease padding to a certain extent.

KrazyGear
Tourist
9 0 6

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

this did the trick!

artem96
Visitor
2 0 1

@KrazyGear @Ninthony Thank you!

Lorine
New Member
10 0 0

Cant find this on my template section or was this added to the desktop mobile section?

tcarroll123
New Member
9 0 0

Hi, 

 

did you manage to figure how to adjust the padding for mobile and destkop separately. when the paddign is perfect on desktop view it always seems to be out on mobile. 

 

any help appreciated 

 

thanks 

 

 

NatachiaMilana
Visitor
2 0 0
yes, It works great. I experienced the same problem before until I copied
Ninthony solution posted on 11/25/2019 12:13PM please check it here:
https://community.shopify.com/c/Shopify-Design/Different-images-for-mobile-than-desktop-web/td-p/522...

Hope that works for you too.
AlixTB
Shopify Partner
8 0 9

Hi There

This is super useful! Where did you paste this code to remove the padding? Just at the end of the code listed above?

Thanks

Alix

mhkh
Excursionist
18 0 2

Hi Alix,

This code is pasted in the 'section'. In my case, the section is called 'index-hero.liquid'.

Not sure if this answers your question?

K

 

 

imado
Tourist
3 0 1

Just a quick question, Where did you put this code?

mhkh
Excursionist
18 0 2

Hi @imado,

I added the code I shared in the hero section.

In my case the section is called "index-hero.liquid"

 

I hope this helps!

rhino-direct
Tourist
7 0 2

Anyone could help me?  I do not know how to change to the mobile version with my code. 

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




<div class="index-section" data-section-id="{{ section.id }}">

  {% if section.settings.full_width %}<div class="gridlock-fluid"><div class="row">{% endif %}
  <div class="homepage-section gallery row no-fouc">
    {% for block in section.blocks %}
    {% case block.settings.image_width %}
    {% when '25%' %}
    {%- assign image_size = '500x' -%}
    {%- assign image_width = 'desktop-3 tablet-fourth' -%}
    {% when '33%' %}
    {%- assign image_size = '500x' -%}
    {%- assign image_width = 'desktop-4 tablet-2' -%}
    {% when '50%' %}
    {%- assign image_size = '800x' -%}
    {%- assign image_width = 'desktop-6 tablet-3' -%}
    {% when '66%' %}
    {%- assign image_size = '1200x' -%}
    {%- assign image_width = 'desktop-8 tablet-two-thirds' -%}
    {% when '75%' %}
    {%- assign image_size = '1200x' -%}
    {%- assign image_width = 'desktop-9 tablet-three-quarter' -%}
    {% when '100%' %}
    {%- assign image_size = '1920x' -%}
    {%- assign image_width = 'desktop-12 tablet-6' -%}
    {% endcase %}

    {%- assign img_url = block.settings.image | img_url: image_size -%}
    <div class="homepage-promo {% if section.settings.full_width and block.settings[image_size] == '100%' %} centered{% endif %} {{ image_width }} mobile-3 promo-{{ 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 %}
        <div class="caption">
          {% if block.settings.heading_text != blank %}
          <h3>{{ block.settings.heading_text | escape }}</h3>
          {% endif %}
          {% if block.settings.hidden_text != blank %}
          <p>{{ block.settings.hidden_text | escape }}</p>
          {% endif %}
        </div>
      {% if block.settings.link != blank %}</a>{% endif %}
    </div>

    <style>
      .homepage-promo.promo-{{ block.id }} .caption h3 {
        color: {{ block.settings.promo_color }};
        font-size: {{ section.settings.promo_size }}px;
      }
      .homepage-promo.promo-{{ block.id }} .caption p {
        color: {{ block.settings.hidden_color }};
        font-size: {{ section.settings.hidden_size }}px;
      }
      #shopify-section-{{ section.id }} .homepage-promo .promo-inner h3 {
        font-size: {{ section.settings.promo_size }}px;
      }

      #shopify-section-{{ section.id }} .homepage-promo .promo-inner p {
        font-size: {{ section.settings.hidden_size }}px;
      }
    </style>

    <style>
      .promo-{{ block.id }} .promo-inner { float: none; }
    </style>

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

  {% if section.blocks.size == 0 %}
    {% include 'no-blocks' %}
  {% endif %}

</div>


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

{% schema %}
{
    "name": "Gallery",
	   "max_blocks": 6,
    "settings": [
      {
        "type": "checkbox",
        "id": "full_width",
        "label": "Enable full width",
        "default": false
	  },
    {
      "type": "range",
      "id": "promo_size",
      "min": 0,
      "max": 36,
      "step": 1,
      "unit": "px",
      "label": "Heading size",
      "default": 20
    },
    {
      "type": "range",
      "id": "hidden_size",
      "min": 0,
      "max": 36,
      "step": 1,
      "unit": "px",
      "label": "Subheading size",
      "default": 13
    }
  ],
	"blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "image_picker",
          "id": "mobile-image",
          "label": "Image"
        },
        {
          "type": "select",
          "id": "image_width",
          "label": "Container width",
          "default": "33%",
          "options": [
		        {
               "value":"25%",
               "label":"25%"
            },
            {
               "value":"33%",
               "label":"33%"
            },
            {
               "value":"50%",
               "label":"50%"
            },
            {
               "value":"66%",
               "label":"66%"
            },
            {
               "value":"75%",
               "label":"75%"
            },
            {
               "value":"100%",
               "label":"100%"
            }
          ]
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link",
          "info": "Optional"
        },
       {
        "type": "text",
        "id": "heading_text",
        "label": "Heading",
        "default": "Our collections"
       },
       {
        "type": "text",
        "id": "hidden_text",
        "label": "Subheading",
        "default": "Shop now",
        "info": "Shown on hover"
       },
      {
        "type": "color",
        "id": "promo_color",
        "label": "Heading color",
        "default": "#ffffff"
      },
      {
        "type": "color",
        "id": "hidden_color",
        "label": "Subheading color",
        "default": "#ffffff"
      }
      ]
    }
  ],
  "presets": [
    {
      "name": "Gallery",
      "category": "Image",
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        }
      ]
    }
  ]
  }
{% endschema %}

 

 

imado
Tourist
3 0 1

@KrazyGear just a quick question, where exactly did you put this code? 

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

vapeshed
Tourist
4 0 2

Hi @KrazyGear, where did you add this piece of code?

PaulNewton
Shopify Partner
6274 573 1318

@vapeshed wrote:

Hi @KrazyGear, where did you add this piece of code?


This will vary wildly by theme and sometimes even version of the same theme.

Merchants needing to buy this customization can contact me at paull.newton+shopifyforums@gmail.com with store url and theme name.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


stinem123
Pathfinder
138 0 22

Hello, can I please ask where you added this part? 

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

 

JorgePereiraGap
Tourist
11 0 3

Hello everyone,

I'm new to Shopify and I've "created" my own store. With that said, there is a part that looks bad on mobile, because it's an image with a few key points, which is just far too small for mobile.

 

What I'd like to have is the exact image I have now on desktop, and another one (I still have to make it) to show up on mobile. My website is www.solgap.pt but I'll also add a picture to show what I'm on about (it's the bit with the stars)

It's the long picture with the stars that I'm referring toIt's the long picture with the stars that I'm referring to

 

Thank you in advance.

Lorine
New Member
10 0 0

Did you manage to get rid of the padding?

Brittany_Witt
Explorer
52 0 17

@Ninthony ,

Thank you so much for this piece of code! I followed it to a T and it worked beautifully! That never happens when I try to implement a change that involves code.

I tried the code you gave first then ran into the issue of not being able to add a link to my images. So I tried going into my slider.liquid to see if I could copy/paste the snippet of code that adds the linkability to that section and try to add it to your piece of code, but I was in way over my head. Then I kept reading this thread and seen you added an updated version with the ability to add links to the images and it worked like a charm!

I use the Minimal theme, and with 74% of my visitors visiting my site on a mobile device this is an invaluable code to have on every website. I hope Shopify is working on something to add to their themes permanently that allows shop owners to easily edit their mobile version differently than their desktop version, at least for the homepage.

Just wanted to say thanks! You're appreciated!

Brittany Witt
EnableX
New Member
5 0 0

Wow, this was the most helpful thing I've seen in a while! I was stumped for days!!! thank you