Add a clickable button to header / navigation bar

[davidmarkkus]

Hi,

I would like to add a clickable button to my Minion theme on the Header/Navigation bar top right, left to the shop bag of my website:

https://www.markkus.fr

Many thanks for your help

[saim007]

Hi @davidmarkkus Just follow steps

1. Go to Online Store

2. Edit Code

3. Search for header.liquid file and find for this code

4. Just below this code paste my below code

Click Here

You can change the link whatever you want to change in href=“#”

Please like and mark as solve!

[davidmarkkus]

Thanks for your proposition but it’s not working on my side.

I have this code now:

{%- render 'cart-icon-bubble' -%}

{%- endif -%}

Click Here

[miguel_liquify]

Can you provide the code of your header.liquid?

[davidmarkkus]

header{ opacity: 0; transition: opacity 1s var(--animation-bezier); } .header{ display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; {%- if section.settings.show_search == false or section.settings.header_layout == 'header-layout-vertical' -%} padding: 25px 0; {%- else -%} padding: 20px 0; {%- endif -%} } .header.logo-to-left{ grid-template-columns: auto 1fr auto; gap: 30px; } .header>*{ display: flex; flex-wrap: wrap; align-items: center; align-content: center; } @media (min-width: 993px){ .header__mobile{ display: none; } .header__drawer{ display: none; } } @media (max-width: 992px){ .header__desktop{ display: none; } .header{ padding: 13px 0; } } .header__heading{ margin-top: 0; margin-bottom: 0; } [class*="submenu-design__"]{ display: none; opacity: 0; visibility: hidden; pointer-events: none; } .list-menu--inline{ display: inline-flex; flex-wrap: wrap; --row-gap: 10px; --column-gap: 20px; gap: var(--row-gap) var(--column-gap); } .list-menu--classic .list-menu--inline{ --row-gap: 16px; --column-gap: 24px; } {%- if section.settings.icons_color != "rgba(0,0,0,0)" -%} body .tiles-menu .tiles-menu-item svg:first-child, body .menu-drawer__menu-item:not(.menu-drawer__back-button) svg:first-child, body .vertical-menu-item svg:first-child{ opacity:1; } body .tiles-menu .tiles-menu-item svg:first-child path, body .menu-drawer__menu-item:not(.menu-drawer__back-button) svg:first-child path, body .vertical-menu-item svg:first-child path{ --color-base:{{ section.settings.icons_color }}; } {%- endif -%} {{ 'component-inputs.css' | asset_url | stylesheet_tag }} {{ 'component-menu-drawer.css' | asset_url | stylesheet_tag }} {{ 'component-menu-submenu.css' | asset_url | stylesheet_tag }} {{ 'component-list-menu.css' | asset_url | stylesheet_tag }} {{ 'section-header.css' | asset_url | stylesheet_tag }} {%- if settings.show_free_delivery -%} {{ 'component-free-delivery-bar.css' | asset_url | stylesheet_tag }} {%- endif -%}

{%- case section.settings.header_layout -%}
{%- when ‘header-layout-vertical’ -%}

{{ 'component-vertical-menu.css' | asset_url | stylesheet_tag }} {%- when 'header-layout-tiles' -%} {{ 'component-tiles-menu.css' | asset_url | stylesheet_tag }} {%- endcase -%}

{%- if section.settings.header_layout == ‘header-layout-tiles’ -%}

{%- if section.settings.color_tile_base == "rgba(0,0,0,0)" -%} .tiles-menu .tiles-menu-item{ --color-secondary-background:rgba(0,0,0,0); padding: 0; } {%- else -%} {%- assign accent_brightness = section.settings.color_tile_base | color_extract: 'lightness' -%} .tiles-menu .tiles-menu-item{ --color-secondary-background:{{ section.settings.color_tile_base }}; {% if accent_brightness < 50 %} --color-base: var(--auto-text-color-button-light); {%- else -%} --color-base: var(--auto-text-color-button-dark); {%- endif -%} } {%- endif -%} {%- if section.settings.color_tile_active != "rgba(0,0,0,0)" -%} {%- if section.settings.color_tile_base == "rgba(0,0,0,0)" -%} .tiles-menu > *:hover > .tiles-menu-item, .tiles-menu>*>.tiles-menu-item.tiles-menu-item--active{ --color-base:rgba(0,0,0,0); --auto-text-color--with-base-color:{{ section.settings.color_tile_active }}; } {%- else -%} .tiles-menu > *:hover > .tiles-menu-item, .tiles-menu>*>.tiles-menu-item.tiles-menu-item--active{ --color-base:{{ section.settings.color_tile_active }}; {%- assign accent_brightness = section.settings.color_tile_active | color_extract: 'lightness' -%} {%- if accent_brightness < 50 -%} --auto-text-color--with-base-color: #ffffff; {%- else -%} --auto-text-color--with-base-color: {{ settings.color_base }}; {%- endif -%} } {%- endif -%} {%- endif -%}

{%- endif -%}
{%- if section.settings.header_layout == ‘header-layout-vertical’ and section.settings.color_button != “rgba(0,0,0,0)” -%}

{%- assign accent_brightness = section.settings.color_button | color_extract: 'lightness' -%} .vertical-menu__button{ --background:{{ section.settings.color_button }}; {%- if accent_brightness < 50 -%} --color: #ffffff; {%- else -%} {%- assign accent_brightness = settings.color_base | color_extract: 'lightness' -%} {%- if accent_brightness < 50 -%} --color: var(--color-base); {% else %} --color: #000000; {% endif %}; {%- endif -%} }

{%- endif -%}

{%- if settings.cart_type == "drawer" -%} {{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }} {%- endif -%}

{%- assign mega_menu_index = ‘|’ -%}
{%- assign svg_icons = ‘’ -%}
{%- assign badges = ‘’ -%}
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when ‘main_menu_icons’ -%}
{%- assign svg_icons = block -%}
{%- when ‘mega_menu’ -%}
{%- assign mega_menu_index = mega_menu_index | append: block.settings.mega_menu_item_name | append: ‘%%’ | append: forloop.index0 | append: ‘|’ -%}
{%- endcase -%}
{%- endfor -%}
{%- assign visible_items_count = section.settings.visible_items_count | plus: 0 -%}

{%- if section.settings.header_layout == ‘header-layout-vertical’ and section.settings.menu != blank -%}

{%- endif -%}

{%- if section.settings.show_color_line -%}

{%- endif -%} {%- if section.settings.enable_sticky_header and template.name != 'product' and template.name != 'collection' -%} {%- endif -%}

{%- capture logo -%}

{%- assign logo_svg = section.settings.logo_svg_mobile -%} {%- if logo_svg == blank -%}{%- assign logo_svg = section.settings.logo_svg -%}{%- endif -%} {%- assign image_src=section.settings.logo_mobile -%} {%- if image_src== blank -%}{%- assign image_src=section.settings.logo -%}{%- endif -%} {%- assign logo_max_width = section.settings.logo_max_width_mobile -%} {%- if logo_svg != blank -%} {%- assign width = logo_svg | split: 'width="' | last | split: '"' | first | times: 1.0 -%} {%- assign height = logo_svg | split: 'height="' | last | split: '"' | first | plus: 0 -%} {%- assign aspect_ratio = height | divided_by: width -%}

{{ logo_svg }}

{%- elsif image_src -%} {%- assign image_size_2x = logo_max_width | times: 2 | at_most: 5760 -%} {%- else -%} {{ shop.name }} {%- endif -%}

{%- endcapture -%}

{% if section.settings.logo_position_mobile == ‘left’ %}{{ logo }}{% endif %}

{%- render "icon-hamburger" -%}

{%- render "icon-close" -%} {%- unless section.settings.open_search -%} {%- render "header-search" show_search:section.settings.show_search, fullwidth: true, mobile: true -%} {%- endunless -%}

{%- if section.settings.menu != blank -%} {%- render "menu-drawer", menu_font_weight:section.settings.menu_font_weight, linklist: section.settings.menu.links, desktop_menu_type: section.settings.header_layout, icons: svg_icons -%} {%- endif -%} {%- if section.settings.secondary_menu != blank -%} {%- render "menu-drawer-secondary" linklist: section.settings.secondary_menu.links -%} {%- endif -%}

{%- if shop.customer_accounts_enabled -%}
<a href=“{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}” class=“body2{% if section.settings.menu_font_weight == “strong” %} strong{% endif %} link w-full drawer__icon-account a–remove-hover-underline color-base”>
{% render “icon-account” %}

{%- liquid
if customer
echo ‘customer.account_fallback’ | t
else
echo ‘customer.log_in’ | t
endif
-%}


{%- endif -%}

{% if section.settings.logo_position_mobile == ‘center’ %}{{ logo }}{% endif %}

{%- if settings.cart_type == “catalog_mode” -%}
{% if section.settings.logo_position_mobile == ‘center’ %}

{% endif %}
{%- else -%}

{%- render 'cart-icon-bubble' -%}

{%- endif -%}

{%- if section.settings.open_search and section.settings.show_search -%}

{%- render "header-search" show_search:section.settings.show_search, fullwidth: true, mobile: true -%}

{%- endif -%}

{%- if section.settings.secondary_menu != blank and section.settings.header_layout == ‘header-layout-classic’ -%}

{% render 'header-menu-secondary' linklist: section.settings.secondary_menu.links animation: 'menu--animation-underline' %}

{%- endif -%}

{%- capture logo -%} {%- if request.page_type == 'index' -%}

{%- else -%}

{%- endif -%} {%- assign logo_svg = section.settings.logo_svg -%} {%- assign image_src=section.settings.logo -%} {%- assign logo_max_width = section.settings.logo_max_width -%} {%- if logo_svg != blank -%} {%- assign width = logo_svg | split: 'width="' | last | split: '"' | first | times: 1.0 -%} {%- assign height = logo_svg | split: 'height="' | last | split: '"' | first | plus: 0 -%} {%- assign aspect_ratio = height | divided_by: width -%}

{{ logo_svg }}

{%- elsif image_src -%} {%- assign image_size_2x = logo_max_width | times: 2 | at_most: 5760 -%} {%- else -%} {{ shop.name }} {%- endif -%} {%- if request.page_type != 'index' -%}

{%- else -%}

{%- endif -%} {%- endcapture -%}

{% if section.settings.logo_position == ‘left’ %}{{ logo }}{% endif %}

{%- liquid
case section.settings.header_layout
when ‘header-layout-classic’
if section.settings.menu != blank
render ‘header-menu’, linklist:section.settings.menu.links, animation:‘menu–animation-underline’, mega_menu_index:mega_menu_index, menu_font_weight:section.settings.menu_font_weight
else
echo ‘

’
endif
else
if section.settings.secondary_menu != blank
render ‘header-menu-secondary’ linklist:section.settings.secondary_menu.links animation:‘menu–animation-underline’
else
echo ‘

’
endif
endcase
-%}

{% if section.settings.logo_position == ‘center’ %}{{ logo }}{% endif %}

{%- if section.settings.header_layout != 'header-layout-vertical' -%} {%- render "header-search" show_search:section.settings.show_search, fullwidth: false -%} {%- endif -%}

{%- if shop.customer_accounts_enabled -%} {% render "icon-account" %} {%- liquid if customer echo 'customer.account_fallback' | t else echo 'customer.log_in' | t endif -%} {%- endif -%}

{%- unless settings.cart_type == “catalog_mode” -%}

{%- render ‘cart-icon-bubble’ -%}

{%- endunless -%}

{%- if section.settings.header_layout == ‘header-layout-vertical’ -%}
{%- if section.settings.menu != blank or section.settings.show_search -%}

{%- if section.settings.menu != blank -%}

{%- render "header-menu-vertical", linklist:section.settings.menu.links, mega_menu_index:mega_menu_index, icons:svg_icons, visible_items_count:visible_items_count, menu_font_weight:section.settings.menu_font_weight -%}

{%- render "header-search" show_search:section.settings.show_search, fullwidth: true -%}

{%- else -%}

{%- render "header-search" show_search:section.settings.show_search, fullwidth: true -%}

{%- endif -%}

{%- endif -%} {%- elsif section.settings.header_layout == 'header-layout-tiles' and section.settings.menu != blank -%}

{%- render "header-menu-tiles", linklist:section.settings.menu.links, mega_menu_index:mega_menu_index, icons:svg_icons, visible_items_count:visible_items_count, menu_font_weight:section.settings.menu_font_weight -%}

{%- endif -%}

{%- if section.settings.enable_sticky_header and template.name != 'product' and template.name != 'collection' -%} {%- endif -%}

{%- if settings.cart_type == “notification” -%}
{% render ‘cart-notification’ %}
{%- endif -%}

{%- if settings.cart_type == “drawer” -%}

{%- endif -%}

{% if request.design_mode and template == ‘index’ %}

{% endif %}

{%- if section.settings.enable_sticky_header and template.name != ‘product’ and template.name != ‘collection’ -%}

{%- endif -%}

{%- if request.page_type == ‘index’ -%}
{% assign potential_action_target = request.origin | append: routes.search_url | append: “?q={search_term_string}” %}

{%- endif -%}

{% schema %}
{
“name”: “t:sections.header.name”,
“class”: “section-header”,
“settings”: [
{
“type”: “select”,
“id”: “header_layout”,
“options”: [
{
“value”: “header-layout-vertical”,
“label”: “t:sections.header.settings.header_layout.options__1.label”
},
{
“value”: “header-layout-tiles”,
“label”: “t:sections.header.settings.header_layout.options__2.label”
},
{
“value”: “header-layout-classic”,
“label”: “t:sections.header.settings.header_layout.options__3.label”
}
],
“default”: “header-layout-classic”,
“label”: “t:sections.header.settings.header_layout.label”,
“info”: “t:sections.header.settings.header_layout.info”
},
{
“type”: “link_list”,
“id”: “menu”,
“default”: “main-menu”,
“label”: “t:sections.header.settings.menu.label”
},
{
“type”: “link_list”,
“id”: “secondary_menu”,
“default”: “main-menu”,
“label”: “t:sections.header.settings.secondary_menu.label”
},
{
“type”: “select”,
“id”: “width”,
“options”: [
{
“value”: “page-width”,
“label”: “t:sections.general.settings.width.options__boxed.label”
},
{
“value”: “page-wide”,
“label”: “t:sections.general.settings.width.options__wide.label”
}
],
“default”: “page-width”,
“label”: “t:sections.general.settings.width.label”,
“info”: “t:sections.general.settings.width.info”
},
{
“type”: “checkbox”,
“id”: “show_search”,
“default”: true,
“label”: “t:sections.header.settings.show_search.label”
},
{
“type”: “checkbox”,
“id”: “open_search”,
“default”: true,
“label”: “t:sections.header.settings.open_search.label”
},
{
“type”: “checkbox”,
“id”: “enable_sticky_header”,
“default”: true,
“label”: “t:sections.header.settings.enable_sticky_header.label”,
“info”: “t:sections.header.settings.enable_sticky_header.info”
},
{
“type”: “checkbox”,
“id”: “show_color_line”,
“default”: true,
“label”: “t:sections.header.settings.show_line_separator.label”
},
{
“type”: “select”,
“id”: “menu_font_weight”,
“options”: [
{
“value”: “font-weight-normal”,
“label”: “t:sections.header.settings.menu_font_weight.options__1.label”
},
{
“value”: “strong”,
“label”: “t:sections.header.settings.menu_font_weight.options__2.label”
}
],
“default”: “strong”,
“label”: “t:sections.header.settings.menu_font_weight.label”
},
{
“type”: “color”,
“id”: “icons_color”,
“label”: “t:sections.header.settings.icons_color.label”,
“info”: “t:sections.header.settings.icons_color.info”,
“default”: “rgba(0,0,0,0)”
},
{
“type”: “header”,
“content”: “t:sections.header.settings.logo_desktop.content”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “t:sections.header.settings.logo.label”
},
{
“type”: “html”,
“id”: “logo_svg”,
“label”: “t:sections.header.settings.logo_svg.label”,
“info”: “t:sections.header.settings.logo_svg.info”
},
{
“type”: “range”,
“id”: “logo_max_width”,
“min”: 50,
“max”: 250,
“step”: 10,
“default”: 100,
“unit”: “t:sections.header.settings.logo_width.unit”,
“label”: “t:sections.header.settings.logo_width.label”
},
{
“type”: “select”,
“id”: “logo_position”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.general.settings.texts_aligment.options__left.label”
},
{
“value”: “center”,
“label”: “t:sections.general.settings.texts_aligment.options__center.label”
}
],
“default”: “center”,
“label”: “t:sections.header.settings.logo_aligment.label”
},
{
“type”: “header”,
“content”: “t:sections.header.settings.logo_mobile.content”
},
{
“type”: “image_picker”,
“id”: “logo_mobile”,
“label”: “t:sections.header.settings.logo.label”
},
{
“type”: “html”,
“id”: “logo_svg_mobile”,
“label”: “t:sections.header.settings.logo_svg.label”,
“info”: “t:sections.header.settings.logo_svg.info”
},
{
“type”: “range”,
“id”: “logo_max_width_mobile”,
“min”: 50,
“max”: 150,
“step”: 10,
“default”: 100,
“unit”: “t:sections.header.settings.logo_width.unit”,
“label”: “t:sections.header.settings.logo_width.label”
},
{
“type”: “select”,
“id”: “logo_position_mobile”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.general.settings.texts_aligment.options__left.label”
},
{
“value”: “center”,
“label”: “t:sections.general.settings.texts_aligment.options__center.label”
}
],
“default”: “center”,
“label”: “t:sections.header.settings.logo_aligment.label”
},
{
“type”: “header”,
“content”: “t:sections.header.settings.header_tiles.content”
},
{
“type”: “range”,
“id”: “visible_items_count”,
“min”: 2,
“max”: 10,
“step”: 1,
“default”: 9,
“label”: “t:sections.header.settings.visible_items_count.label”
},
{
“type”: “range”,
“id”: “icons_size”,
“min”: 20,
“max”: 48,
“step”: 2,
“default”: 20,
“label”: “t:sections.header.settings.icons_size.label”
},
{
“type”: “color”,
“id”: “color_tile_base”,
“default”: “#F6F7FA”,
“label”: “t:sections.header.settings.color_tile_base.label”,
“info”: “t:sections.header.settings.color_tile_base.info”
},
{
“type”: “color”,
“id”: “color_tile_active”,
“default”: “rgba(0,0,0,0)”,
“label”: “t:sections.header.settings.color_tile_active.label”
},
{
“type”: “header”,
“content”: “t:sections.header.settings.header_vertical.content”
},
{
“type”: “color”,
“id”: “color_button”,
“default”: “rgba(0,0,0,0)”,
“label”: “t:sections.header.settings.color_button.label”
},
{
“type”: “select”,
“id”: “sections_count”,
“options”: [
{
“value”: “0”,
“label”: “t:sections.header.settings.sections_count.options__1.label”
},
{
“value”: “1”,
“label”: “t:sections.header.settings.sections_count.options__2.label”
},
{
“value”: “2”,
“label”: “t:sections.header.settings.sections_count.options__3.label”
}
],
“default”: “1”,
“label”: “t:sections.header.settings.sections_count.label”
}
],
“blocks”: [
{
“type”: “mega_menu”,
“name”: “t:sections.header.blocks.mega_menu.name”,
“settings”: [
{
“type”: “text”,
“id”: “mega_menu_item_name”,
“label”: “t:sections.header.blocks.mega_menu.settings.mega_menu_item_name.label”
},
{
“type”: “select”,
“id”: “grid”,
“options”: [
{
“value”: “col-6”,
“label”: “2”
},
{
“value”: “col-4”,
“label”: “3”
},
{
“value”: “col-3”,
“label”: “4”
},
{
“value”: “col-one_fifth”,
“label”: “5”
}
],
“default”: “col-3”,
“label”: “t:sections.header.blocks.mega_menu.settings.grid.label”
},
{
“type”: “header”,
“content”: “t:sections.header.blocks.mega_menu.settings.header_1.content”
},
{
“type”: “checkbox”,
“id”: “show_banner”,
“default”: true,
“label”: “t:sections.header.blocks.mega_menu.settings.show_banner.label”
},
{
“type”: “url”,
“id”: “banner_link”,
“label”: “t:sections.header.blocks.mega_menu.settings.banner_link.label”
},
{
“type”: “image_picker”,
“id”: “image”,
“label”: “t:sections.header.blocks.mega_menu.settings.image.label”
},
{
“type”: “text”,
“id”: “heading”,
“default”: “Free Shipping”,
“label”: “t:sections.header.blocks.mega_menu.settings.heading.label”
},
{
“type”: “textarea”,
“id”: “text”,
“default”: “No code needed, just head for checkout!”,
“label”: “t:sections.header.blocks.mega_menu.settings.text.label”
},
{
“type”: “text”,
“id”: “button_label”,
“default”: “Shop Now!”,
“label”: “t:sections.header.blocks.mega_menu.settings.button_label.label”,
“info”: “t:sections.header.blocks.mega_menu.settings.button_label.info”
}
]
},
{
“type”: “main_menu_icons”,
“limit”: 1,
“name”: “t:sections.header.blocks.main_menu_icons.name”,
“settings”: [
{
“type”: “header”,
“content”: “t:sections.header.blocks.main_menu_icons.settings.header_1.content”
},
{
“type”: “text”,
“id”: “icon1”,
“default”: “dog”,
“label”: “t:sections.header.blocks.main_menu_icons.settings.svg_icon.label”
},
{
“type”: “image_picker”,
“id”: “icon_image1”,
“label”: “t:sections.header.blocks.main_menu_icons.settings.icon_image.label”,
“info”: “t:sections.header.blocks.main_menu_icons.settings.icon_image.info”
},
{
“type”: “header”,
“content”: “t:sections.header.blocks.main_menu_icons.settings.header_2.content”
},
{
“type”: “text”,
“id”: “icon2”,
“default”: “dog”,
“label”: “t:sections.header.blocks.main_menu_icons.settings.svg_icon.label”
},
{
“type”: “image_picker”,
“id”: “icon_image2”,
“label”: “t:sections.header.blocks.main_menu_icons.settings.icon_image.label”,
“info”: “t:sections.header.blocks.main_menu_icons.settings.icon_image.info”
},
{
“type”: “header”,
“content”: “t:sections.header.blocks.main_menu_icons.settings.header_3.content”
},
{
“type”: “text”,
“id”: “icon3”,
“default”: “dog”,
“label”: “t:sections.header.blocks.main_menu_icons.settings.svg_icon.label”
},
{
“type”: “image_picker”,
“id”: “icon_image3”,
“label”: “t:sections.header.blocks.main_menu_icons.settings.icon_image.label”,
“info”: “t:sections.header.blocks.main_menu_icons.settings.icon_image.info”
},
{
“type”: “header”,
“content”: “t:sections.header.blocks.main_menu_icons.settings.header_4.content”
},
{
“type”: “text”,
“id”: “icon4”,
“default”: “dog”,
“label”: “t:sections.header.blocks.main_menu_icons.settings.svg_icon.label”
},
{
“type”: “image_picker”,
“id”: “icon_image4”,
“label”: “t:sections.header.blocks.main_menu_icons.settings.icon_image.label”,
“info”: “t:sections.header.blocks.main_menu_icons.settings.icon_image.info”
},
{
“type”: “header”,
“content”: “t:sections.header.blocks.main_menu_icons.settings.header_5.content”
},
{
“type”: “text”,
“id”: “icon5”,
“default”: “dog”,
“label”: “t:sections.header.blocks.main_menu_icons.settings.svg_icon.label”
},
{
“type”: “image_picker”,
“id”: “icon_image5”,
“label”: “t:sections.header.blocks.main_menu_icons.settings.icon_image.label”,
“info”: “t:sections.header.blocks.main_menu_icons.settings.icon_image.info”
},
{
“type”: “header”,
“content”: “t:sections.header.blocks.main_menu_icons.settings.header_6.content”
},
{
“type”: “text”,
“id”: “icon6”,
“default”: “dog”,
“label”: “t:sections.header.blocks.main_menu_icons.settings.svg_icon.label”
},
{
“type”: “image_picker”,
“id”: “icon_image6”,
“label”: “t:sections.header.blocks.main_menu_icons.settings.icon_image.label”,
“info”: “t:sections.header.blocks.main_menu_icons.settings.icon_image.info”
},
{
“type”: “header”,
“content”: “t:sections.header.blocks.main_menu_icons.settings.header_7.content”
},
{
“type”: “text”,
“id”: “icon7”,
“default”: “dog”,
“label”: “t:sections.header.blocks.main_menu_icons.settings.svg_icon.label”
},
{
“type”: “image_picker”,
“id”: “icon_image7”,
“label”: “t:sections.header.blocks.main_menu_icons.settings.icon_image.label”,
“info”: “t:sections.header.blocks.main_menu_icons.settings.icon_image.info”
},
{
“type”: “header”,
“content”: “t:sections.header.blocks.main_menu_icons.settings.header_8.content”
},
{
“type”: “text”,
“id”: “icon8”,
“default”: “dog”,
“label”: “t:sections.header.blocks.main_menu_icons.settings.svg_icon.label”
},
{
“type”: “image_picker”,
“id”: “icon_image8”,
“label”: “t:sections.header.blocks.main_menu_icons.settings.icon_image.label”,
“info”: “t:sections.header.blocks.main_menu_icons.settings.icon_image.info”
},
{
“type”: “header”,
“content”: “t:sections.header.blocks.main_menu_icons.settings.header_9.content”
},
{
“type”: “text”,
“id”: “icon9”,
“default”: “dog”,
“label”: “t:sections.header.blocks.main_menu_icons.settings.svg_icon.label”
},
{
“type”: “image_picker”,
“id”: “icon_image9”,
“label”: “t:sections.header.blocks.main_menu_icons.settings.icon_image.label”,
“info”: “t:sections.header.blocks.main_menu_icons.settings.icon_image.info”
},
{
“type”: “header”,
“content”: “t:sections.header.blocks.main_menu_icons.settings.header_10.content”
},
{
“type”: “text”,
“id”: “icon10”,
“default”: “dog”,
“label”: “t:sections.header.blocks.main_menu_icons.settings.svg_icon.label”
},
{
“type”: “image_picker”,
“id”: “icon_image10”,
“label”: “t:sections.header.blocks.main_menu_icons.settings.icon_image.label”,
“info”: “t:sections.header.blocks.main_menu_icons.settings.icon_image.info”
},
{
“type”: “header”,
“content”: “t:sections.header.blocks.main_menu_icons.settings.header_11.content”
},
{
“type”: “text”,
“id”: “icon11”,
“default”: “dog”,
“label”: “t:sections.header.blocks.main_menu_icons.settings.svg_icon.label”
},
{
“type”: “image_picker”,
“id”: “icon_image11”,
“label”: “t:sections.header.blocks.main_menu_icons.settings.icon_image.label”,
“info”: “t:sections.header.blocks.main_menu_icons.settings.icon_image.info”
}
]
},
{
“type”: “badges”,
“limit”: 1,
“name”: “t:sections.header.blocks.badges.name”,
“settings”: [
{
“type”: “header”,
“content”: “#1”
},
{
“type”: “textarea”,
“id”: “badge_items_1”,
“label”: “t:sections.header.blocks.badges.settings.badge_items.label”,
“info”: “t:sections.header.blocks.badges.settings.badge_items.info”
},
{
“type”: “text”,
“id”: “badge_text_1”,
“label”: “t:sections.header.blocks.badges.settings.badge_text.label”,
“default”: “Sale”
},
{
“type”: “color”,
“id”: “badge_color_1”,
“label”: “t:sections.header.blocks.badges.settings.badge_color.label”,
“default”: “rgba(0,0,0,0)”
},
{
“type”: “header”,
“content”: “#2”
},
{
“type”: “textarea”,
“id”: “badge_items_2”,
“label”: “t:sections.header.blocks.badges.settings.badge_items.label”,
“info”: “t:sections.header.blocks.badges.settings.badge_items.info”
},
{
“type”: “text”,
“id”: “badge_text_2”,
“label”: “t:sections.header.blocks.badges.settings.badge_text.label”,
“default”: “Popular”
},
{
“type”: “color”,
“id”: “badge_color_2”,
“label”: “t:sections.header.blocks.badges.settings.badge_color.label”,
“default”: “rgba(0,0,0,0)”
},
{
“type”: “header”,
“content”: “#3”
},
{
“type”: “textarea”,
“id”: “badge_items_3”,
“label”: “t:sections.header.blocks.badges.settings.badge_items.label”,
“info”: “t:sections.header.blocks.badges.settings.badge_items.info”
},
{
“type”: “text”,
“id”: “badge_text_3”,
“label”: “t:sections.header.blocks.badges.settings.badge_text.label”,
“default”: “Popular”
},
{
“type”: “color”,
“id”: “badge_color_3”,
“label”: “t:sections.header.blocks.badges.settings.badge_color.label”,
“default”: “rgba(0,0,0,0)”
},
{
“type”: “header”,
“content”: “#4”
},
{
“type”: “textarea”,
“id”: “badge_items_4”,
“label”: “t:sections.header.blocks.badges.settings.badge_items.label”,
“info”: “t:sections.header.blocks.badges.settings.badge_items.info”
},
{
“type”: “text”,
“id”: “badge_text_4”,
“label”: “t:sections.header.blocks.badges.settings.badge_text.label”,
“default”: “Popular”
},
{
“type”: “color”,
“id”: “badge_color_4”,
“label”: “t:sections.header.blocks.badges.settings.badge_color.label”,
“default”: “rgba(0,0,0,0)”
},
{
“type”: “header”,
“content”: “#5”
},
{
“type”: “textarea”,
“id”: “badge_items_5”,
“label”: “t:sections.header.blocks.badges.settings.badge_items.label”,
“info”: “t:sections.header.blocks.badges.settings.badge_items.info”
},
{
“type”: “text”,
“id”: “badge_text_5”,
“label”: “t:sections.header.blocks.badges.settings.badge_text.label”,
“default”: “Popular”
},
{
“type”: “color”,
“id”: “badge_color_5”,
“label”: “t:sections.header.blocks.badges.settings.badge_color.label”,
“default”: “rgba(0,0,0,0)”
}
]
}
]
}
{% endschema %}

[davidmarkkus]

Impossible to upload all here - too heavy.

[saim007]

@davidmarkkus I have added the custom button in header.liquid file, Just copy and paste code to your header.liquid file and Save!

 

{%- if settings.show_free_delivery -%}

{%- endif -%}
 
{%- case section.settings.header_layout -%}
{%- when 'header-layout-vertical' -%}

{%- when 'header-layout-tiles' -%}

{%- endcase -%}
 
{%- if section.settings.header_layout == 'header-layout-tiles' -%}

{%- endif -%}
{%- if section.settings.header_layout == 'header-layout-vertical' and section.settings.color_button != "rgba(0,0,0,0)" -%}

{%- endif -%}
 
 

{%- if settings.cart_type == "drawer" -%}
  {{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }}
{%- endif -%}
 
{%- assign mega_menu_index = '|' -%}
{%- assign svg_icons = '' -%}
{%- assign badges = '' -%}
{%- for block in section.blocks -%}
  {%- case block.type -%}
{%- when 'main_menu_icons' -%}
{%- assign svg_icons = block -%}
    {%- when 'mega_menu' -%}
{%- assign mega_menu_index = mega_menu_index | append: block.settings.mega_menu_item_name | append: '%%' | append: forloop.index0 | append: '|' -%}
  {%- endcase -%}
{%- endfor -%}
{%- assign visible_items_count = section.settings.visible_items_count | plus: 0 -%}
 

{%- if section.settings.header_layout == 'header-layout-vertical' and section.settings.menu != blank -%}

{%- endif -%}
 
{%- if section.settings.show_color_line -%}
  

{%- endif -%}
{%- if section.settings.enable_sticky_header and template.name != 'product' and template.name != 'collection' -%}

{%- endif -%}
 
{%- if settings.cart_type == "notification" -%}
  {% render 'cart-notification' %}
{%- endif -%}

{%- if settings.cart_type == "drawer" -%}
  
{%- endif -%}
 
{% if request.design_mode and template == 'index' %}

{% endif %}
 

 
{%- if section.settings.enable_sticky_header and template.name != 'product' and template.name != 'collection' -%}

{%- endif -%}
 
{%- if request.page_type == 'index' -%}
  {% assign potential_action_target = request.origin | append: routes.search_url | append: "?q={search_term_string}" %}
  
{%- endif -%}
 
{% schema %}
{
  "name": "t:sections.header.name",
  "class": "section-header",
  "settings": [
{
      "type": "select",
      "id": "header_layout",
      "options": [
        {
          "value": "header-layout-vertical",
          "label": "t:sections.header.settings.header_layout.options__1.label"
        },
        {
          "value": "header-layout-tiles",
          "label": "t:sections.header.settings.header_layout.options__2.label"
        },
        {
          "value": "header-layout-classic",
          "label": "t:sections.header.settings.header_layout.options__3.label"
        }
      ],
      "default": "header-layout-classic",
      "label": "t:sections.header.settings.header_layout.label",
 "info": "t:sections.header.settings.header_layout.info"
    },
    {
      "type": "link_list",
      "id": "menu",
      "default": "main-menu",
      "label": "t:sections.header.settings.menu.label"
    },
    {
      "type": "link_list",
      "id": "secondary_menu",
      "default": "main-menu",
      "label": "t:sections.header.settings.secondary_menu.label"
    },
    {
      "type": "select",
      "id": "width",
      "options": [
        {
          "value": "page-width",
          "label": "t:sections.general.settings.width.options__boxed.label"
        },
        {
          "value": "page-wide",
          "label": "t:sections.general.settings.width.options__wide.label"
        }
      ],
      "default": "page-width",
      "label": "t:sections.general.settings.width.label",
      "info": "t:sections.general.settings.width.info"
    },
    {
      "type": "checkbox",
      "id": "show_search",
      "default": true,
 "label": "t:sections.header.settings.show_search.label"
    },
    {
      "type": "checkbox",
      "id": "open_search",
      "default": true,
      "label": "t:sections.header.settings.open_search.label"
    },
{
      "type": "checkbox",
      "id": "enable_sticky_header",
      "default": true,
      "label": "t:sections.header.settings.enable_sticky_header.label",
      "info": "t:sections.header.settings.enable_sticky_header.info"
    },
    {
      "type": "checkbox",
      "id": "show_color_line",
      "default": true,
      "label": "t:sections.header.settings.show_line_separator.label"
    },
{
      "type": "select",
      "id": "menu_font_weight",
      "options": [
        {
          "value": "font-weight-normal",
          "label": "t:sections.header.settings.menu_font_weight.options__1.label"
        },
        {
          "value": "strong",
          "label": "t:sections.header.settings.menu_font_weight.options__2.label"
        }
      ],
      "default": "strong",
 "label": "t:sections.header.settings.menu_font_weight.label"
    },
    {
      "type": "color",
      "id": "icons_color",
      "label": "t:sections.header.settings.icons_color.label",
 "info": "t:sections.header.settings.icons_color.info",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "header",
      "content": "t:sections.header.settings.logo_desktop.content"
    },
    {
      "type": "image_picker",
      "id": "logo",
 "label": "t:sections.header.settings.logo.label"
    },
    {
      "type": "html",
      "id": "logo_svg",
      "label": "t:sections.header.settings.logo_svg.label",
 "info": "t:sections.header.settings.logo_svg.info"
    },
    {
      "type": "range",
      "id": "logo_max_width",
      "min": 50,
      "max": 250,
      "step": 10,
      "default": 100,
      "unit": "t:sections.header.settings.logo_width.unit",
      "label": "t:sections.header.settings.logo_width.label"
    },
    {
      "type": "select",
      "id": "logo_position",
      "options": [
        {
          "value": "left",
          "label": "t:sections.general.settings.texts_aligment.options__left.label"
        },
        {
          "value": "center",
          "label": "t:sections.general.settings.texts_aligment.options__center.label"
        }
      ],
      "default": "center",
      "label": "t:sections.header.settings.logo_aligment.label"
    },
    {
      "type": "header",
      "content": "t:sections.header.settings.logo_mobile.content"
    },
    {
      "type": "image_picker",
      "id": "logo_mobile",
      "label": "t:sections.header.settings.logo.label"
    },
    {
      "type": "html",
      "id": "logo_svg_mobile",
      "label": "t:sections.header.settings.logo_svg.label",
 "info": "t:sections.header.settings.logo_svg.info"
    },
    {
      "type": "range",
      "id": "logo_max_width_mobile",
      "min": 50,
      "max": 150,
      "step": 10,
      "default": 100,
      "unit": "t:sections.header.settings.logo_width.unit",
      "label": "t:sections.header.settings.logo_width.label"
    },
    {
      "type": "select",
      "id": "logo_position_mobile",
      "options": [
        {
          "value": "left",
          "label": "t:sections.general.settings.texts_aligment.options__left.label"
        },
        {
          "value": "center",
          "label": "t:sections.general.settings.texts_aligment.options__center.label"
        }
      ],
      "default": "center",
      "label": "t:sections.header.settings.logo_aligment.label"
    },    
    {
      "type": "header",
 "content": "t:sections.header.settings.header_tiles.content"
    },
    {
      "type": "range",
      "id": "visible_items_count",
      "min": 2,
      "max": 10,
      "step": 1,
      "default": 9,
 "label": "t:sections.header.settings.visible_items_count.label"
    },
    {
      "type": "range",
      "id": "icons_size",
      "min": 20,
      "max": 48,
      "step": 2,
      "default": 20,
      "label": "t:sections.header.settings.icons_size.label"
    },
    {
      "type": "color",
      "id": "color_tile_base",
      "default": "#F6F7FA",
      "label": "t:sections.header.settings.color_tile_base.label",
      "info": "t:sections.header.settings.color_tile_base.info"
    },
    {
      "type": "color",
      "id": "color_tile_active",
      "default": "rgba(0,0,0,0)",
      "label": "t:sections.header.settings.color_tile_active.label"
    },
    {
      "type": "header",
      "content": "t:sections.header.settings.header_vertical.content"
    },
    {
      "type": "color",
      "id": "color_button",
      "default": "rgba(0,0,0,0)",
      "label": "t:sections.header.settings.color_button.label"
    },
{
      "type": "select",
      "id": "sections_count",
      "options": [
        {
          "value": "0",
          "label": "t:sections.header.settings.sections_count.options__1.label"
        },
        {
          "value": "1",
          "label": "t:sections.header.settings.sections_count.options__2.label"
        },
        {
          "value": "2",
          "label": "t:sections.header.settings.sections_count.options__3.label"
        }
      ],
      "default": "1",
 "label": "t:sections.header.settings.sections_count.label"
    }
  ],
  "blocks": [
    {
      "type": "mega_menu",
      "name": "t:sections.header.blocks.mega_menu.name",
      "settings": [
        {
          "type": "text",
          "id": "mega_menu_item_name",
          "label": "t:sections.header.blocks.mega_menu.settings.mega_menu_item_name.label"
        },
        {
          "type": "select",
          "id": "grid",
          "options": [
            {
              "value": "col-6",
              "label": "2"
            },
            {
              "value": "col-4",
              "label": "3"
            },
            {
              "value": "col-3",
              "label": "4"
            },
            {
              "value": "col-one_fifth",
              "label": "5"
            }
          ],
          "default": "col-3",
 "label": "t:sections.header.blocks.mega_menu.settings.grid.label"
   },
        {
          "type": "header",
 "content": "t:sections.header.blocks.mega_menu.settings.header_1.content"
        },
        {
          "type": "checkbox",
          "id": "show_banner",
          "default": true,
 "label": "t:sections.header.blocks.mega_menu.settings.show_banner.label"
        },
        {
          "type": "url",
          "id": "banner_link",
 "label": "t:sections.header.blocks.mega_menu.settings.banner_link.label"
        },
        {
          "type": "image_picker",
          "id": "image",
 "label": "t:sections.header.blocks.mega_menu.settings.image.label"
        },
        {
          "type": "text",
          "id": "heading",
          "default": "Free Shipping",
 "label": "t:sections.header.blocks.mega_menu.settings.heading.label"
        },
        {
          "type": "textarea",
          "id": "text",
          "default": "No code needed, just head for checkout!",
 "label": "t:sections.header.blocks.mega_menu.settings.text.label"
        },
        {
          "type": "text",
          "id": "button_label",
          "default": "Shop Now!",
 "label": "t:sections.header.blocks.mega_menu.settings.button_label.label",
          "info": "t:sections.header.blocks.mega_menu.settings.button_label.info"
        }
      ]
    },
    {
      "type": "main_menu_icons",
 "limit": 1,
 "name": "t:sections.header.blocks.main_menu_icons.name",
      "settings": [
        {
          "type": "header",
 "content": "t:sections.header.blocks.main_menu_icons.settings.header_1.content"
        },
        {
          "type": "text",
          "id": "icon1",
          "default": "dog",
          "label": "t:sections.header.blocks.main_menu_icons.settings.svg_icon.label"
        },
        {
          "type": "image_picker",
          "id": "icon_image1",
 "label": "t:sections.header.blocks.main_menu_icons.settings.icon_image.label",
          "info": "t:sections.header.blocks.main_menu_icons.settings.icon_image.info"
        },
        {
          "type": "header",
          "content": "t:sections.header.blocks.main_menu_icons.settings.header_2.content"
        },
        {
          "type": "text",
          "id": "icon2",
          "default": "dog",
          "label": "t:sections.header.blocks.main_menu_icons.settings.svg_icon.label"
        },
        {
          "type": "image_picker",
          "id": "icon_image2",
 "label": "t:sections.header.blocks.main_menu_icons.settings.icon_image.label",
          "info": "t:sections.header.blocks.main_menu_icons.settings.icon_image.info"
        },
        {
          "type": "header",
          "content": "t:sections.header.blocks.main_menu_icons.settings.header_3.content"
        },
        {
          "type": "text",
          "id": "icon3",
          "default": "dog",
          "label": "t:sections.header.blocks.main_menu_icons.settings.svg_icon.label"
        },
        {
          "type": "image_picker",
          "id": "icon_image3",
 "label": "t:sections.header.blocks.main_menu_icons.settings.icon_image.label",
          "info": "t:sections.header.blocks.main_menu_icons.settings.icon_image.info"
        },
        {
          "type": "header",
          "content": "t:sections.header.blocks.main_menu_icons.settings.header_4.content"
        },
        {
          "type": "text",
          "id": "icon4",
          "default": "dog",
          "label": "t:sections.header.blocks.main_menu_icons.settings.svg_icon.label"
        },
        {
          "type": "image_picker",
          "id": "icon_image4",
 "label": "t:sections.header.blocks.main_menu_icons.settings.icon_image.label",
          "info": "t:sections.header.blocks.main_menu_icons.settings.icon_image.info"
        },
        {
          "type": "header",
          "content": "t:sections.header.blocks.main_menu_icons.settings.header_5.content"
        },
        {
          "type": "text",
          "id": "icon5",
          "default": "dog",
          "label": "t:sections.header.blocks.main_menu_icons.settings.svg_icon.label"
        },
        {
          "type": "image_picker",
          "id": "icon_image5",
 "label": "t:sections.header.blocks.main_menu_icons.settings.icon_image.label",
          "info": "t:sections.header.blocks.main_menu_icons.settings.icon_image.info"
        },
        {
          "type": "header",
          "content": "t:sections.header.blocks.main_menu_icons.settings.header_6.content"
        },
        {
          "type": "text",
          "id": "icon6",
          "default": "dog",
          "label": "t:sections.header.blocks.main_menu_icons.settings.svg_icon.label"
        },
        {
          "type": "image_picker",
          "id": "icon_image6",
 "label": "t:sections.header.blocks.main_menu_icons.settings.icon_image.label",
          "info": "t:sections.header.blocks.main_menu_icons.settings.icon_image.info"
        },
        {
          "type": "header",
          "content": "t:sections.header.blocks.main_menu_icons.settings.header_7.content"
        },
        {
          "type": "text",
          "id": "icon7",
          "default": "dog",
          "label": "t:sections.header.blocks.main_menu_icons.settings.svg_icon.label"
        },
        {
          "type": "image_picker",
          "id": "icon_image7",
 "label": "t:sections.header.blocks.main_menu_icons.settings.icon_image.label",
          "info": "t:sections.header.blocks.main_menu_icons.settings.icon_image.info"
        },
        {
          "type": "header",
          "content": "t:sections.header.blocks.main_menu_icons.settings.header_8.content"
        },
        {
          "type": "text",
          "id": "icon8",
          "default": "dog",
          "label": "t:sections.header.blocks.main_menu_icons.settings.svg_icon.label"
        },
        {
          "type": "image_picker",
          "id": "icon_image8",
 "label": "t:sections.header.blocks.main_menu_icons.settings.icon_image.label",
          "info": "t:sections.header.blocks.main_menu_icons.settings.icon_image.info"
        },
        {
          "type": "header",
          "content": "t:sections.header.blocks.main_menu_icons.settings.header_9.content"
        },
        {
          "type": "text",
          "id": "icon9",
          "default": "dog",
          "label": "t:sections.header.blocks.main_menu_icons.settings.svg_icon.label"
        },
        {
          "type": "image_picker",
          "id": "icon_image9",
 "label": "t:sections.header.blocks.main_menu_icons.settings.icon_image.label",
          "info": "t:sections.header.blocks.main_menu_icons.settings.icon_image.info"
        },
        {
          "type": "header",
          "content": "t:sections.header.blocks.main_menu_icons.settings.header_10.content"
        },
        {
          "type": "text",
          "id": "icon10",
          "default": "dog",
          "label": "t:sections.header.blocks.main_menu_icons.settings.svg_icon.label"
        },
        {
          "type": "image_picker",
          "id": "icon_image10",
 "label": "t:sections.header.blocks.main_menu_icons.settings.icon_image.label",
          "info": "t:sections.header.blocks.main_menu_icons.settings.icon_image.info"
        },
        {
          "type": "header",
          "content": "t:sections.header.blocks.main_menu_icons.settings.header_11.content"
        },
        {
          "type": "text",
          "id": "icon11",
          "default": "dog",
          "label": "t:sections.header.blocks.main_menu_icons.settings.svg_icon.label"
        },
        {
          "type": "image_picker",
          "id": "icon_image11",
 "label": "t:sections.header.blocks.main_menu_icons.settings.icon_image.label",
          "info": "t:sections.header.blocks.main_menu_icons.settings.icon_image.info"
        }
      ]
    },
    {
      "type": "badges",
 "limit": 1,
 "name": "t:sections.header.blocks.badges.name",
      "settings": [
        {
          "type": "header",
          "content": "#1"
        },
        {
          "type": "textarea",
          "id": "badge_items_1",
          "label": "t:sections.header.blocks.badges.settings.badge_items.label",
 "info": "t:sections.header.blocks.badges.settings.badge_items.info"
        },
        {
          "type": "text",
          "id": "badge_text_1",
          "label": "t:sections.header.blocks.badges.settings.badge_text.label",
          "default": "Sale"
        },
        {
          "type": "color",
          "id": "badge_color_1",
 "label": "t:sections.header.blocks.badges.settings.badge_color.label",
          "default": "rgba(0,0,0,0)"
        },
        {
          "type": "header",
          "content": "#2"
        },
        {
          "type": "textarea",
          "id": "badge_items_2",
          "label": "t:sections.header.blocks.badges.settings.badge_items.label",
 "info": "t:sections.header.blocks.badges.settings.badge_items.info"
        },
        {
          "type": "text",
          "id": "badge_text_2",
          "label": "t:sections.header.blocks.badges.settings.badge_text.label",
          "default": "Popular"
        },
        {
          "type": "color",
          "id": "badge_color_2",
 "label": "t:sections.header.blocks.badges.settings.badge_color.label",
          "default": "rgba(0,0,0,0)"
        },
        {
          "type": "header",
          "content": "#3"
        },
        {
          "type": "textarea",
          "id": "badge_items_3",
          "label": "t:sections.header.blocks.badges.settings.badge_items.label",
 "info": "t:sections.header.blocks.badges.settings.badge_items.info"
        },
        {
          "type": "text",
          "id": "badge_text_3",
          "label": "t:sections.header.blocks.badges.settings.badge_text.label",
          "default": "Popular"
        },
        {
          "type": "color",
          "id": "badge_color_3",
 "label": "t:sections.header.blocks.badges.settings.badge_color.label",
          "default": "rgba(0,0,0,0)"
        },
        {
          "type": "header",
          "content": "#4"
        },
        {
          "type": "textarea",
          "id": "badge_items_4",
          "label": "t:sections.header.blocks.badges.settings.badge_items.label",
 "info": "t:sections.header.blocks.badges.settings.badge_items.info"
        },
        {
          "type": "text",
          "id": "badge_text_4",
          "label": "t:sections.header.blocks.badges.settings.badge_text.label",
          "default": "Popular"
        },
        {
          "type": "color",
          "id": "badge_color_4",
 "label": "t:sections.header.blocks.badges.settings.badge_color.label",
          "default": "rgba(0,0,0,0)"
        },
        {
          "type": "header",
          "content": "#5"
        },
        {
          "type": "textarea",
          "id": "badge_items_5",
          "label": "t:sections.header.blocks.badges.settings.badge_items.label",
 "info": "t:sections.header.blocks.badges.settings.badge_items.info"
        },
        {
          "type": "text",
          "id": "badge_text_5",
          "label": "t:sections.header.blocks.badges.settings.badge_text.label",
          "default": "Popular"
        },
        {
          "type": "color",
          "id": "badge_color_5",
 "label": "t:sections.header.blocks.badges.settings.badge_color.label",
          "default": "rgba(0,0,0,0)"
        }
      ]
    }
  ]
}
{% endschema %}

[davidmarkkus]

Just added your code in header.liquid but it is not working.

[davidmarkkus]

Update: it does work on Mobile but not on Desktop.

Any recommandation?

[saim007]

Hi @davidmarkkus Just copy and paste below code into your header.liquid file

 

{%- if settings.show_free_delivery -%}

{%- endif -%}
 
{%- case section.settings.header_layout -%}
{%- when 'header-layout-vertical' -%}

{%- when 'header-layout-tiles' -%}

{%- endcase -%}
 
{%- if section.settings.header_layout == 'header-layout-tiles' -%}

{%- endif -%}
{%- if section.settings.header_layout == 'header-layout-vertical' and section.settings.color_button != "rgba(0,0,0,0)" -%}

{%- endif -%}
 
 

{%- if settings.cart_type == "drawer" -%}
  {{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }}
{%- endif -%}
 
{%- assign mega_menu_index = '|' -%}
{%- assign svg_icons = '' -%}
{%- assign badges = '' -%}
{%- for block in section.blocks -%}
  {%- case block.type -%}
{%- when 'main_menu_icons' -%}
{%- assign svg_icons = block -%}
    {%- when 'mega_menu' -%}
{%- assign mega_menu_index = mega_menu_index | append: block.settings.mega_menu_item_name | append: '%%' | append: forloop.index0 | append: '|' -%}
  {%- endcase -%}
{%- endfor -%}
{%- assign visible_items_count = section.settings.visible_items_count | plus: 0 -%}
 

{%- if section.settings.header_layout == 'header-layout-vertical' and section.settings.menu != blank -%}

{%- endif -%}
 
{%- if section.settings.show_color_line -%}
  

{%- endif -%}
{%- if section.settings.enable_sticky_header and template.name != 'product' and template.name != 'collection' -%}

{%- endif -%}
 
{%- if settings.cart_type == "notification" -%}
  {% render 'cart-notification' %}
{%- endif -%}

{%- if settings.cart_type == "drawer" -%}
  
{%- endif -%}
 
{% if request.design_mode and template == 'index' %}

{% endif %}
 

 
{%- if section.settings.enable_sticky_header and template.name != 'product' and template.name != 'collection' -%}

{%- endif -%}
 
{%- if request.page_type == 'index' -%}
  {% assign potential_action_target = request.origin | append: routes.search_url | append: "?q={search_term_string}" %}
  
{%- endif -%}
 
{% schema %}
{
  "name": "t:sections.header.name",
  "class": "section-header",
  "settings": [
{
      "type": "select",
      "id": "header_layout",
      "options": [
        {
          "value": "header-layout-vertical",
          "label": "t:sections.header.settings.header_layout.options__1.label"
        },
        {
          "value": "header-layout-tiles",
          "label": "t:sections.header.settings.header_layout.options__2.label"
        },
        {
          "value": "header-layout-classic",
          "label": "t:sections.header.settings.header_layout.options__3.label"
        }
      ],
      "default": "header-layout-classic",
      "label": "t:sections.header.settings.header_layout.label",
 "info": "t:sections.header.settings.header_layout.info"
    },
    {
      "type": "link_list",
      "id": "menu",
      "default": "main-menu",
      "label": "t:sections.header.settings.menu.label"
    },
    {
      "type": "link_list",
      "id": "secondary_menu",
      "default": "main-menu",
      "label": "t:sections.header.settings.secondary_menu.label"
    },
    {
      "type": "select",
      "id": "width",
      "options": [
        {
          "value": "page-width",
          "label": "t:sections.general.settings.width.options__boxed.label"
        },
        {
          "value": "page-wide",
          "label": "t:sections.general.settings.width.options__wide.label"
        }
      ],
      "default": "page-width",
      "label": "t:sections.general.settings.width.label",
      "info": "t:sections.general.settings.width.info"
    },
    {
      "type": "checkbox",
      "id": "show_search",
      "default": true,
 "label": "t:sections.header.settings.show_search.label"
    },
    {
      "type": "checkbox",
      "id": "open_search",
      "default": true,
      "label": "t:sections.header.settings.open_search.label"
    },
{
      "type": "checkbox",
      "id": "enable_sticky_header",
      "default": true,
      "label": "t:sections.header.settings.enable_sticky_header.label",
      "info": "t:sections.header.settings.enable_sticky_header.info"
    },
    {
      "type": "checkbox",
      "id": "show_color_line",
      "default": true,
      "label": "t:sections.header.settings.show_line_separator.label"
    },
{
      "type": "select",
      "id": "menu_font_weight",
      "options": [
        {
          "value": "font-weight-normal",
          "label": "t:sections.header.settings.menu_font_weight.options__1.label"
        },
        {
          "value": "strong",
          "label": "t:sections.header.settings.menu_font_weight.options__2.label"
        }
      ],
      "default": "strong",
 "label": "t:sections.header.settings.menu_font_weight.label"
    },
    {
      "type": "color",
      "id": "icons_color",
      "label": "t:sections.header.settings.icons_color.label",
 "info": "t:sections.header.settings.icons_color.info",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "header",
      "content": "t:sections.header.settings.logo_desktop.content"
    },
    {
      "type": "image_picker",
      "id": "logo",
 "label": "t:sections.header.settings.logo.label"
    },
    {
      "type": "html",
      "id": "logo_svg",
      "label": "t:sections.header.settings.logo_svg.label",
 "info": "t:sections.header.settings.logo_svg.info"
    },
    {
      "type": "range",
      "id": "logo_max_width",
      "min": 50,
      "max": 250,
      "step": 10,
      "default": 100,
      "unit": "t:sections.header.settings.logo_width.unit",
      "label": "t:sections.header.settings.logo_width.label"
    },
    {
      "type": "select",
      "id": "logo_position",
      "options": [
        {
          "value": "left",
          "label": "t:sections.general.settings.texts_aligment.options__left.label"
        },
        {
          "value": "center",
          "label": "t:sections.general.settings.texts_aligment.options__center.label"
        }
      ],
      "default": "center",
      "label": "t:sections.header.settings.logo_aligment.label"
    },
    {
      "type": "header",
      "content": "t:sections.header.settings.logo_mobile.content"
    },
    {
      "type": "image_picker",
      "id": "logo_mobile",
      "label": "t:sections.header.settings.logo.label"
    },
    {
      "type": "html",
      "id": "logo_svg_mobile",
      "label": "t:sections.header.settings.logo_svg.label",
 "info": "t:sections.header.settings.logo_svg.info"
    },
    {
      "type": "range",
      "id": "logo_max_width_mobile",
      "min": 50,
      "max": 150,
      "step": 10,
      "default": 100,
      "unit": "t:sections.header.settings.logo_width.unit",
      "label": "t:sections.header.settings.logo_width.label"
    },
    {
      "type": "select",
      "id": "logo_position_mobile",
      "options": [
        {
          "value": "left",
          "label": "t:sections.general.settings.texts_aligment.options__left.label"
        },
        {
          "value": "center",
          "label": "t:sections.general.settings.texts_aligment.options__center.label"
        }
      ],
      "default": "center",
      "label": "t:sections.header.settings.logo_aligment.label"
    },    
    {
      "type": "header",
 "content": "t:sections.header.settings.header_tiles.content"
    },
    {
      "type": "range",
      "id": "visible_items_count",
      "min": 2,
      "max": 10,
      "step": 1,
      "default": 9,
 "label": "t:sections.header.settings.visible_items_count.label"
    },
    {
      "type": "range",
      "id": "icons_size",
      "min": 20,
      "max": 48,
      "step": 2,
      "default": 20,
      "label": "t:sections.header.settings.icons_size.label"
    },
    {
      "type": "color",
      "id": "color_tile_base",
      "default": "#F6F7FA",
      "label": "t:sections.header.settings.color_tile_base.label",
      "info": "t:sections.header.settings.color_tile_base.info"
    },
    {
      "type": "color",
      "id": "color_tile_active",
      "default": "rgba(0,0,0,0)",
      "label": "t:sections.header.settings.color_tile_active.label"
    },
    {
      "type": "header",
      "content": "t:sections.header.settings.header_vertical.content"
    },
    {
      "type": "color",
      "id": "color_button",
      "default": "rgba(0,0,0,0)",
      "label": "t:sections.header.settings.color_button.label"
    },
{
      "type": "select",
      "id": "sections_count",
      "options": [
        {
          "value": "0",
          "label": "t:sections.header.settings.sections_count.options__1.label"
        },
        {
          "value": "1",
          "label": "t:sections.header.settings.sections_count.options__2.label"
        },
        {
          "value": "2",
          "label": "t:sections.header.settings.sections_count.options__3.label"
        }
      ],
      "default": "1",
 "label": "t:sections.header.settings.sections_count.label"
    }
  ],
  "blocks": [
    {
      "type": "mega_menu",
      "name": "t:sections.header.blocks.mega_menu.name",
      "settings": [
        {
          "type": "text",
          "id": "mega_menu_item_name",
          "label": "t:sections.header.blocks.mega_menu.settings.mega_menu_item_name.label"
        },
        {
          "type": "select",
          "id": "grid",
          "options": [
            {
              "value": "col-6",
              "label": "2"
            },
            {
              "value": "col-4",
              "label": "3"
            },
            {
              "value": "col-3",
              "label": "4"
            },
            {
              "value": "col-one_fifth",
              "label": "5"
            }
          ],
          "default": "col-3",
 "label": "t:sections.header.blocks.mega_menu.settings.grid.label"
   },
        {
          "type": "header",
 "content": "t:sections.header.blocks.mega_menu.settings.header_1.content"
        },
        {
          "type": "checkbox",
          "id": "show_banner",
          "default": true,
 "label": "t:sections.header.blocks.mega_menu.settings.show_banner.label"
        },
        {
          "type": "url",
          "id": "banner_link",
 "label": "t:sections.header.blocks.mega_menu.settings.banner_link.label"
        },
        {
          "type": "image_picker",
          "id": "image",
 "label": "t:sections.header.blocks.mega_menu.settings.image.label"
        },
        {
          "type": "text",
          "id": "heading",
          "default": "Free Shipping",
 "label": "t:sections.header.blocks.mega_menu.settings.heading.label"
        },
        {
          "type": "textarea",
          "id": "text",
          "default": "No code needed, just head for checkout!",
 "label": "t:sections.header.blocks.mega_menu.settings.text.label"
        },
        {
          "type": "text",
          "id": "button_label",
          "default": "Shop Now!",
 "label": "t:sections.header.blocks.mega_menu.settings.button_label.label",
          "info": "t:sections.header.blocks.mega_menu.settings.button_label.info"
        }
      ]
    },
    {
      "type": "main_menu_icons",
 "limit": 1,
 "name": "t:sections.header.blocks.main_menu_icons.name",
      "settings": [
        {
          "type": "header",
 "content": "t:sections.header.blocks.main_menu_icons.settings.header_1.content"
        },
        {
          "type": "text",
          "id": "icon1",
          "default": "dog",
          "label": "t:sections.header.blocks.main_menu_icons.settings.svg_icon.label"
        },
        {
          "type": "image_picker",
          "id": "icon_image1",
 "label": "t:sections.header.blocks.main_menu_icons.settings.icon_image.label",
          "info": "t:sections.header.blocks.main_menu_icons.settings.icon_image.info"
        },
        {
          "type": "header",
          "content": "t:sections.header.blocks.main_menu_icons.settings.header_2.content"
        },
        {
          "type": "text",
          "id": "icon2",
          "default": "dog",
          "label": "t:sections.header.blocks.main_menu_icons.settings.svg_icon.label"
        },
        {
          "type": "image_picker",
          "id": "icon_image2",
 "label": "t:sections.header.blocks.main_menu_icons.settings.icon_image.label",
          "info": "t:sections.header.blocks.main_menu_icons.settings.icon_image.info"
        },
        {
          "type": "header",
          "content": "t:sections.header.blocks.main_menu_icons.settings.header_3.content"
        },
        {
          "type": "text",
          "id": "icon3",
          "default": "dog",
          "label": "t:sections.header.blocks.main_menu_icons.settings.svg_icon.label"
        },
        {
          "type": "image_picker",
          "id": "icon_image3",
 "label": "t:sections.header.blocks.main_menu_icons.settings.icon_image.label",
          "info": "t:sections.header.blocks.main_menu_icons.settings.icon_image.info"
        },
        {
          "type": "header",
          "content": "t:sections.header.blocks.main_menu_icons.settings.header_4.content"
        },
        {
          "type": "text",
          "id": "icon4",
          "default": "dog",
          "label": "t:sections.header.blocks.main_menu_icons.settings.svg_icon.label"
        },
        {
          "type": "image_picker",
          "id": "icon_image4",
 "label": "t:sections.header.blocks.main_menu_icons.settings.icon_image.label",
          "info": "t:sections.header.blocks.main_menu_icons.settings.icon_image.info"
        },
        {
          "type": "header",
          "content": "t:sections.header.blocks.main_menu_icons.settings.header_5.content"
        },
        {
          "type": "text",
          "id": "icon5",
          "default": "dog",
          "label": "t:sections.header.blocks.main_menu_icons.settings.svg_icon.label"
        },
        {
          "type": "image_picker",
          "id": "icon_image5",
 "label": "t:sections.header.blocks.main_menu_icons.settings.icon_image.label",
          "info": "t:sections.header.blocks.main_menu_icons.settings.icon_image.info"
        },
        {
          "type": "header",
          "content": "t:sections.header.blocks.main_menu_icons.settings.header_6.content"
        },
        {
          "type": "text",
          "id": "icon6",
          "default": "dog",
          "label": "t:sections.header.blocks.main_menu_icons.settings.svg_icon.label"
        },
        {
          "type": "image_picker",
          "id": "icon_image6",
 "label": "t:sections.header.blocks.main_menu_icons.settings.icon_image.label",
          "info": "t:sections.header.blocks.main_menu_icons.settings.icon_image.info"
        },
        {
          "type": "header",
          "content": "t:sections.header.blocks.main_menu_icons.settings.header_7.content"
        },
        {
          "type": "text",
          "id": "icon7",
          "default": "dog",
          "label": "t:sections.header.blocks.main_menu_icons.settings.svg_icon.label"
        },
        {
          "type": "image_picker",
          "id": "icon_image7",
 "label": "t:sections.header.blocks.main_menu_icons.settings.icon_image.label",
          "info": "t:sections.header.blocks.main_menu_icons.settings.icon_image.info"
        },
        {
          "type": "header",
          "content": "t:sections.header.blocks.main_menu_icons.settings.header_8.content"
        },
        {
          "type": "text",
          "id": "icon8",
          "default": "dog",
          "label": "t:sections.header.blocks.main_menu_icons.settings.svg_icon.label"
        },
        {
          "type": "image_picker",
          "id": "icon_image8",
 "label": "t:sections.header.blocks.main_menu_icons.settings.icon_image.label",
          "info": "t:sections.header.blocks.main_menu_icons.settings.icon_image.info"
        },
        {
          "type": "header",
          "content": "t:sections.header.blocks.main_menu_icons.settings.header_9.content"
        },
        {
          "type": "text",
          "id": "icon9",
          "default": "dog",
          "label": "t:sections.header.blocks.main_menu_icons.settings.svg_icon.label"
        },
        {
          "type": "image_picker",
          "id": "icon_image9",
 "label": "t:sections.header.blocks.main_menu_icons.settings.icon_image.label",
          "info": "t:sections.header.blocks.main_menu_icons.settings.icon_image.info"
        },
        {
          "type": "header",
          "content": "t:sections.header.blocks.main_menu_icons.settings.header_10.content"
        },
        {
          "type": "text",
          "id": "icon10",
          "default": "dog",
          "label": "t:sections.header.blocks.main_menu_icons.settings.svg_icon.label"
        },
        {
          "type": "image_picker",
          "id": "icon_image10",
 "label": "t:sections.header.blocks.main_menu_icons.settings.icon_image.label",
          "info": "t:sections.header.blocks.main_menu_icons.settings.icon_image.info"
        },
        {
          "type": "header",
          "content": "t:sections.header.blocks.main_menu_icons.settings.header_11.content"
        },
        {
          "type": "text",
          "id": "icon11",
          "default": "dog",
          "label": "t:sections.header.blocks.main_menu_icons.settings.svg_icon.label"
        },
        {
          "type": "image_picker",
          "id": "icon_image11",
 "label": "t:sections.header.blocks.main_menu_icons.settings.icon_image.label",
          "info": "t:sections.header.blocks.main_menu_icons.settings.icon_image.info"
        }
      ]
    },
    {
      "type": "badges",
 "limit": 1,
 "name": "t:sections.header.blocks.badges.name",
      "settings": [
        {
          "type": "header",
          "content": "#1"
        },
        {
          "type": "textarea",
          "id": "badge_items_1",
          "label": "t:sections.header.blocks.badges.settings.badge_items.label",
 "info": "t:sections.header.blocks.badges.settings.badge_items.info"
        },
        {
          "type": "text",
          "id": "badge_text_1",
          "label": "t:sections.header.blocks.badges.settings.badge_text.label",
          "default": "Sale"
        },
        {
          "type": "color",
          "id": "badge_color_1",
 "label": "t:sections.header.blocks.badges.settings.badge_color.label",
          "default": "rgba(0,0,0,0)"
        },
        {
          "type": "header",
          "content": "#2"
        },
        {
          "type": "textarea",
          "id": "badge_items_2",
          "label": "t:sections.header.blocks.badges.settings.badge_items.label",
 "info": "t:sections.header.blocks.badges.settings.badge_items.info"
        },
        {
          "type": "text",
          "id": "badge_text_2",
          "label": "t:sections.header.blocks.badges.settings.badge_text.label",
          "default": "Popular"
        },
        {
          "type": "color",
          "id": "badge_color_2",
 "label": "t:sections.header.blocks.badges.settings.badge_color.label",
          "default": "rgba(0,0,0,0)"
        },
        {
          "type": "header",
          "content": "#3"
        },
        {
          "type": "textarea",
          "id": "badge_items_3",
          "label": "t:sections.header.blocks.badges.settings.badge_items.label",
 "info": "t:sections.header.blocks.badges.settings.badge_items.info"
        },
        {
          "type": "text",
          "id": "badge_text_3",
          "label": "t:sections.header.blocks.badges.settings.badge_text.label",
          "default": "Popular"
        },
        {
          "type": "color",
          "id": "badge_color_3",
 "label": "t:sections.header.blocks.badges.settings.badge_color.label",
          "default": "rgba(0,0,0,0)"
        },
        {
          "type": "header",
          "content": "#4"
        },
        {
          "type": "textarea",
          "id": "badge_items_4",
          "label": "t:sections.header.blocks.badges.settings.badge_items.label",
 "info": "t:sections.header.blocks.badges.settings.badge_items.info"
        },
        {
          "type": "text",
          "id": "badge_text_4",
          "label": "t:sections.header.blocks.badges.settings.badge_text.label",
          "default": "Popular"
        },
        {
          "type": "color",
          "id": "badge_color_4",
 "label": "t:sections.header.blocks.badges.settings.badge_color.label",
          "default": "rgba(0,0,0,0)"
        },
        {
          "type": "header",
          "content": "#5"
        },
        {
          "type": "textarea",
          "id": "badge_items_5",
          "label": "t:sections.header.blocks.badges.settings.badge_items.label",
 "info": "t:sections.header.blocks.badges.settings.badge_items.info"
        },
        {
          "type": "text",
          "id": "badge_text_5",
          "label": "t:sections.header.blocks.badges.settings.badge_text.label",
          "default": "Popular"
        },
        {
          "type": "color",
          "id": "badge_color_5",
 "label": "t:sections.header.blocks.badges.settings.badge_color.label",
          "default": "rgba(0,0,0,0)"
        }
      ]
    }
  ]
}
{% endschema %}

Please mark as solve!

[davidmarkkus]

Many thanks it works now

[makkf]

hello do i replace all my header liquid file with this code ? or add it in the start or the end of the file?

[Lealombardo]

Hi,
I would like to add a button top right to my navigation too, but Ive tried to copy paste this code into my header liquid and my navigation disappeared. Im working on Impulse theme.
Could you please help me ?