Greetings,
I would like to add a new icon redirecting to a page on my header just between my account and cart icons:
And also on mobile and tablet view:
I would really appreciate your help.
We would just need to see your code as there is no way to do this through your admin section. We would essentially just need to throw in an image or svg within the wrapper that holds those icons and then wrap the image in tags to give it a link to go wherever you need it to go to.
Ok , do I send you here the header liquid code right ?
this is my code:
{% # theme-check-disable LiquidTag, TemplateLength %}
{%- liquid
assign has_mega_nav_pills = false
assign has_mega_nav_columns = false
assign has_mega_nav_sidebar = false
if section.blocks.size > 0
for block in section.blocks
if block.type == “pills”
assign has_mega_nav_pills = true
elsif block.type == “columns”
assign has_mega_nav_columns = true
elsif block.type == “sidebar”
assign has_mega_nav_sidebar = true
endif
endfor
endif
assign search_is_minimised = false
if section.settings.minimise_search_mobile or section.settings.minimise_search_desktop
assign search_is_minimised = true
endif
assign show_search_types = false
if settings.show_search_types and shop.types
assign show_search_types = true
endif
-%}
{%- style -%}
.header {
–bg-color: {{ section.settings.bg_color.rgba }};
–text-color: {{ section.settings.text_color.rgb }};
–nav-bg-color: {{ section.settings.bg_color.rgb }};
–nav-text-color: {{ section.settings.text_color.rgb }};
–nav-child-bg-color: {{ section.settings.bg_color.rgb }};
–nav-child-text-color: {{ section.settings.text_color.rgb }};
–header-accent-color: {{ section.settings.accent_color.rgb }};
–search-bg-color: {{ section.settings.bg_color | color_mix: section.settings.text_color, 90 }};
{% unless section.settings.logo %}
–logo_type_scale: var(–body-font-size) * {{ section.settings.logo_type_scale }};
–logo_font-size: calc((var(–logo_type_scale) / 1.5) * var(–fluid-1-5));
{% endunless %}
{% if settings.cart_shaking and cart != empty %}
–shake-delay: 4s;
{% endif %}
}
{%- endstyle -%}
<store-header class=“header bg-theme-bg text-theme-text{% if section.settings.enable_sticky or search_is_minimised %} has-motion{% endif %}{% if search_is_minimised %} search-is-collapsed{% endif %}”
{%- if section.settings.enable_sticky -%} data-is-sticky=“true”{%- endif -%}
{%- if search_is_minimised -%} data-is-search-minimised=“true”{%- endif -%}
style=“–header-transition-speed: 300ms”>
{%- if request.page_type == 'index' and section.settings.logo_h1 -%}
{%- endif -%} {%- if section.settings.logo != blank -%} {%- liquid assign logo_width = section.settings.logo_width if section.settings.logo.width < logo_width assign logo_width = section.settings.logo.width endif assign alt_text = section.settings.logo.alt | default: shop.name -%} {% render 'image', image: section.settings.logo, src_width: logo_width, srcset_2x: true, lazy_load: false, alt_text: alt_text %} {%- else -%} {%- if section.settings.logo_text != blank -%}{{- section.settings.logo_text -}}{%- else -%}{{ shop.name }}{%- endif -%} {%- endif -%} {%- if request.page_type == 'index' and section.settings.logo_h1 -%}
{%- endif -%}{%- if section.settings.enable_search -%}
{%- if settings.enable_predictive_search -%}
{%- if section.settings.logo_center and section.settings.minimise_search_desktop -%}
{% render 'icon-search' %}
{% render 'icon-close' %}
{{ 'general.icon_labels.search' | t }}
{%- endif -%}
{%- elsif section.settings.logo_center -%}
{%- endif -%}
{% render ‘predictive-search’, id: ‘header-search’, show_search_types: show_search_types %}
{%- if section.settings.enable_search and search_is_minimised -%}
{%- unless section.settings.logo_center and section.settings.minimise_search_mobile == false and section.settings.minimise_search_desktop -%}
{%- liquid
if section.settings.logo_center and section.settings.minimise_search_mobile
assign search_button_class = "md:hidden"
elsif section.settings.minimise_search_mobile and section.settings.minimise_search_desktop == false
assign search_button_class = "md:hidden"
elsif section.settings.minimise_search_mobile == false and section.settings.minimise_search_desktop
assign search_button_class = "hidden md:block"
endif
-%}
{% render 'icon-search' %}
{{ 'general.icon_labels.search' | t }}
{%- endunless -%}
{%- endif -%}
{%- if shop.customer_accounts_enabled -%}
{%- if customer -%}
{% render 'icon-customer' %}
{{ 'sections.header.account' | t }}
{%- else -%}
{% render 'icon-customer' %}
{{ 'sections.header.log_in' | t }}
{%- endif -%}
{%- endif -%}
<a class=“header__icon{% if settings.cart_shaking and cart != empty %} header__icon–cart-shake has-motion{% endif %} relative text-current” id=“cart-icon” href=“{{ routes.cart_url }}”{% if settings.cart_shaking and cart != empty %} data-shake-frequency=“{{ settings.cart_shaking_frequency }}”{% endif %}{% if settings.preload_links %} data-no-instant{% endif %}>
{%- if settings.cart_icon == ‘bag’ -%}
{%- render ‘icon-bag’ -%}
{{ ‘sections.header.bag’ | t }}
{%- elsif settings.cart_icon == ‘basket’ -%}
{%- render ‘icon-basket’ -%}
{{ ‘sections.header.basket’ | t }}
{%- else -%}
{%- render ‘icon-cart’ -%}
{{ ‘sections.header.cart’ | t }}
{%- endif -%}
{%- if cart != empty -%}
{%- if cart.item_count < 10000 -%}
{{ cart.item_count }}
{%- endif -%}
{{ 'sections.header.cart_count' | t: count: cart.item_count }}
{%- endif -%}
{%- if section.settings.menu != blank -%}
{%- assign total_promo_count = 0 -%}
{%- assign featured_links = section.settings.menu_featured_link | downcase | replace: ', ‘, ‘,’ | replace: ’ ,’, ‘,’ | split: ‘,’ -%}
<main-menu class=“main-menu{% if section.settings.mobile_menu_position == “burger-left” %} main-menu–left-mob{% endif %}” data-menu-sensitivity=“200”>
{{ 'general.icon_labels.menu' | t }}
-
{%- for link in section.settings.menu.links -%}
{%- assign link_title_downcase = link.title | downcase -%}
-
{%- if link.links == blank -%}
{{- link.title | escape -}}
{%- else -%}
{%- liquid
assign mega_nav = false
assign link_title_downcase = link.title | strip | downcase
for block in section.blocks
assign mega_name_titles = block.settings.title | downcase | replace: ', ', ',' | replace: ' ,', ',' | split: ','
if mega_name_titles contains link_title_downcase
assign mega_nav = block
break
endif
endfor
-%}
<details{% if mega_nav %} class=“js-mega-nav” {{ mega_nav.shopify_attributes }}{% endif %}>
{{ link.title | escape }}{% render 'icon-chevron-down' %}
{%- liquid assign child_nav_classes = "" assign grandchild_nav_classes = "" assign flex_auto = false assign has_badges = false assign mega_nav_has_columns = falseif mega_nav.type == “columns” or mega_nav.type == “sidebar”
assign mega_nav_has_columns = true
endifif mega_nav == false
assign child_nav_classes = “child-nav–dropdown”
else
assign has_grandchildren_menus = false
for child_link in link.links
if child_link.links != blank
assign has_grandchildren_menus = true
break
endif
endforassign promo_count = 0
if mega_nav.settings.promo1_content != blank or mega_nav.settings.promo1_image != blank
assign promo_count = promo_count | plus: 1
endif
if mega_nav.settings.promo2_content != blank or mega_nav.settings.promo2_image != blank
assign promo_count = promo_count | plus: 1
endif
if mega_nav.settings.promo3_content != blank or mega_nav.settings.promo3_image != blank
assign promo_count = promo_count | plus: 1
endif
assign total_promo_count = total_promo_count | plus: promo_countassign badge_colors = “”
if mega_nav_has_columns
if mega_nav.settings.badge1_link != blank and mega_nav.settings.badge1_text != blank
assign has_badges = true
assign badge1 = mega_nav.settings.badge1_link | downcase | replace: ', ‘, ‘,’ | replace: ’ ,’, ‘,’ | split: ‘,’
assign badge_colors = “–badge-1-color:” | append: mega_nav.settings.badge1_color.rgb | append: “;”
endifif mega_nav.settings.badge2_link != blank and mega_nav.settings.badge2_text != blank
assign has_badges = true
assign badge2 = mega_nav.settings.badge2_link | downcase | replace: ', ‘, ‘,’ | replace: ’ ,’, ‘,’ | split: ‘,’
assign badge_colors = badge_colors | append: “–badge-2-color:” | append: mega_nav.settings.badge2_color.rgb | append: “;”
endifif mega_nav.settings.badge3_link != blank and mega_nav.settings.badge3_text != blank
assign has_badges = true
assign badge3 = mega_nav.settings.badge3_link | downcase | replace: ', ‘, ‘,’ | replace: ’ ,’, ‘,’ | split: ‘,’
assign badge_colors = badge_colors | append: “–badge-3-color:” | append: mega_nav.settings.badge3_color.rgb | append: “;”
endif
endifassign num_columns = link.links | size
if mega_nav.type == “columns”
if num_columns < 4 and promo_count > 0
assign child_nav_classes = “md:flex md:nav-gap-x-16”
assign flex_auto = true
else
assign child_nav_classes = “md:grid md:nav-gap-x-16 md:nav-gap-y-4 md:grid-cols-3”
if mega_nav.settings.promo_position == “bottom” or promo_count == 0
assign child_nav_classes = child_nav_classes | append: " lg:grid-cols-4"
else
assign child_nav_classes = child_nav_classes | append: " self-start xl:grid-cols-4"
endif
endif
elsif mega_nav.type == “sidebar”
assign grandchild_nav_classes = “md:grid md:nav-gap-x-8 md:nav-gap-y-4 md:nav-grid-cols-4”
endif
endif
-%}{% if mega_nav %}{% endif %}{%- endif -%} {%- else -%}-
{% render 'icon-chevron-left' %} {{- 'general.navigation.back' | t -}}
- {{- link.title | escape -}}
{%- for child_link in link.links -%}
{%- liquid
assign child_link_title_downcase = child_link.title | downcase
assign collection_image = falseif has_grandchildren_menus == false and mega_nav.type == “pills”
assign pills_without_grandchildren = true
else
assign pills_without_grandchildren = false
endifif mega_nav and mega_nav.settings.collection_images != “none” and pills_without_grandchildren == false and child_link.type == ‘collection_link’
assign collection_image = true
if mega_nav.settings.collection_images == “standard”
assign collection_image_width = 30
elsif mega_nav.settings.collection_images == “large”
assign collection_image_width = 40
endif
assign collection_image_size = collection_image_width
assign collection_image_size_large = collection_image_size | times: 2
assign collection_image_size_xlarge = collection_image_size | times: 4
endif
-%}<li{% if flex_auto %} class=“flex-auto”{% endif %}>
{%- if child_link.links == blank -%}
{%- if collection_image -%}<div class=“child-nav__item–toggle flex items-center child-nav__item-collection-image{% if mega_nav and mega_nav_has_columns and mega_nav.settings.show_underline == false %} nav__item–no-underline{% endif %}{% if mega_nav.type == “sidebar” %} js-sidebar-hover{% endif %}”>{%- endif -%}
{%- if collection_image -%}
{%- liquid
assign alt_text = child_link.title | escape
if mega_nav.settings.collection_use_product_image
assign collection_image_object = collections[child_link.object.handle].all_products.first
else
assign collection_image_object = child_link.object
endif
-%}{% render 'image', image: collection_image_object, src_width: collection_image_size_large, srcset_2x: true, class: "img-fit", alt_text: alt_text %}{%- if mega_nav.type == “pills” -%}
{% render 'image', image: collection_image_object, src_width: collection_image_size_xlarge, srcset_2x: true, alt_text: alt_text %}{%- endif -%} {%- endif -%} {{- child_link.title | escape -}} {% if has_grandchildren_menus and mega_nav.type == "pills" %}{% render 'icon-chevron-right' %}{% endif %} {%- if collection_image -%}{%- endif -%}{%- if collection_image -%} {%- liquid assign alt_text = child_link.title | escape if mega_nav.settings.collection_use_product_image assign collection_image_object = collections[child_link.object.handle].all_products.first else assign collection_image_object = child_link.object endif -%}{% render 'image', image: collection_image_object, src_width: collection_image_size_large, srcset_2x: true, class: "img-fit", alt_text: alt_text %}{%- endif -%} {{- child_link.title | escape -}}{% render 'icon-chevron-down' %}{%- if collection_image and mega_nav and mega_nav.type == "pills" -%} {%- liquid if mega_nav.settings.collection_use_product_image assign collection_image_object = collections[child_link.object.handle].all_products.first else assign collection_image_object = child_link.object endif -%}{% render 'image', image: collection_image_object, src_width: collection_image_size_xlarge, srcset_2x: true, alt_text: alt_text %}{%- endif -%}{%- liquid
assign image_grid_classes = “”
if mega_nav.type == “sidebar”
for grandchild_link in child_link.links
if mega_nav.settings.show_collection_images and grandchild_link.type == ‘collection_link’
assign image_grid_classes = “main-nav__grandchild-grid grid grid-cols-2 gap-theme”
break
elsif mega_nav.settings.show_product_images and grandchild_link.type == ‘product_link’
assign image_grid_classes = “main-nav__grandchild-grid grid grid-cols-2 gap-theme”
break
endif
endfor
endif
-%}-
{%- for grandchild_link in child_link.links -%}
-
{%- assign grandchild_link_title_downcase = grandchild_link.title | downcase -%}
{%- liquid
assign grandchild_image = null
if mega_nav.type == "sidebar"
if mega_nav.settings.show_collection_images and grandchild_link.type == 'collection_link'
if mega_nav.settings.sidebar_link_use_product_image
assign grandchild_image = collections[grandchild_link.object.handle].all_products.first
if grandchild_image == blank
assign grandchild_image = grandchild_link.object
endif
else
assign grandchild_image = grandchild_link.object
endif
elsif mega_nav.settings.show_product_images and grandchild_link.type == 'product_link'
assign grandchild_image = grandchild_link.object
endif
endif
-%}
{%- if grandchild_image -%}
{%- if mega_nav.settings.aspect_ratio == "natural" -%} {%- capture image -%}{% render 'image', image: grandchild_image, src_width: 300, class: 'w-full', alt_text: grandchild_link.title %}{%- endcapture -%} {%- else -%} {%- liquid assign image_width = 300 assign image_height = image_width | divided_by: mega_nav.settings.aspect_ratio | round -%} {%- capture image -%}{%- endif -%}{%- endcapture -%} {%- endif -%}
{%- unless image contains “Liquid error” -%}
{{ image }}
{%- endunless -%}
{%- endfor -%}
- {{- 'sections.header.go_to' | t: title: child_link.title -}}{% render 'icon-chevron-right' %} {%- endif -%}
{%- if section.settings.repeat_links and child_link.url != ‘#’ -%}
{%- endfor -%}
-
{%- if mega_nav and promo_count > 0 -%}
{%- liquid
if mega_nav.settings.promo_min_height > 250
assign promo_padding = "p-8"
elsif mega_nav.settings.promo_min_height > 150
assign promo_padding = "p-6"
else
assign promo_padding = "p-4"
endif
-%}
{%- if mega_nav.settings.promo1_content != blank or mega_nav.settings.promo1_image != blank -%}
{%- liquid
assign is_link = false
if mega_nav.settings.promo1_link_url != blank
unless mega_nav.settings.promo1_content contains “<a”
assign is_link = true
endunless
endif
-%}
{%- if is_link -%}
{%- else -%}
{%- if mega_nav.settings.promo2_content != blank or mega_nav.settings.promo2_image != blank -%}
{%- liquid
assign is_link = false
if mega_nav.settings.promo2_link_url != blank
unless mega_nav.settings.promo2_content contains “<a”
assign is_link = true
endunless
endif
-%}
{%- if is_link -%}
{%- else -%}
{%- if mega_nav.settings.promo3_content != blank or mega_nav.settings.promo3_image != blank -%}
{%- liquid
assign is_link = false
if mega_nav.settings.promo3_link_url != blank
unless mega_nav.settings.promo3_content contains “<a”
assign is_link = true
endunless
endif
-%}
{%- if is_link -%}
{%- else -%}
{%- if mega_nav -%}
{%- if section.settings.quicklinks_menu != blank or section.settings.cta_show -%}
-
{% for link in section.settings.quicklinks_menu.links %}
- {{- link.title | escape -}} {%- liquid if forloop.index == 4 break endif -%} {% endfor %}
- {%- if section.settings.cta_icon != "none" -%} {%- render 'icon', icon: section.settings.cta_icon, width: 17, height: 17 -%} {%- endif -%} {%- if section.settings.cta_label != blank -%} {{ section.settings.cta_label }} {%- endif -%} {%- endif -%}
{%- if section.settings.cta_show -%}
{%- assign cta_bg_color_hover = section.settings.cta_bg_color | color_mix: section.settings.cta_text_color, 85 | color_lighten: 3 -%}
{%- if has_mega_nav_pills -%}
{%- endif -%}{%- if has_mega_nav_columns -%}
{%- endif -%}{%- if has_mega_nav_sidebar -%}
{%- endif -%}{%- if total_promo_count > 0 -%}
{%- endif -%}{% javascript %}
customElements.whenDefined(‘details-disclosure’).then(() => {
class NavMenu extends DetailsDisclosure {
constructor() {
super();
if(this.matches(‘.js-mega-nav’)) {
this.reset(false);
window.addEventListener(‘on:breakpoint-change’, this.reset.bind(this));
}
}
reset(resize = true) {
const isLargeScreen = window.matchMedia(theme.mediaQueries.md).matches;
this.disclosure.open = isLargeScreen;
if (isLargeScreen) {
this.toggle.setAttribute(‘tabindex’, ‘-1’);
} else {
this.toggle.removeAttribute(‘tabindex’);
}
}
handleToggle(e) {
if (!(this.matches(‘.js-mega-nav’) && window.matchMedia(theme.mediaQueries.md).matches)) {
super.handleToggle(e);
}
}
}
customElements.define(‘nav-menu’, NavMenu);
});
{% endjavascript %}
{% render ‘structured-data-header’ %}
{% schema %}
{
“name”: “Header”,
“class”: “cc-header”,
“settings”: [
{
“type”: “header”,
“content”: “Layout”
},
{
“type”: “checkbox”,
“id”: “enable_sticky”,
“label”: “Enable sticky header”,
“default”: false
},
{
“type”: “select”,
“id”: “mobile_menu_position”,
“label”: “Mobile menu icon position”,
“options”: [
{
“value”: “burger-left”,
“label”: “Left”
},
{
“value”: “burger-right”,
“label”: “Right”
}
],
“default”: “burger-right”
},
{
“type”: “header”,
“content”: “Logo”
},
{
“type”: “text”,
“id”: “logo_text”,
“label”: “Logo text”,
“info”: “Only shows if a logo image is not specified.”,
“placeholder”: “Use store name”
},
{
“type”: “select”,
“id”: “logo_type_scale”,
“label”: “Logo text scale”,
“info”: “Logo text size is calculated from the body font size.”,
“options”: [
{
“value”: “1.5”,
“label”: “Small”
},
{
“value”: “2”,
“label”: “Medium”
},
{
“value”: “2.5”,
“label”: “Large”
},
{
“value”: “3”,
“label”: “Extra large”
}
],
“default”: “2”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Logo image”
},
{
“type”: “range”,
“id”: “logo_width”,
“min”: 50,
“max”: 300,
“step”: 10,
“unit”: “px”,
“label”: “Maximum logo width”,
“default”: 150
},
{
“type”: “checkbox”,
“id”: “logo_h1”,
“label”: “Make the logo an