<!-- wp:image {"align":"center","id":132,"width":768,"height":402,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://www.mojoin.com/wp-content/uploads/2020/12/show-diff-pcmobile-banner-images-1024x536.jpg" alt="different banner image for PC &amp; Mobile" class="wp-image-132" width="768" height="402"/><figcaption>different banner image for PC &amp; Mobile</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>In Shopify default <strong>Debut</strong> theme, there are sections called "image with text" and "image with text overlay". You can use them to put an image with text on your home page, but you can't set different images for Desktop or Mobile, so the reality is it is very difficult to make one image size to support both Desktop and Mobile and make them both looks perfect on two devices.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In order to solve the above problem, we need to customize the default theme, here we will use the Shopify Debut theme to show you how to implement this functionality, I will guide you through the whole process following the below steps:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><strong><a href="#define-our-section">define your sections in the Shopify Debut theme</a></strong></li><li><strong><a href="#add-image-to-section" title="#add-image-to-section">add image set in the section</a></strong></li><li><strong><a href="#add-css-style">put our CSS code into the theme</a></strong></li><li><strong><a href="#debug-and-test" title="#debug-and-test">debug and test</a></strong></li><li><strong><a href="#make-it-live" title="#make-it-live">publish the theme</a></strong></li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2 id="define-our-section">Define your own sections </h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>login to your store backend,select your theme to edit code</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":137,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.mojoin.com/wp-content/uploads/2020/12/edit-them-code.png" alt="edit theme code" class="wp-image-137"/><figcaption>edit theme code</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Add new section called "yx-desktop-banner",then your can see a liquid file called yx-desktop-banner.liquid will be added in your sections directory.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":139,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.mojoin.com/wp-content/uploads/2020/12/add-new-section-2-theme.png" alt="add new section" class="wp-image-139"/><figcaption>add new section</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Repeat above step to create the other section named as "yx-mobile-banner".</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="add-image-to-section">Add Image Picker to the section</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Click the above created yx-desktop-banner.liquid file to edit it. Delete all the default codes in the file, replace them with the below lines:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;div class="page-width yx-desktop-banner-container yx-mobile-hidden">
 &lt;div class="container-full">
   {% for block in section.blocks limit: 1 %}
	&lt;img class="img-responsive lazyload"  data-src="{{ block.settings.yx_image_picker | img_url: '2000x' }}" />
   {% endfor %}
&lt;/div>
&lt;/div>
{% schema %}
  {
    "name": "YX Desktop Banner",
    "class": "yx-desktop-banner-section",
    "max_blocks": 1,
    "blocks": [
    {
      "type": "image_picker",
      "name": "Desktop Banner Image",
      "settings": [
        {
          "label": "Desktop Banner Image",
          "id": "yx_image_picker",
          "type": "image_picker"
        }
      ]
    }
  ],
 "presets": [
    {
      "name": "YX Desktop Banner",
      "category": "Home",
"blocks":[{"type" : "image_picker"}]
    }
]
  }
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>You can get the above file directly from <a href="https://github.com/michaelyue/shopifytailor/blob/main/yx-desktop-banner.liquid">GitHub</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Save it.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Replaced yx-mobile-banner.liquid file content with the following lines:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;div class="page-width yx-mobile-banner-container yx-desktop-hidden">
 &lt;div class="container-full">
   {% for block in section.blocks limit: 1 %}
	&lt;img class="img-responsive lazyload"  data-src="{{ block.settings.yx_image_picker | img_url: '750x' }}" />
   {% endfor %}
&lt;/div>
&lt;/div>
{% schema %}
  {
    "name": "YX Mobile Banner",
    "class": "yx-mobile-banner-section",
    "max_blocks": 1,
    "blocks": [
    {
      "type": "image_picker",
      "name": "Mobile Banner Image",
      "settings": [
        {
          "label": "Mobile Banner Image",
          "id": "yx_image_picker",
          "type": "image_picker"
        }
      ]
    }
  ],
 "presets": [
    {
      "name": "YX Mobile Banner",
      "category": "Home",
      "blocks":[{"type" : "image_picker"}]
    }
 ]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>You can get the above file directly from <a href="https://github.com/michaelyue/shopifytailor/blob/main/yx-mobile-banner.liquid">GitHub</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Don't forget to save it as well.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now when you customize your theme, click <strong>[Add section]</strong> you will see two new sections: ''<strong>YX Desktop Banner</strong>" and "<strong>YX Mobile Banner</strong>".</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":144,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.mojoin.com/wp-content/uploads/2020/12/add-new-section-2-theme-1.png" alt="new section shown up" class="wp-image-144"/><figcaption>new section shown up</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 id="add-css-style">Add CSS codes to control our style</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>After you add newly created sections to your home page, obviously we don't want to show both of them on mobile and desktop. We want to show a mobile banner on mobile and show a desktop banner on the desktop only. How to do this? you may have noticed we have added a specific class named "<strong>yx-desktop-hidden</strong>" for the mobile banner container and put a class named "<strong>yx-mobile-hidden</strong>" into the desktop banner container. And we have given mobile and desktop banner container-related class name "<strong>yx-mobile-banner-container</strong>" and "<strong>yx-desktop-banner-container</strong>". Now we can easily use a CSS style to control them.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>add the below CSS style codes into Debut theme CSS liquid file. Your theme.css.liquid file will be under the <strong>Assets</strong> directory.</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">@media only screen and (max-width: 749px) {
   .yx-mobile-hidden{
      display:none;
    }
   .yx-desktop-hidden{
      display:block;
    }
}

@media only screen and (min-width: 750px) {
   .yx-mobile-hidden{
      display:block;
   }
   .yx-desktop-hidden{
      display:none;
    }
}</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>You can copy and past the codes from <a href="https://jsfiddle.net/yxmaomao/7z2mgf4a/6/">JSFiddle</a> as well.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As you can see we use CSS @media and screen size(<strong>750px</strong> as a threshold screen width) to differentiate mobile from desktop. </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="debug-and-test">Debug and Test</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In order to get the best performance and visual looking, we highly recommend &nbsp;<strong>1920(width) * 1080(height)</strong> for desktop and <strong>800(width) * 800(height) </strong> for mobile. after you set your mobile and desktop banner image separately. you can preview your theme and switch between mobile and desktop to have a review.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":158,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.mojoin.com/wp-content/uploads/2020/12/preview-banner-images-1024x395.png" alt="shopify theme preview" class="wp-image-158"/><figcaption>shopify theme preview</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>If you don't like the default style, you can customer them by adding special attributes for "<strong>yx-mobile-banner-container</strong>" class to control mobile banner style and do similar changes to "<strong>yx-desktop-banner-container</strong>" class for your desktop banner.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="make-it-live">Make it live</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>So far all good, if you and your customer both are satisfied with the changes you are going to make it live. Congratulations! you have got a big success, last step so easy just click the publish button to make it live.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>publish a theme when you are editing it.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":160,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.mojoin.com/wp-content/uploads/2020/12/publish-a-theme-1024x52.png" alt="publish a theme" class="wp-image-160"/><figcaption>publish a theme</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>publish a theme from them list. <strong><em>Themes</em></strong> <em><strong>-&gt;Actions -&gt;Publish</strong></em>.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":162,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.mojoin.com/wp-content/uploads/2020/12/publish-a-theme-main-1024x373.png" alt="publish a theme " class="wp-image-162"/><figcaption>publish a theme from theme list </figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Conclusions</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Now you have got a basic idea on how to implement showing different image banners for Desktop and mobile, you can make it better for your theme. We only use the free Debut theme as an example, actually, different themes maybe needs a few changes to adapt to your environment. if you find it is very difficult for you to do these, please do not hesitate to leave a message at the below comment area, we will try our best to help you out.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->