Adding another logo in header

RamtinDB
New Member
4 0 0

Hi everyone!

so basically i want to add another logo to the header and redirect visitors to a second website. lets say this is website A and i want to Direct visitors to website B.

currently on website A there is a logo of website A which it directs you to landing page of website A if you click on it. now i want to add a second logo and when visitors click on it, it directs them to website B. i checked the header.liquid and i saw that there was a limit to number of logos so naturally i changed 1 to 2. after that i added the code for the link and i typed the website B link into it. now there are 2 logos but both direct visitors to website A landing page.

not sure why but either the link code is being ignored or it is being overwritten by another code some where.

here is the section of header.liquid that i have changed.

 

"blocks": [
{
"type": "logo",
"name": "Logo",
"limit": 2,
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "Logo"
},
{
"type": "image_picker",
"id": "logo-inverted",
"label": "White logo",
"info": "Used when on top of an image"
},
{
"type": "range",
"id": "desktop_logo_width",
"label": "Desktop logo width",
"default": 200,
"min": 100,
"max": 400,
"step": 10,
"unit": "px"
},
{
"type": "range",
"id": "mobile_logo_width",
"label": "Mobile logo width",
"default": 140,
"min": 60,
"max": 200,
"step": 10,
"unit": "px",
"info": "Set as a max-width, may appear smaller"
},
{
"type": "url",
"id": "link",
"label": "Link"
}
]

can someone help to fix this issue? thanks in advance!

0 Likes

Can you post the full code of the header file. I will check and guide you to change it.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
RamtinDB
New Member
4 0 0

Sure, here it is:

 

{%- assign main_menu = linklists[section.settings.main_menu_link_list] -%}
{%- assign toolbar_menu = linklists[section.settings.toolbar_menu] -%}

{%- assign logo_alignment = 'left' -%}
{% if section.settings.main_menu_alignment == 'center-left' or section.settings.main_menu_alignment == 'center-split' or section.settings.main_menu_alignment == 'center' or section.settings.main_menu_alignment == 'center-drawer' %}
{%- assign logo_alignment = 'center' -%}
{% endif %}

{%- assign dropdown_alignment = 'left' -%}
{% if section.settings.main_menu_alignment == 'left-center' or section.settings.main_menu_alignment == 'center-split' or section.settings.main_menu_alignment == 'center' %}
{%- assign dropdown_alignment = 'center' -%}
{% endif %}

 

{% if section.settings.drawer_menu_style == 'Style 1' %}
{% render 'drawer-menu_1',
section: section,
main_menu: main_menu,
toolbar_menu: toolbar_menu,
logo_alignment: logo_alignment
%}
{% else %}
{% render 'drawer-menu_2',
section: section,
main_menu: main_menu,
toolbar_menu: toolbar_menu,
logo_alignment: logo_alignment
%}
{% endif %}
{% render 'cart-drawer' %}

{%- assign template_name = template | replace: '.', ' ' | truncatewords: 2, '' | handle -%}

{%- assign sticky_header = false -%}
{% if section.settings.header_style == 'sticky' %}
{%- assign sticky_header = true -%}
{% endif %}
{%- assign overlay_header = false -%}
{%- assign has_logo = false -%}
{% if template_name == 'index' and section.settings.sticky_index %}
{%- assign overlay_header = true -%}
{% endif %}
{% if template_name == 'collection' and collection.image and section.settings.sticky_collection %}
{%- assign overlay_header = true -%}
{% endif %}

<style>
.site-nav__link,
.site-nav__dropdown-link:not(.site-nav__dropdown-link--top-level) {
font-size: {{ settings.type_navigation_size }}px;
}
{% if settings.type_navigation_capitalize %}
.site-nav__link, .mobile-nav__link--top-level {
text-transform: uppercase;
letter-spacing: 0.2em;
}
.mobile-nav__link--top-level {
font-size: 1.1em;
}
{% endif %}

{% if mainmenu.length > 6 %}
.site-nav__link {
padding-left: 10px;
padding-right: 10px;
}
{% endif %}

{% unless section.settings.mega_menu_images %}
.megamenu__colection-image {
display: none;
}
{% endunless %}

{%- if settings.color_header == settings.color_body_bg -%}
.site-header {
box-shadow: 0 0 1px rgba(0,0,0,0.2);
}

.toolbar + .header-sticky-wrapper .site-header {
border-top: 0;
}
{%- endif -%}

{%- if settings.color_announcement == settings.color_body_bg -%}
.announcement-bar {
border-bottom: 1px solid;
}
{%- endif -%}
</style>

 

<div class="{% if overlay_header or section.settings.announcement_above_header %}announcement_top_true{% endif %}" data-section-id="{{ section.id }}" data-section-type="header-section">
{% if overlay_header or section.settings.announcement_above_header %}
{% render 'announcement-bar', section: section %}
{% endif %}

{% unless overlay_header %}
{% if section.settings.toolbar_social or section.settings.toolbar_menu != blank %}
{% render 'toolbar',
section: section,
toolbar_menu: toolbar_menu,
overlay_header: overlay_header
%}
{% endif %}
{% endunless %}

<div class="header-sticky-wrapper">
<div class="header-wrapper{% if overlay_header %} header-wrapper--sticky is-light{% endif %}">

{% if overlay_header %}
{% if section.settings.toolbar_social or section.settings.toolbar_menu != blank %}
{% render 'toolbar',
section: section,
overlay_header: overlay_header
%}
{% endif %}
{% endif %}
<header
class="site-header{% if settings.type_navigation_style == 'heading' %} site-header--heading-style{% endif %}"
data-sticky="{{ sticky_header }}">
<div class="page-width">
<div
class="header-layout header-layout--{{ section.settings.main_menu_alignment }}"
data-logo-align="{{ logo_alignment }}">
{% if logo_alignment == 'left' or logo_alignment == 'center' %}
{% if section.settings.main_menu_alignment != 'left-drawer' %}
<div class="site-nav{% unless section.settings.main_menu_alignment == 'center-drawer' %} md__show md__show_1{% endunless %}">

{% if section.settings.main_menu_alignment == 'left-center' or section.settings.main_menu_alignment == 'left' or section.settings.main_menu_alignment == 'center-left' %}
<button
type="button"
class="site-nav__link site-nav__link--icon js-drawer-open-nav"
aria-controls="NavDrawer">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-hamburger" viewBox="0 0 64 64"><path d="M7 15h51M7 32h43M7 49h51"/></svg>
<span class="icon__fallback-text">{{ 'general.drawers.navigation' | t }}</span>
</button>

{% if settings.search_enable and section.settings.main_menu_alignment != 'left' %}
<a class="site-nav__link site-nav__link--icon search_mob_icon {% if section.settings.main_menu_alignment == 'left-center' %} medium-up--hide{% else %}hide{% endif %}">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 64 64"><path d="M47.16 28.58A18.58 18.58 0 1 1 28.58 10a18.58 18.58 0 0 1 18.58 18.58zM54 54L41.94 42"/></svg>
<input type="search" name="q" value="{{ search.terms | escape | replace: '*', '' }}" placeholder="{{ 'general.search.placeholder' | t }}" class="input-group-field" aria-label="{{ 'general.search.placeholder' | t }}">
</a>
{% endif %}
{% endif %}
</div>
{% endif %}
{% endif %}

{% if logo_alignment == 'left' %}
<div class="header-item header-item--logo">
{% render 'header-logo-block', section: section %}
</div>
{% endif %}


{% if logo_alignment == 'left' and section.settings.main_menu_alignment != 'left-drawer' %}
<div class="header-item header-item--navigation{% if section.settings.main_menu_alignment == 'left-center' %} text-center{% endif %} medium-down--hide">
{% if section.settings.header_megamenu %}
{% render 'header-desktop-nav', main_menu: main_menu %}
{% else %}
{% render 'header-desktop-nav_simple', main_menu_links: main_menu.links %}
{% endif %}
</div>
{% endif %}

{% if logo_alignment == 'center' %}
<div class="header-item header-item--left header-item--navigation">
{% if section.settings.main_menu_alignment != 'center-left' %}
<div class="site-nav{% unless section.settings.main_menu_alignment == 'center-drawer' %} md__show{% endunless %}">
<button
type="button"
class="site-nav__link site-nav__link--icon js-drawer-open-nav"
aria-controls="NavDrawer">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-hamburger" viewBox="0 0 64 64"><path d="M7 15h51M7 32h43M7 49h51"/></svg>
<span class="icon__fallback-text">{{ 'general.drawers.navigation' | t }}</span>
</button>
</div>
{% endif %}

{% if section.settings.main_menu_alignment == 'center' or section.settings.main_menu_alignment == 'center-split' %}
{% if settings.search_enable %}
<div class="site-nav small--hide">
<a href="#" backup-href="{{ routes.search_url }}" class="site-nav__link site-nav__link--icon js-search-header">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 64 64"><path d="M47.16 28.58A18.58 18.58 0 1 1 28.58 10a18.58 18.58 0 0 1 18.58 18.58zM54 54L41.94 42"/></svg>
<span class="icon__fallback-text">{{ 'general.search.title' | t }}</span>
</a>
</div>
{% endif %}
{% endif %}

{% if section.settings.main_menu_alignment == 'center-left' %}
{% if section.settings.header_megamenu %}
{% render 'header-desktop-nav', main_menu: main_menu %}
{% else %}
{% render 'header-desktop-nav_simple', main_menu_links: main_menu.links %}
{% endif %}
{% endif %}

</div>

{% if section.settings.main_menu_alignment == 'center-split' %}
{% render 'header-split-nav', main_menu: main_menu, section: section %}
{% endif %}

{% if section.settings.main_menu_alignment != 'center-split' %}
<div class="header-item header-item--logo">
{% render 'header-logo-block', section: section %}
</div>
{% endif %}
{% endif %}

<div class="header-item header-item--icons">
{% render 'header-icons', section: section %}
</div>
</div>

{% if section.settings.main_menu_alignment == 'center' %}
<div class="text-center">
{% if section.settings.header_megamenu %}
{% render 'header-desktop-nav', main_menu: main_menu %}
{% else %}
{% render 'header-desktop-nav_simple', main_menu_links: main_menu.links %}
{% endif %}
</div>
{% endif %}
</div>
<div class="site-header__search-container">
<div class="site-header__search">
<div class="page-width">
<form action="{{ routes.search_url }}" method="get" role="search"
id="HeaderSearchForm"
class="site-header__search-form">
<input type="hidden" name="type" value="{{ settings.search_type }}">
<button type="submit" class="text-link site-header__search-btn site-header__search-btn--submit">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 64 64"><path d="M47.16 28.58A18.58 18.58 0 1 1 28.58 10a18.58 18.58 0 0 1 18.58 18.58zM54 54L41.94 42"/></svg>
<span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
<input type="search" name="q" value="{{ search.terms | escape | replace: '*', '' }}" placeholder="{{ 'general.search.placeholder' | t }}" class="site-header__search-input" aria-label="{{ 'general.search.placeholder' | t }}">
</form>
<button type="button" class="js-search-header-close text-link site-header__search-btn">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 64 64"><path d="M19 17.61l27.12 27.13m0-27.12L19 44.74"/></svg>
<span class="icon__fallback-text">{{ 'general.accessibility.close_modal' | t | json }}</span>
</button>
</div>
</div>
{%- if settings.predictive_search_enabled -%}
<div class="predictive-results hide">
<div class="page-width">
<div id="PredictiveResults"></div>
<div class="text-center predictive-results__footer">
<button type="button" class="btn btn--small" data-predictive-search-button>
<small>
{{ 'general.search.view_more' | t }}
</small>
</button>
</div>
</div>
</div>
{%- endif -%}
</div>
</header>
</div>
</div>

{% unless overlay_header or section.settings.announcement_above_header %}
{% render 'announcement-bar', section: section %}
{% endunless %}
</div>

{% schema %}
{
"name": "Header",
"settings": [
{
"type": "link_list",
"id": "main_menu_link_list",
"label": "Navigation",
"default": "main-menu"
},
{
"type": "select",
"id": "drawer_menu_style",
"label": "Drawer Menu Style",
"default": "Style 1",
"options": [
{
"value": "Style 1",
"label": "Style 1"
},
{
"value": "Style 2",
"label": "Style 2"
}
]
},
{
"type": "checkbox",
"id": "header_megamenu",
"label": "Use mega menu",
"default": false
},
{
"type": "checkbox",
"id": "mega_menu_images",
"label": "Show mega menu images",
"default": true,
"info": "[How to create a mega menu](https://archetypethemes.co/blogs/impulse/how-do-i-create-a-mega-menu)"
},
{
"type": "select",
"id": "main_menu_alignment",
"label": "Header layout",
"default": "left",
"options": [
{
"value": "left",
"label": "Logo left, menu left"
},
{
"value": "left-center",
"label": "Logo left, menu center"
},
{
"value": "left-drawer",
"label": "Logo left, menu drawer"
},
{
"value": "center-left",
"label": "Logo center, menu left"
},
{
"value": "center-split",
"label": "Logo center, menu split"
},
{
"value": "center",
"label": "Logo center, menu below"
},
{
"value": "center-drawer",
"label": "Logo center, menu drawer"
}
]
},
{
"type": "select",
"id": "header_style",
"label": "Header style",
"default": "normal",
"options": [
{
"value": "normal",
"label": "Normal"
},
{
"value": "sticky",
"label": "Sticky"
}
]
},
{
"type": "checkbox",
"id": "sticky_index",
"label": "Overlay header over home page",
"default": false
},
{
"type": "checkbox",
"id": "sticky_collection",
"label": "Overlay header over collection",
"info": "(if collection image is enabled)",
"default": false
},
{
"type": "header",
"content": "Announcement bar"
},
{
"type": "checkbox",
"id": "announcement_above_header",
"label": "Always show above header"
},
{
"type": "header",
"content": "Toolbar"
},
{
"type": "link_list",
"id": "toolbar_menu",
"label": "Navigation",
"info": "This menu won't show dropdown items"
},
{
"type": "checkbox",
"id": "toolbar_social",
"label": "Show social icons"
},
{
"type": "header",
"content": "Currency selector",
"info": "To disable / enable currency switcher use Auto Currency Switcher app"
},
{
"type": "checkbox",
"id": "show_currency_flags",
"label": "Show currency flags",
"default": true
}
],
"blocks": [
{
"type": "logo",
"name": "Logo",
"limit": 2,
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "Logo"
},
{
"type": "image_picker",
"id": "logo-inverted",
"label": "White logo",
"info": "Used when on top of an image"
},
{
"type": "range",
"id": "desktop_logo_width",
"label": "Desktop logo width",
"default": 200,
"min": 100,
"max": 400,
"step": 10,
"unit": "px"
},
{
"type": "range",
"id": "mobile_logo_width",
"label": "Mobile logo width",
"default": 140,
"min": 60,
"max": 200,
"step": 10,
"unit": "px",
"info": "Set as a max-width, may appear smaller"
},
{
"type": "url",
"id": "link",
"label": "Link"
}
]
},
{
"type": "announcement",
"name": "Announcement",
"limit": 3,
"settings": [
{
"type": "text",
"id": "text",
"label": "Heading",
"default": "Hassle-free returns"
},
{
"type": "text",
"id": "link_text",
"label": "Text",
"default": "30-day postage paid returns"
},
{
"type": "url",
"id": "link",
"label": "Link"
}
]
},
{
"type": "menu_image",
"name": "Megamenu Image",
"settings": [
{
"type": "text",
"id": "title",
"label": "Menu title"
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
}
]
}
],
"default": {
"settings": {}
}
}
{% endschema %}

0 Likes
RamtinDB
New Member
4 0 0

@LitExtension any updates?

0 Likes

Please send me the "snippets/header-logo-block.liquid" file, I will check it.
I will guide you how to add a link to it.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
RamtinDB
New Member
4 0 0

@LitExtension Here you go

 

{% for block in section.blocks %}
{% if block.type == 'logo' %}

{%- assign has_logo = true -%}
{%- assign header_logo_size = block.settings.desktop_logo_width | append: 'x' -%}
{%- assign header_logo_size_mobile = block.settings.mobile_logo_width | append: 'x' -%}

{% style %}
.header-item--logo,
.header-layout--left-center .header-item--logo,
.header-layout--left-center .header-item--icons {
-webkit-box-flex: 0 1 {{ block.settings.mobile_logo_width }}px;
-ms-flex: 0 1 {{ block.settings.mobile_logo_width }}px;
flex: 0 1 {{ block.settings.mobile_logo_width }}px;
}

@media only screen and (min-width: 769px) {
.header-item--logo,
.header-layout--left-center .header-item--logo,
.header-layout--left-center .header-item--icons {
{%comment%}
-webkit-box-flex: 0 0 {{ block.settings.desktop_logo_width }}px;
-ms-flex: 0 0 {{ block.settings.desktop_logo_width }}px;
flex: 0 0 {{ block.settings.desktop_logo_width }}px;
{%endcomment%}
-webkit-box-flex: 0 0 230px;
-ms-flex: 0 0 230px;
flex: 0 0 230px;
}
}

.site-header__logo a {
width: {{ block.settings.mobile_logo_width }}px;
}
.is-light .site-header__logo .logo--inverted {
width: {{ block.settings.mobile_logo_width }}px;
}
@media only screen and (min-width: 769px) {
.site-header__logo a {
width: {{ block.settings.desktop_logo_width }}px;
}

.is-light .site-header__logo .logo--inverted {
width: {{ block.settings.desktop_logo_width }}px;
}
}

@media only screen and (max-width: 768px) {
.header-layout--left-center > .header-item--icons,
.header-layout--left-center > .site-nav{
width: calc(50vw - {{ block.settings.mobile_logo_width | divided_by: 2 }}px - 17px);
flex: 0 1 auto !important;
}
}
{% endstyle %}

{% if template == 'index' %}
<h1 class="site-header__logo" itemscope itemtype="http://schema.org/Organization">
<span class="visually-hidden">{{ shop.name }}</span>
{% else %}
<div class="h1 site-header__logo" itemscope itemtype="http://schema.org/Organization">
{% endif %}

{% if block.settings.logo %}
{% comment %}
.logo--has-inverted is only applied to the default logo if the inverted logo exists. That way it'll only be hidden on the slider when it has a backup.
{% endcomment %}
<a
href="{{ routes.root_url }}"
itemprop="url"
class="site-header__logo-link{% if block.settings.logo-inverted %} logo--has-inverted{% endif %}">
<img
class="small--hide"
src="{{ block.settings.logo | img_url: header_logo_size }}"
srcset="{{ block.settings.logo | img_url: header_logo_size }} 1x, {{ block.settings.logo | img_url: header_logo_size, scale: 2 }} 2x"
alt="{{ block.settings.logo.alt | default: shop.name }}"
itemprop="logo">
<img
class="medium-up--hide"
src="{{ block.settings.logo | img_url: header_logo_size_mobile }}"
srcset="{{ block.settings.logo | img_url: header_logo_size_mobile }} 1x, {{ block.settings.logo | img_url: header_logo_size_mobile, scale: 2 }} 2x"
alt="{{ block.settings.logo.alt | default: shop.name }}">
</a>
{% if block.settings.logo-inverted %}
<a
href="{{ routes.root_url }}"
itemprop="url"
class="site-header__logo-link logo--inverted">
<img
class="small--hide"
src="{{ block.settings.logo-inverted | img_url: header_logo_size }}"
srcset="{{ block.settings.logo-inverted | img_url: header_logo_size }} 1x, {{ block.settings.logo-inverted | img_url: header_logo_size, scale: 2 }} 2x"
alt="{{ block.settings.logo-inverted.alt | default: shop.name }}"
itemprop="logo">
<img
class="medium-up--hide"
src="{{ block.settings.logo-inverted | img_url: header_logo_size_mobile }}"
srcset="{{ block.settings.logo-inverted | img_url: header_logo_size_mobile }} 1x, {{ block.settings.logo-inverted | img_url: header_logo_size_mobile, scale: 2 }} 2x"
alt="{{ block.settings.logo.alt | default: shop.name }}">
</a>
{% endif %}
{% else %}
<a href="{{ routes.root_url }}" itemprop="url">{{ shop.name }}</a>
{% endif %}
{% if template == 'index' %}
</h1>
{% else %}
</div>
{% endif %}

{% endif %}
{% endfor %}

{% unless has_logo %}
{% style %}
/* prevent text-only logo from breaking mobile nav */
.header-item--logo {
max-width: 60%;
}
{% endstyle %}
{% if template == 'index' %}
<h1 class="site-header__logo" itemscope itemtype="http://schema.org/Organization">
{% else %}
<div class="h1 site-header__logo" itemscope itemtype="http://schema.org/Organization">
{% endif %}
<a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">
{{ shop.name }}
</a>
{% if template == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
{% endunless %}

0 Likes