Liquid, JavaScript, themes, sales channels
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!
Can you post the full code of the header file. I will check and guide you to change it.
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 %}
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 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 %}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024