How to use Shopify theme settings to create mobile-specific logos |

mobile-logo-markup.liquid

<div id="desktop">
  {% if section.settings.logo != blank %}
    {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
    <img src="{{ section.settings.logo | img_url: image_size }}"
         srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
         alt="{{ section.settings.logo.alt | default: shop.name }}">
  {% else %}
    {{ shop.name }}
  {% endif %}
</div>
<div id="mobile">
  {% if section.settings.mobile_logo != blank %}
    {% capture image_size %}{{ section.settings.mobile_logo_max_width }}x{% endcapture %}
    <img src="{{ section.settings.mobile_logo | img_url: image_size }}"
         srcset="{{ section.settings.mobile_logo | img_url: image_size }} 1x, {{ section.settings.mobile_logo | img_url: image_size, scale: 2 }} 2x"
         alt="{{ section.settings.logo.alt | default: shop.name }}">
  {% else %}
    {{ shop.name }}
  {% endif %}
</div>