How to add an image setting to Shopify theme setting page

Settings

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 JSON format file.

Location

the settings_schema.json is located at : shopify admin -> online store -> themes -> current online them -> Actions Dropdown -> edit code -> config -> settings_schema.json

Add new Image Setting

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?

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.

open your settings_schema.json file, copy the following codes and paste them into :

{
 "name": "mobile logo",
 "settings": [
  {
   "type": "image_picker",
   "id": "yx_mobilelogo"
  }
 ]
},

when you finished your config file will look like this:

here we add a new setting with name “mobile logo” and its type is “image_picker” , settings name is “yx_mobilelogo“. image_picker is kind of Image Picker setting controller from Shopify.
Shopify has developed for use , we just setup and use it directly.

For Shopify settings there are two types of setting we can use.
Input Settings – Settings that can hold a value, and are configurable by merchants.
Sidebar Settings – Settings that can’t hold a value, and aren’t configurable by merchants. They’re informational elements that can be used to provide detail and clarity for your input settings.

Save it. go to your theme settings page, you will see your mobile logo setting item there:

Access Logo Image Setting

We have put the mobile logo image setting in the theme settings, can be changed easily from the Shopify backend. Now we need to use this setting somewhere. Just as setting’s name guide we should show mobile logo on the mobile browser only.

Normally Shopify logo file setting will be used at Shopify Header liquid file, for example Shopify Debut theme header.liquid which is at :
Shopify Admin -> Online Store -> Themes -> Current Theme Dropdown -> Edit Code -> Sections -> header.liquid

In the file your can search by “section.settings.logo”, will show you where Shopify uses this one to show your store logo image from your theme header section settings.

In our case we can access our mobile logo image with : “settings.yx_mobilelogo“, snippet codes as below:

 <div class="grid grid--no-gutters grid--table site-header__mobile-nav">
      <div class="grid__item {{ logo_classes }} yx-mobile-logo-only">
          <div class="h2 site-header__logo">
            {%- assign img_url = settings.yx_mobilelogo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <a href="{{ routes.root_url }}" class="yx-mobile-head-logo site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
             <div class="yx-mobile-head-logo-div">
              {% capture logo_alt %}{{ settings.yx_mobilelogo_alt | default: shop.name }}{% endcapture %}
             <img class="lazyload js"
                   src="{{ settings.yx_mobilelogo | img_url: '300x300' }}"
                   data-src="{{ img_url }}"
                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ settings.yx_mobilelogo.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ logo_alt | escape }}"
                   style="max-width: 900px">
              <noscript>
                {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
                <img src="{{ settings.yx_mobilelogo | img_url: image_size }}"
                     srcset="{{ settings.yx_mobilelogo | img_url: image_size }} 1x, {{ settings.yx_mobilelogo | img_url: image_size, scale: 2 }} 2x"
                     alt="{{ settings.yx_mobilelogo_alt | default: shop.name }}"
                     style="max-width: 900px;">
              </noscript>
              </div>
            </a>
         </div>
      </div>
    </div>

you can copy and tailer them as your requirement. as you see we use CSS class “yx-mobile-logo-only” to control this logo only be shown in mobile browser.

CSS style as :

.yx-mobile-logo-only{
    display:none;
  }
@media only screen and (max-width: 749px){
  .yx-mobile-logo-only{
    display: inline-flex;
  }
}
Please follow and like us:
Pin Share

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *