Different images for mobile than desktop web

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

0 Likes
Highlighted
New Member
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?

0 Likes
Highlighted
Shopify Partner
1445 195 521

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 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
7 Likes
Highlighted
New Member
5 0 0

Hi Nithony, I'm trying to follow your instructions as well and I got as far as adding the code to the schema in my theme's slideshow.liquid section and it allows me to upload a mobile image for each slide.

However, when I get to the HTML part, I'm a bit confused on where this goes. I inserted the Style code where the <Style>...</Style> section is in the theme.liquid code, but unsure of where to put the rest (<div class="velaBanner"....)

Below is the theme.liquid code for my Retina theme (from Out of the Sandbox) with the style code inserted

Thanks for the help!!

 

<!DOCTYPE html>
<html lang="{{ shop.locale }}">
  <head>
	  
    <meta name="p:domain_verify" content="3e626da3f585c470f9d76a74508aad0d"/> 
    <meta charset="utf-8">
    <meta http-equiv="cleartype" content="on">
    <meta name="robots" content="index,follow">
    
 

    {% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %}{% endif %}
    <title>{% if template contains "index" %}{{ page_title }}{% else %}{{ page_title }}{% if current_tags %} {{ 'general.meta.tagged_html' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} {{ 'general.meta.page' | t: page_number: current_page }}{% endif %}{% unless page_title contains shop.name %} - {{ shop.name }}{% endunless %}{% endif %}</title>

    {% if page_description %}
    <meta name="description" content="{{ page_description | escape }}{% if current_tags %} {{ 'general.meta.tagged_html' | t: tags: meta_tags | escape }}.{% endif %}{% if current_page != 1 %} {{ 'general.meta.page' | t: page_number: current_page }}.{% endif %}" />
    {% endif %}

    {% include 'social-meta-info' %}

    {% if collection.previous_product %}
    <link rel="prev" href="{{ collection.previous_product }}">
    {% endif %}
    {% if collection.next_product %}
    <link rel="next" href="{{ collection.next_product }}">
    {% endif %}

    <!-- Mobile Specific Metas -->
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="theme-color" content="{{ settings.shop_bg_color }}">

    <!-- Stylesheets for Retina 4.7.0 -->
    {{ 'styles.scss.css' | asset_url | stylesheet_tag }}
    <!--[if lte IE 9]>
{{ 'ie.css' | asset_url | stylesheet_tag }}
<![endif]-->

    {% if settings.favicon != nil %}
    <link rel="shortcut icon" type="image/x-icon" href="{{ settings.favicon | img_url: '180x180' }}">
    <link rel="apple-touch-icon" href="{{ settings.favicon | img_url: '180x180' }}"/>
    <link rel="apple-touch-icon" sizes="72x72" href="{{ settings.favicon | img_url: '72x72' }}"/>
    <link rel="apple-touch-icon" sizes="114x114" href="{{ settings.favicon | img_url: '114x114' }}"/>
    <link rel="apple-touch-icon" sizes="180x180" href="{{ settings.favicon | img_url: '180x180' }}"/>
    <link rel="apple-touch-icon" sizes="228x228" href="{{ settings.favicon | img_url: '228x228' }}"/>
    {% else %}
    <link rel="shortcut icon" type="image/x-icon" href="{{ 'favicon.png' | asset_url }}">
    {% endif %}
    

    <link rel="canonical" href="{{ canonical_url }}" />

    <script>
      {% include 'js-variables' %}
    </script>

    {% if template contains 'customer' %}
    {{ "shopify_common.js" | shopify_asset_url | script_tag }}
    {{ "customer_area.js"  | shopify_asset_url | script_tag }}
    {% endif %}

    {{ 'app.js' | asset_url | script_tag }}
    {{ content_for_header }}
    {%- include 'bold-common' -%}
    {%- include 'bold-product' with product, hide_action: 'header' -%}
    {%- include 'bold-ro-init' -%}
    {{ 'bold-ro.css' | asset_url | stylesheet_tag }}

    <noscript>
      <style>
        
        .hidden_desktop{
          display:block;
        }
        .hidden_mobile {
          display: none;
        }
        @media (min-width:992px){
          .hidden_desktop{
            display:none;
          }
          .hidden_mobile {
            display: block;
          }
        }
        
        
        img.lazyload[data-sizes="auto"] {
          display: none !important;
        }
        .image__fallback {
          width: 100vw;
          display: block !important;
          max-width: 100vw !important;
          margin-bottom: 0;
        }
        .no-js-only {
          display: inherit !important;
        }
        .icon-cart.cart-button {
          display: none;
        }
        .lazyload {
          opacity: 1;
          -webkit-filter: blur(0);
          filter: blur(0);
        }
        .animate_right,
        .animate_left,
        .animate_up,
        .animate_down {
          opacity: 1;
        }
        .product_section .product_form {
          opacity: 1;
        }
        .multi_select,
        form .select {
          display: block !important;
        }
        .swatch_options {
          display: none;
        }
        .primary_logo {
          display: block;
        }
      </style>
    </noscript>

    {% render 'pagefly-header' %}
   
{% render 'pagefly-header' %}
 {% include 'kart_discount' %}
  {% include 'bold-checkout-fix' %}
  <script src='{{ 'better-search.js' | asset_url }}' defer='defer'></script></head>  
  {% if template contains "index" or template contains "article" or template contains "banner" or template contains "page.details" or template contains "blog" or template contains "faq" or template contains "contact" %}
  {% assign feature_image = true %}
  {% else %}
  {% assign feature_image = false %}
  {% endif %}
  <body class="{{ template | replace: '.', '-' | handle }} {% if feature_image %}feature_image{% endif %}"
        data-money-format="{{ shop.money_format }}" data-active-currency="{{ shop.currency }}">    
    
    
    <div id="content_wrapper">

      {% section 'header' %}

      {{ content_for_layout }}

      {% include 'cart-shipping-calculator' %}
      {% section 'footer' %}

      <div id="search">
        <div class="container">
          <div class="ten columns offset-by-three center">
            <div class="right search-close">
              <span class="icon-close"></span>
            </div>
            <form action="/search">
              {% if settings.search_option != 'everything' %}
              <input type="hidden" name="type" value="product" />
              {% endif %}
              <span class="icon-search search-submit"></span>
              <input type="text" name="q" placeholder="{{ 'general.search.placeholder_with_shop_name' | t: shop_name: shop.name }}" value="{% if search and search.results.first.price %}{{ search.terms }}{% endif %}" autocapitalize="off" autocomplete="off" autocorrect="off" />
            </form>
          </div>
        </div>
      </div>
    </div>
    {% if settings.size_chart != blank %}
    <div id="size-chart" class="size_chart_content">
      <h5 class="center">{{ pages[settings.size_chart].title }}</h5>
      {{ pages[settings.size_chart].content }}
    </div>
    {% endif %}

    {% include 'newsletter-popup' %}

    {% if settings.show_multiple_currencies %}
    {% include 'currencies' %}
    {% endif %}

    {% if settings.disqus_enabled %}
    {% if template contains "blog" or template contains "article" or template contains "index" %}
    <script id="dsq-count-scr" src="//{{ settings.disqus_shortname }}.disqus.com/count.js" async></script>
    {% endif %}
    {% endif %}
  </body>
</html>

 

0 Likes
Highlighted
Shopify Partner
1445 195 521

The html would go in the related section, not in theme.liquid -- Also, I'd keep the style tags with the section as well. If you look above your initial post, I posted a very simple code that should allow you to put both a mobile and desktop image. If you want more functionality though you'll have to add it in yourself with the resources I provided underneath.

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
Tourist
9 0 3

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

1 Like
Shopify Partner
1445 195 521

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 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
3 Likes
Highlighted
Tourist
9 0 3

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

0 Likes
Highlighted
Tourist
9 0 3

note: I added this:

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

But it will only decrease padding to a certain extent.

0 Likes
Highlighted
Tourist
9 0 3

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

this did the trick!

1 Like