How can I add a mobile logo to my theme if it does not support it? Focal

Solved
n1ght2k
Tourist
14 0 1

Hello, as mentioned in the title, I would like to know if it is possible to program the theme "Focal" to display a different logo on the mobile display and if so how?

Can someone help me with the thematic?

Best regards

Accepted Solution (1)

Accepted Solutions
LitCommerce
Trailblazer
288 71 72

This is an accepted solution.

Hi @n1ght2k,

Please change the whole header code. Link code: https://pastebin.com/0WfRv3Px 

Then you can upload the mobile logo in Customize. https://i.imgur.com/Wy3aKQ0.png

Hope it is clear to you.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 8 (8)
dmwwebartisan
Shopify Partner
9824 2236 3076

@n1ght2k 

It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
amorlett
Excursionist
34 2 6

not the best way to do it but  something like this and remember to show and hide on css file.. sorry if its not more clear but if your a dev it should make sense if not yeah got to hire one of us

<div class="logo desktop">  desktop code here </div> 

  {% if  section.settings.link_mobile_image != blank %}
<div class="logo mobile"> 
 same code as desktop but change src="{{section.settings.link_img_mobile}}"

</div>

in schema find where your desktop image is it's something like "label": "pick your logo" just search logo in schema you should find it copy entire block and pasted it after last }, and change id to "id": "link_img_mobile"
LitCommerce
Trailblazer
288 71 72

Hi @n1ght2k,

Please send the full code of the sections/header.liquid file. I will check and guide you in detail.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
n1ght2k
Tourist
14 0 1

@LitCommerce  sorry for the late reply i was ill.

Here is the Code from the Header:

 

{%- comment -%}
IMPLEMENTATION NOTE: the header in Focal is pretty complex as it allows a lot of different layouts. In order to make
this code as efficient as possible and avoid as many reflows, we are using a lot of different CSS variables. If you
need to touch this code, make sure to do it with EXTRA CARE as it may have some unwanted side effects
{%- endcomment -%}

<style>
:root {
--enable-sticky-header: {% if section.settings.enable_sticky_header %}1{% else %}0{% endif %};
--enable-transparent-header: {% if request.page_type == 'index' and section.settings.enable_transparent_header %}1{% else %}0{% endif %};
--loading-bar-background: {{ settings.header_text_color.red }}, {{ settings.header_text_color.green }}, {{ settings.header_text_color.blue }}; /* Prevent the loading bar to be invisible */
}

#shopify-section-{{ section.id }} {
{%- assign header_border_color = settings.header_background | color_mix: settings.header_text_color, 85 -%}

--header-background: {{ settings.header_background.red }}, {{ settings.header_background.green }}, {{ settings.header_background.blue }};
--header-text-color: {{ settings.header_text_color.red }}, {{ settings.header_text_color.green }}, {{ settings.header_text_color.blue }};
--header-border-color: {{ header_border_color.red }}, {{ header_border_color.green }}, {{ header_border_color.blue }};
--reduce-header-padding: {% if section.settings.reduce_desktop_padding %}1{% else %}0{% endif %};

{%- if section.settings.enable_sticky_header -%}
position: -webkit-sticky;
position: sticky;
{%- else -%}
position: relative;
{%- endif -%}

top: {% if section.settings.enable_sticky_header %}calc(var(--enable-sticky-announcement-bar) * var(--announcement-bar-height, 0px)){% else %}0{% endif %};
z-index: 4;
}

{%- if request.page_type == 'index' and section.settings.enable_transparent_header -%}
#shopify-section-{{ section.id }} {
margin-bottom: calc(-1 * (var(--header-height, 0px) + var(--enable-sticky-announcement-bar) * var(--announcement-bar-height, 0px)));
}

.js #shopify-section-{{ section.id }} .header--transparent {
{%- if settings.header_text_color == section.settings.transparent_header_text_color -%}
{%- assign header_bubble_text_color = settings.header_background -%}
{%- else -%}
{%- assign header_bubble_text_color = settings.header_text_color -%}
{%- endif -%}

--header-background: transparent;
--header-text-color: {{ section.settings.transparent_header_text_color.red }}, {{ section.settings.transparent_header_text_color.green }}, {{ section.settings.transparent_header_text_color.blue }};
--header-border-color: {{ section.settings.transparent_header_text_color.red }}, {{ section.settings.transparent_header_text_color.green }}, {{ section.settings.transparent_header_text_color.blue }}, 0.15;
--header-transparent-bubble-text-color: {{ header_bubble_text_color.red }}, {{ header_bubble_text_color.green }}, {{ header_bubble_text_color.blue }};
}
{%- endif -%}

#shopify-section-{{ section.id }} .header__logo-image {
max-width: {{ section.settings.mobile_logo_max_width }}px;
}

@media screen and (min-width: 741px) {
#shopify-section-{{ section.id }} .header__logo-image {
max-width: {{ section.settings.logo_max_width }}px;
}
}

@media screen and (min-width: 1200px) {
{%- if section.settings.header_layout == 'logo_left_navigation_inline' -%}
/* For this navigation we have to move the logo at the first and add a margin */
[dir="rtl"] .header__logo {
margin-left: 40px;
}

[dir="ltr"] .header__logo {
margin-right: 40px;
}

.header__logo {
order: -1;
}

@media screen and (min-width: 741px) {
.header__secondary-links {
max-width: max-content;
margin-inline-start: 48px;
}
}
{%- endif -%}

{%- if section.settings.header_layout == 'logo_left_navigation_center' -%}
/* For this navigation we have to move the logo and make sure the navigation takes the whole width */
.header__logo {
order: -1;
flex: 1 1 0;
}

.header__inline-navigation {
flex: 1 1 auto;
justify-content: center;
max-width: max-content;
margin-inline: 48px;
}
{%- endif -%}
}

{%- if request.page_type == '404' -%}
.shopify-section--404 {
/* For the 404 page, we re-use the same colors as the header for design reason */
--background: {{ settings.header_background.red }}, {{ settings.header_background.green }}, {{ settings.header_background.blue }};
--heading-color: {{ settings.header_text_color.red }}, {{ settings.header_text_color.green }}, {{ settings.header_text_color.blue }};
--text-color: {{ settings.header_text_color.red }}, {{ settings.header_text_color.green }}, {{ settings.header_text_color.blue }};
--primary-button-background: {{ settings.header_text_color.red }}, {{ settings.header_text_color.green }}, {{ settings.header_text_color.blue }};
--primary-button-text-color: {{ settings.header_background.red }}, {{ settings.header_background.green }}, {{ settings.header_background.blue }};
}
{%- endif -%}
</style>

<store-header {% if section.settings.enable_sticky_header %}sticky{% endif %} {% if request.page_type == 'index' and section.settings.enable_transparent_header %}transparent{% endif %} class="header {% if settings.background == settings.header_background %}header--bordered{% endif %} {% if request.page_type == 'index' and section.settings.enable_transparent_header %}header--transparent{% endif %}" role="banner">
{%- assign menu = section.settings.navigation_menu -%}

<div class="container">
<div class="header__wrapper">
<!-- LEFT PART -->
<nav class="header__inline-navigation" {% unless section.settings.header_layout == 'logo_center_search_open' %}role="navigation"{% endunless %}>
{%- if menu.links.size > 0 and section.settings.header_layout == 'logo_left_navigation_inline' or section.settings.header_layout == 'logo_left_navigation_center' or section.settings.header_layout == 'logo_center_navigation_inline' -%}
{%- render 'desktop-menu', menu: menu -%}
{%- endif -%}

<div class="header__icon-list {% if section.settings.header_layout == 'logo_center_search_open' %}hidden-desk{% endif %}">
{%- if menu.links.size > 0 -%}
<button is="toggle-button" class="header__icon-wrapper tap-area {% unless section.settings.header_layout == 'drawer' %}hidden-desk{% endunless %}" aria-controls="mobile-menu-drawer" aria-expanded="false">
<span class="visually-hidden">{{ 'header.general.navigation' | t }}</span>
{%- render 'icon' with 'header-hamburger' -%}
</button>
{%- endif -%}

<a href="{{ routes.search_url }}" is="toggle-link" class="header__icon-wrapper tap-area {% if section.settings.header_layout == 'logo_center_search_open' %}hidden-lap{% endif %} hidden-desk" aria-controls="search-drawer" aria-expanded="false" aria-label="{{ 'search.general.title' | t | escape }}">
{%- render 'icon' with 'header-search' -%}
</a>
</div>

{%- if section.settings.header_layout == 'logo_center_search_open' -%}
<div class="header__search-bar predictive-search hidden-pocket">
<form class="predictive-search__form" action="{{ routes.search_url }}" method="get" role="search">
<input type="hidden" name="type" value="product">
<input type="hidden" name="options[prefix]" value="last">
<input type="hidden" name="options[unavailable_products]" value="{{ settings.search_unavailable_products }}">

{%- render 'icon' with 'header-search' -%}
<input class="predictive-search__input" is="predictive-search-input" type="text" name="q" autocomplete="off" autocorrect="off" aria-controls="search-drawer" aria-expanded="false" aria-label="{{ 'search.general.title' | t }}" placeholder="{{ 'search.general.search_placeholder' | t }}">
</form>
</div>
{%- endif -%}
</nav>

<!-- LOGO PART -->
{%- capture logo -%}
<a class="header__logo-link" href="{{ routes.root_url }}">
{%- if section.settings.logo != blank -%}
{%- capture logo_size -%}{{ section.settings.logo_max_width | at_least: section.settings.mobile_logo_max_width | times: 2 | append: 'x' }}{%- endcapture -%}
<span class="visually-hidden">{{ shop.name }}</span>
<img class="header__logo-image" width="{{ section.settings.logo.width }}" height="{{ section.settings.logo.height }}" src="{{ section.settings.logo | img_url: logo_size }}" alt="{{ section.settings.logo.alt | escape }}">

{%- if request.page_type == 'index' and section.settings.enable_transparent_header and section.settings.transparent_logo != blank -%}
<img class="header__logo-image header__logo-image--transparent" width="{{ section.settings.transparent_logo.width }}" height="{{ section.settings.transparent_logo.height }}" src="{{ section.settings.transparent_logo | img_url: logo_size }}" alt="{{ section.settings.transparent_logo.alt | escape }}">
{%- endif -%}
{%- else -%}
<span class="header__logo-text heading h5">{{ shop.name }}</span>
{%- endif -%}
</a>
{%- endcapture -%}

{%- if request.page_type == 'index' -%}
<h1 class="header__logo">{{ logo }}</h1>
{%- else -%}
<span class="header__logo">{{ logo }}</span>
{%- endif -%}

<!-- SECONDARY LINKS PART -->
<div class="header__secondary-links">
{%- if section.settings.show_locale_selector and shop.published_locales.size > 1 -%}
{%- assign locale_selector = true -%}
{%- endif -%}

{%- if section.settings.show_currency_selector and shop.enabled_currencies.size > 1 -%}
{%- assign currency_selector = true -%}
{%- endif -%}

{%- if locale_selector or currency_selector -%}
{%- form 'localization', id: 'header-localization-form', class: 'header__cross-border hidden-pocket' -%}
{%- if currency_selector -%}
<div class="popover-container">
<input type="hidden" name="currency_code" value="{{ form.current_currency.iso_code }}">
<span class="visually-hidden">{{ 'header.general.currency' | t }}</span>

<button type="button" is="toggle-button" class="popover-button text--small" aria-expanded="false" aria-controls="header-localization-form-currency">
{{- form.current_currency.iso_code }} {% if form.current_currency.symbol %}{{ form.current_currency.symbol -}}{%- endif -%}
{%- render 'icon' with 'chevron', width: 9, height: 6, inline: true -%}
</button>

<popover-content id="header-localization-form-currency" class="popover">
<span class="popover__overlay"></span>

<header class="popover__header">
<span class="popover__title heading h6">{{- 'header.general.currency' | t -}}</span>

<button type="button" class="popover__close-button tap-area tap-area--large" data-action="close" title="{{ 'general.accessibility.close' | t | escape }}">
{%- render 'icon' with 'close' -%}
</button>
</header>

<div class="popover__content">
<div class="popover__choice-list">
{%- for currency in form.available_currencies -%}
<button type="submit" name="currency_code" value="{{ currency.iso_code }}" class="popover__choice-item">
<span class="popover__choice-label" {% if currency.iso_code == form.current_currency.iso_code %}aria-current="true"{% endif %}>
{{ currency.iso_code }} {% if currency.symbol %}{{ currency.symbol }}{% endif %}
</span>
</button>
{%- endfor -%}
</div>
</div>
</popover-content>
</div>
{%- endif -%}

{%- if locale_selector -%}
<div class="popover-container">
<input type="hidden" name="locale_code" value="{{ form.current_locale.iso_code }}">
<span class="visually-hidden">{{ 'header.general.language' | t }}</span>

<button type="button" is="toggle-button" class="popover-button text--small" aria-expanded="false" aria-controls="header-localization-form-locale">
{{- form.current_locale.endonym_name | capitalize -}}
{%- render 'icon' with 'chevron', width: 9, height: 6, inline: true -%}
</button>

<popover-content id="header-localization-form-locale" class="popover">
<span class="popover__overlay"></span>

<header class="popover__header">
<span class="popover__title heading h6">{{- 'header.general.language' | t -}}</span>

<button type="button" class="popover__close-button tap-area tap-area--large" data-action="close" title="{{ 'general.accessibility.close' | t | escape }}">
{%- render 'icon' with 'close' -%}
</button>
</header>

<div class="popover__content">
<div class="popover__choice-list">
{%- for locale in form.available_locales -%}
<button type="submit" name="locale_code" value="{{ locale.iso_code }}" class="popover__choice-item">
<span class="popover__choice-label" {% if locale.iso_code == form.current_locale.iso_code %}aria-current="true"{% endif %}>
{{- locale.endonym_name | capitalize -}}
</span>
</button>
{%- endfor -%}
</div>
</div>
</popover-content>
</div>
{%- endif -%}
{%- endform -%}
{%- endif -%}

<div class="header__icon-list">
{%- comment -%}IMPLEMENTATION NOTE: this icon is hidden by the "popup" section if it is disabled{%- endcomment -%}
<button is="toggle-button" class="header__icon-wrapper tap-area hidden-phone {% unless section.settings.show_icons %}hidden-desk{% endunless %}" aria-controls="newsletter-popup" aria-expanded="false">
<span class="visually-hidden">{{ 'header.general.newsletter' | t }}</span>
{%- render 'icon' with 'header-email' -%}
</button>

{%- if section.settings.header_layout != 'logo_center_search_open' -%}
<a href="{{ routes.search_url }}" is="toggle-link" class="header__icon-wrapper tap-area hidden-pocket hidden-lap {% unless section.settings.show_icons %}hidden-desk{% endunless %}" aria-label="{{ 'search.general.title' | t | escape }}" aria-controls="search-drawer" aria-expanded="false">
{%- render 'icon' with 'header-search' -%}
</a>
{%- endif -%}

{%- if shop.customer_accounts_enabled -%}
<a href="{% if customer %}{{ routes.account_url }}{% else %}{{ routes.account_login_url }}{% endif %}" class="header__icon-wrapper tap-area hidden-phone {% unless section.settings.show_icons %}hidden-desk{% endunless %}" aria-label="{% if customer %}{{ 'header.general.account' | t | escape }}{% else %}{{ 'header.general.login' | t | escape }}{% endif %}">
{%- render 'icon' with 'header-customer' -%}
</a>
{%- endif -%}

<a href="{{ routes.cart_url }}" {% unless settings.cart_type == 'page' or request.page_type == 'cart' %}is="toggle-link" aria-controls="mini-cart" aria-expanded="false"{% endunless %} class="header__icon-wrapper tap-area {% unless section.settings.show_icons %}hidden-desk{% endunless %}" aria-label="{{ 'header.general.cart' | t | escape }}" data-no-instant>
{%- render 'icon' with 'header-cart' -%}
<cart-count class="header__cart-count header__cart-count--floating bubble-count">{{ cart.item_count }}</cart-count>
</a>
</div>

{%- unless section.settings.show_icons -%}
<ul class="header__linklist list--unstyled hidden-pocket hidden-lap" role="list">
{%- comment -%}
<!-- NOTE: There is really not enough space to fit this, so this is commented by default in Liquid -->
<li class="header__linklist-item">
<button is="toggle-button" aria-controls="newsletter-popup" aria-expanded="false">{{ 'header.general.newsletter' | t }}</button>
</li>
{%- endcomment -%}

{%- if section.settings.header_layout != 'logo_center_search_open' -%}
<li class="header__linklist-item">
<a href="{{ routes.search_url }}" is="toggle-link" aria-controls="search-drawer" aria-expanded="false">{{ 'search.general.title' | t | escape }}</a>
</li>
{%- endif -%}

{%- if shop.customer_accounts_enabled -%}
<li class="header__linklist-item">
<a href="{% if customer %}{{ routes.account_url }}{% else %}{{ routes.account_login_url }}{% endif %}">
{%- if customer -%}
{{ 'header.general.account' | t }}
{%- else -%}
{{ 'header.general.login' | t }}
{%- endif -%}
</a>
</li>
{%- endif -%}

<li class="header__linklist-item">
<a href="{{ routes.cart_url }}" {% unless settings.cart_type == 'page' %}is="toggle-link" aria-controls="mini-cart" aria-expanded="false"{% endunless %} data-no-instant>
{{- 'header.general.cart' | t | escape -}}
<cart-count class="header__cart-count bubble-count">{{ cart.item_count }}</cart-count>
</a>
</li>
</ul>
{%- endunless -%}
</div>
</div>

{%- if menu.links.size > 0 and section.settings.header_layout == 'logo_center_search_open' -%}
<nav class="header__bottom-navigation hidden-pocket hidden-lap" role="navigation">
{% render 'desktop-menu', menu: menu, bottom_navigation: true %}
</nav>
{%- endif -%}
</div>
</store-header>

{%- comment -%}
------------------------------------------------------------------------------------
CART NOTIFICATION: it is used to show the notification when a product is added in message mode
------------------------------------------------------------------------------------
{%- endcomment -%}

<cart-notification global hidden class="cart-notification {% unless section.settings.enable_sticky_header %}cart-notification--fixed{% endunless %}"></cart-notification>

{%- comment -%}
------------------------------------------------------------------------------------
MOBILE MENU DRAWER
------------------------------------------------------------------------------------
{%- endcomment -%}

{%- assign menu = section.settings.sidebar_navigation_menu | default: section.settings.navigation_menu -%}
{%- render 'mobile-menu', menu: menu -%}

{%- comment -%}
------------------------------------------------------------------------------------
SEARCH DRAWER
------------------------------------------------------------------------------------
{%- endcomment -%}

{%- render 'predictive-search' -%}

<script>
(() => {
const headerElement = document.getElementById('shopify-section-{{ section.id }}'),
headerHeight = headerElement.clientHeight,
headerHeightWithoutBottomNav = headerElement.querySelector('.header__wrapper').clientHeight;

document.documentElement.style.setProperty('--header-height', headerHeight + 'px');
document.documentElement.style.setProperty('--header-height-without-bottom-nav', headerHeightWithoutBottomNav + 'px');
})();
</script>

{% schema %}
{
"name": "Header",
"class": "shopify-section--header",
"settings": [
{
"type": "checkbox",
"id": "enable_sticky_header",
"label": "Enable sticky header",
"default": true
},
{
"type": "header",
"content": "Logo"
},
{
"type": "image_picker",
"id": "logo",
"label": "Image",
"info": "280 x 80px .png recommended"
},
{
"type": "range",
"id": "logo_max_width",
"min": 50,
"max": 300,
"step": 5,
"unit": "px",
"label": "Image width",
"default": 140
},
{
"type": "range",
"id": "mobile_logo_max_width",
"min": 50,
"max": 170,
"step": 5,
"unit": "px",
"label": "Mobile image width",
"default": 100
},
{
"type": "header",
"content": "Navigation"
},
{
"type": "link_list",
"id": "navigation_menu",
"label": "Menu",
"default": "main-menu"
},
{
"type": "link_list",
"id": "sidebar_navigation_menu",
"label": "Mobile menu",
"info": "Select a different menu for mobile sidebar. If none is set the main menu is used."
},
{
"type": "header",
"content": "Desktop",
"info": "Those settings apply on large screen only"
},
{
"type": "select",
"id": "header_layout",
"label": "Layout",
"options": [
{
"value": "logo_left_navigation_inline",
"label": "Logo left, navigation inline"
},
{
"value": "logo_left_navigation_center",
"label": "Logo left, navigation center"
},
{
"value": "logo_center_navigation_inline",
"label": "Logo center, navigation inline"
},
{
"value": "logo_center_search_open",
"label": "Logo center, search highlighted"
},
{
"value": "drawer",
"label": "Drawer"
}
],
"default": "logo_left_navigation_inline"
},
{
"type": "checkbox",
"id": "show_icons",
"label": "Show icons",
"default": false
},
{
"type": "checkbox",
"id": "reduce_desktop_padding",
"label": "Reduce padding",
"default": false
},
{
"type": "header",
"content": "Language selector",
"info": "To add a language, go to your [language settings.](/admin/settings/languages)"
},
{
"type": "checkbox",
"id": "show_locale_selector",
"label": "Show language selector",
"default": true
},
{
"type": "header",
"content": "Currency selector",
"info": "To add a currency, go to your [currency settings.](/admin/settings/payments)"
},
{
"type": "checkbox",
"id": "show_currency_selector",
"label": "Show currency selector",
"default": true
},
{
"type": "header",
"content": "Transparent header",
"info": "Home page only. For best results, use an image section such as slideshow."
},
{
"type": "checkbox",
"id": "enable_transparent_header",
"label": "Enable",
"default": false
},
{
"type": "color",
"id": "transparent_header_text_color",
"label": "Text color",
"default": "#ffffff"
},
{
"type": "image_picker",
"id": "transparent_logo",
"label": "Logo image",
"info": "Uses the dimensions set on your main logo."
},
{
"type": "header",
"content": "Search"
},
{
"type": "link_list",
"id": "search_menu",
"label": "Quick links menu",
"info": "Display quick links when empty. This menu has limited support for dropdown items."
}
],
"blocks": [
{
"type": "mega_menu",
"name": "Mega menu",
"settings": [
{
"type": "text",
"id": "menu_item",
"label": "Menu item",
"info": "Enter menu item to apply a mega menu dropdown. [Learn more](https://support.maestrooo.com/article/180-navigation-enabling-and-configuring-mega-navigation)."
},
{
"type": "select",
"id": "images_position",
"label": "Images position",
"info": "When featuring 4 images or more, we recommend to not use any dropdown links to keep the navigation easy to use.",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
],
"default": "right"
},
{
"type": "header",
"content": "Image 1"
},
{
"type": "image_picker",
"id": "image_1",
"label": "Image",
"info": "560 x 420px .jpg recommended"
},
{
"type": "text",
"id": "image_1_heading",
"label": "Heading"
},
{
"type": "text",
"id": "image_1_text",
"label": "Text"
},
{
"type": "url",
"id": "image_1_link",
"label": "Link"
},
{
"type": "header",
"content": "Image 2"
},
{
"type": "image_picker",
"id": "image_2",
"label": "Image",
"info": "560 x 420px .jpg recommended"
},
{
"type": "text",
"id": "image_2_heading",
"label": "Heading"
},
{
"type": "text",
"id": "image_2_text",
"label": "Text"
},
{
"type": "url",
"id": "image_2_link",
"label": "Link"
},
{
"type": "header",
"content": "Image 3"
},
{
"type": "image_picker",
"id": "image_3",
"label": "Image",
"info": "560 x 420px .jpg recommended"
},
{
"type": "text",
"id": "image_3_heading",
"label": "Heading"
},
{
"type": "text",
"id": "image_3_text",
"label": "Text"
},
{
"type": "url",
"id": "image_3_link",
"label": "Link"
},
{
"type": "header",
"content": "Image 4"
},
{
"type": "image_picker",
"id": "image_4",
"label": "Image",
"info": "560 x 420px .jpg recommended"
},
{
"type": "text",
"id": "image_4_heading",
"label": "Heading"
},
{
"type": "text",
"id": "image_4_text",
"label": "Text"
},
{
"type": "url",
"id": "image_4_link",
"label": "Link"
},
{
"type": "header",
"content": "Image 5"
},
{
"type": "image_picker",
"id": "image_5",
"label": "Image",
"info": "560 x 420px .jpg recommended"
},
{
"type": "text",
"id": "image_5_heading",
"label": "Heading"
},
{
"type": "text",
"id": "image_5_text",
"label": "Text"
},
{
"type": "url",
"id": "image_5_link",
"label": "Link"
},
{
"type": "header",
"content": "Image 6"
},
{
"type": "image_picker",
"id": "image_6",
"label": "Image",
"info": "560 x 420px .jpg recommended"
},
{
"type": "text",
"id": "image_6_heading",
"label": "Heading"
},
{
"type": "text",
"id": "image_6_text",
"label": "Text"
},
{
"type": "url",
"id": "image_6_link",
"label": "Link"
}
]
}
]
}
{% endschema %}

amorlett
Excursionist
34 2 6

IMO your going to have to get a dev to do this or pay someone on here because yeah its easyish however its all connected to the scheme which requires a lot of testing might take someone 2-4 hours even if it's just 1 or 2 lines of code.. they have to make sure they aren't breaking other aspects of the theme files since looks like the theme dev didn't make it easy to add stuff  

LitCommerce
Trailblazer
288 71 72

This is an accepted solution.

Hi @n1ght2k,

Please change the whole header code. Link code: https://pastebin.com/0WfRv3Px 

Then you can upload the mobile logo in Customize. https://i.imgur.com/Wy3aKQ0.png

Hope it is clear to you.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

n1ght2k
Tourist
14 0 1

@LitCommerce 

Hey man, thank you very much! It works perfectly!

Is there any way I can tip you? I'm incredibly grateful to you!

LitCommerce
Trailblazer
288 71 72

Hi @n1ght2k,

Thank you very much.

You can send information to mail: namphan992@gmail.com

If you have any difficulty, you can contact me Happy to help you.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!