<!-- wp:paragraph -->
<p>refer to : https://community.shopify.com/c/Shopify-Design/Different-images-for-mobile-than-desktop-web/td-p/522935/page/6</p>
<!-- /wp:paragraph -->

<!-- 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 & Mobile</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>In Shopify default Debut 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 set different images for Desktop or Mobile, so the reality is it is very difficult to make one image to support both Desktop and Mobile, and looks both are 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" title="#define-our-section">define your sections in Shopify Debut theme</a></strong></li><li><strong>add image setting in the section</strong></li><li><strong>put our css code into theme</strong></li><li><strong>debug and test</strong></li><li><strong>publish the theme</strong></li></ul>
<!-- /wp:list -->

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

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