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

<!-- wp:paragraph -->
<p>For each Shopify store's theme, there must have a theme settings file to save all the customized theme settings data.  the file name is settings_schema.json which is a kind of <a href="https://www.json.org/json-en.html">JSON</a> format file.</p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph -->
<p>the settings_schema.json is located at : <strong>shopify admin -> online store -> themes -> current online them -> Actions Dropdown -> edit code -> config -> settings_schema.json</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":487,"sizeSlug":"full","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-full"><img src="https://www.mojoin.com/wp-content/uploads/2021/10/settings-schema-location.png" alt="" class="wp-image-487"/></figure></div>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Add new Image Setting</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>As we know we can set Shopify stores' logo at theme header part. But there is a limitation in this way desktop and mobile versions have the same logo. if you want to show a different logo for a mobile browser, how can we achieve this?</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Definitely, we need to find somewhere to set this logo image for the mobile browser, so the best location is we put the settings in Shopify's theme setting which means we can add our logo image settings into the settings_schema.json file directly.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>open your settings_schema.json file, copy the following codes and paste them into :</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="">{
 "name": "mobile logo",
 "settings": [
  {
   "type": "image_picker",
   "id": "yx_mobilelogo"
  }
 ]
},</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>when you finished your config file will look like this:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":490,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.mojoin.com/wp-content/uploads/2021/10/config-updated-with-newimage.png" alt="" class="wp-image-490"/><figcaption>Save it. go to your theme settings page, you will see your mobile logo setting item there:</figcaption></figure>
<!-- /wp:image -->

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