How to Add a Clickable Icon in the Header

Store Design
1

I’m trying to add a clickable icon (or at this point, even a button) to our header, on the right side directly next to (left) of the search bar, that links to a page on our site.

Our shopify store is Chicago-Turbo with a debut theme - https://cheekyfishing.com/

1 Like
2

@getcheeky

Thanks for post

can you please share you’re header section code so i will check and update code

3

Yes! It’s long -

{% comment %}
** Header - default view **

  • Static section
    {% endcomment %}

{% comment %} Structured data {% endcomment %}

{% if template.name == ‘index’ %}

{% endif %}

{%- assign locale_selector = false -%}
{%- assign currency_selector = false -%}

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

{%- if section.settings.show_locale_selector and shop.published_locales.size > 1 -%}
{%- assign locale_selector = true -%}
{%- endif -%}

{% comment %}Mobile navigation{% endcomment %}

{% if section.settings.promo_text != blank %}
{{ section.settings.promo_text }}
{% endif %}

{{ ‘layout.general.menu’ | t }}

{% if section.settings.logo_mobile != blank %} {{ shop.name | escape }} {% elsif section.settings.logo != blank %} {{ shop.name | escape }} {% else %} {{ shop.name }} {% endif %}
{% if section.settings.search_enabled %} {% endif %}

{% if section.settings.show_cart %}

{% endif %}

{% if section.settings.search_enabled %}

{% endif %}
    {% render 'mobile-menu', menu: section.settings.main_linklist %} {% render 'mobile-menu', menu: section.settings.main_linklist2 %} {% render 'mobile-menu', menu: section.settings.top_bar_menu, context: 'top_bar_menu' %}

    {% if section.settings.phone_number != blank %}

  • {{ section.settings.phone_number }}
    • {% endif %}

    {% if shop.customer_accounts_enabled %}
    {% if customer %}

  • {{ customer.name }}
  • {{ 'layout.customer.log_out' | t }}
    • {% else %}
  • {{ 'layout.customer.log_in' | t }}
    • {% endif %} {% endif %}

    {% if locale_selector or currency_selector or settings.show_multiple_currencies == true %}
    {% render ‘localization-switcher-mobile’,
    additional_classes: ‘mobile-menu__disclosure’,
    currency_selector: currency_selector,
    locale_selector: locale_selector,
    show_currency: section.settings.show_currency_selector
    %}
    {% endif %}

{% if template contains “index” %}
{%- assign feature_image = true -%}
{% elsif template contains “collection” %}
{%- assign feature_image = true -%}
{% elsif template contains “blog” %}
{%- assign feature_image = true -%}
{% elsif template contains “article” %}
{%- assign feature_image = true -%}
{% elsif template contains “contact” %}
{%- assign feature_image = true -%}
{% elsif template contains “product” %}
{%- assign feature_image = true -%}
{% elsif template contains “gallery” %}
{%- assign feature_image = true -%}
{% elsif template contains “banner” %}
{%- assign feature_image = true -%}
{% elsif template contains “details” %}
{%- assign feature_image = true -%}
{% elsif template contains “faq” %}
{%- assign feature_image = true -%}
{% elsif template contains “search” %}
{%- assign feature_image = true -%}
{% elsif template contains “cart” %}
{%- assign feature_image = true -%}
{% else %}
{%- assign feature_image = false -%}
{% endif %}

{% comment %}Main navigation{% endcomment %}

{% if section.settings.promo_text != blank %}
{{ section.settings.promo_text }}
{% endif %}
{% if section.settings.social_icons_header %} {% render 'social-icons' %} {% endif %}

{% if section.settings.show_cart %}

{{ cart.item_count }}

{% unless settings.cart_action == ‘ajax’ and template contains ‘cart’ %}

{{ 'layout.general.empty_cart' | t }}

{{ 'cart.general.continue_shopping_link_html' | t }}
    {%- assign total_saving = 0 -%}

    {% for item in cart.items %}
    {% if item.variant.compare_at_price > item.variant.price %}
    {%- assign saving = item.variant.compare_at_price | minus: item.variant.price | times: item.quantity -%}
    {%- assign total_saving = saving | plus: total_saving -%}
    {% endif %}

  • {% if item.image %}
    {{ item.title | escape }}
    {% endif %}
    {{ item.product.title }}

    {% unless item.product.has_only_default_variant or item.variant.title contains “Title” %}

    {% for option in item.product.options %}
    {{ item.variant.options[forloop.index0] }} {% unless forloop.last %}/{% endunless %}
    {% endfor %}
    {% endunless %}

    {% if item.properties %}
    {% for p in item.properties %}
    {% if p.last != blank %}

    {{ p.first }}: {{ p.last }}
    {% endif %} {% endfor %} {% endif %}
    {% if item.price > 0 %} {% render 'price-element', price: item.final_price %}

    {% if item.price < item.variant.compare_at_price or item.line_level_discount_allocations.size > 0 %}

    {% render ‘price-element’, price: item.variant.compare_at_price %}

    {% endif %}
    {% else %}
    {{ settings.free_price_text }}
    {% endif %}

    {% if item.line_level_discount_allocations.size > 0 %}
    {% for discount_allocation in item.line_level_discount_allocations %}

    {{ discount_allocation.discount_application.title }}

    {% endfor %} {% endif %}

    <input type=“number” min=“0” size=“2” class=“quantity” name=“updates” id=“updates_{{ item.id }}” value=“{{ item.quantity }}” data-cart-quantity-input=“mini-cart” {% if settings.limit_quantity and item.variant.inventory_management != blank and item.variant.inventory_quantity > 0 and item.variant.inventory_policy == “deny” %}max=“{{ item.variant.inventory_quantity }}”{% endif %}/>

    • {% endfor %}
  • {% if cart.cart_level_discount_applications != blank %} {% for discount_application in cart.cart_level_discount_applications %} {{ discount_application.title }} -{% render 'price-element', price: discount_application.total_allocated_amount %} {% endfor %} {% endif %}
  • {% render 'price-element', price: cart.total_price %}

    {{ ‘layout.general.subtotal’ | t }}

  • {% if settings.display_savings and total_saving > 0 or settings.display_savings and cart.total_discount > 0 %} {% assign total_savings = total_saving | plus: cart.total_discount %}{% render 'price-element', price: total_savings %}

    {{ ‘layout.general.savings’ | t }}
    {% endif %}

  • {% if settings.display_special_instructions and settings.go_to_checkout %} {{ cart.note }} {% endif %}

    {% if settings.display_tos_checkbox and settings.go_to_checkout %}

    {{ 'cart.general.agree_to_terms_html' | t }}

    {% if settings.tos_page != blank %}
    {{ ‘cart.general.view_terms’ | t }}
    {% endif %}

    {% endif %}

    {% if settings.cart_message != blank %}

    {{ settings.cart_message }}
    {% endif %}

    {% if settings.go_to_checkout %}
    {% if settings.show_lock_icon %}{% endif %}{{ ‘layout.general.checkout’ | t }}
    {% else %}
    {% if settings.show_lock_icon and settings.go_to_checkout %}{% endif %}{{ ‘layout.general.go_to_cart’ | t }}
    {% endif %}

{% endunless %}
{% endif %}
{% capture logo %} {% endcapture %}

{%- assign vertical_menu = section.settings.vertical_menu -%}

{% capture menu_left %}
{% if vertical_menu %}
{% render ‘vertical-menu’, linklist: section.settings.main_linklist %}
{% else %}
{% render ‘menu’, linklist: section.settings.main_linklist %}
{% endif %}
{% endcapture %}

{% capture menu_right %}
{% if vertical_menu %}
{% render ‘vertical-menu’, linklist: section.settings.main_linklist2 %}
{% else %}
{% render ‘menu’, linklist: section.settings.main_linklist2 %}
{% endif %}
{% endcapture %}

{% capture search %}
{% if section.settings.search_enabled %}

{% endif %} {% endcapture %}

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

    {{ menu_left }} {{ menu_right }}

{{ search }}
{% else %}

    {{ menu_left }}

{{ logo }}

    {{ menu_right }}

{{ search }}
{% endif %}
{% else %}
{{ logo }}

    {{ menu_left }} {{ menu_right }}

{{ search }}

{% endif %}

{% render ‘sub-menu’, linklist: section.settings.main_linklist %}
{% render ‘sub-menu’, linklist: section.settings.main_linklist2 %}

div.header__logo, div.header__logo img, div.header__logo span, .sticky_nav .menu-position--block .header__logo { max-width: {{ section.settings.logo_display_width }}px; }

{% schema %}
{
“name”: “Header”,
“class”: “shopify-section–header”,
“settings”: [
{
“type”: “header”,
“content”: “Announcement bar”
},
{
“type”: “richtext”,
“id”: “promo_text”,
“label”: “Text”,
“info”: “Maximum character limit is 170”
},
{
“type”: “header”,
“content”: “Top bar”
},
{
“type”: “checkbox”,
“id”: “social_icons_header”,
“label”: “Show social media header icons”,
“default”: true
},
{
“type”: “text”,
“id”: “phone_number”,
“label”: “Phone number”,
“info”: “1-800-555-5555”
},
{
“type”: “link_list”,
“id”: “top_bar_menu”,
“label”: “Menu”,
“info”: “This menu won’t show drop-down items”
},
{
“type”: “checkbox”,
“id”: “show_cart”,
“label”: “Show cart”,
“default”: true
},
{
“type”: “select”,
“id”: “cart_icon”,
“label”: “Cart icon”,
“default”: “cart”,
“options”: [
{
“value”: “cart”,
“label”: “Cart”
},
{
“value”: “bag”,
“label”: “Bag”
}
]
},
{
“type”: “header”,
“content”: “Language selector”,
“info”: “To add a language, go to your language settings.”
},
{
“type”: “checkbox”,
“id”: “show_locale_selector”,
“label”: “Show language selector”,
“default”: true
},
{
“type”: “header”,
“content”: “Currency selector”,
“info”: “To add a payment, go to your currency settings.”
},
{
“type”: “checkbox”,
“id”: “show_currency_selector”,
“label”: “Show currency selector”,
“default”: true
},
{
“type”: “header”,
“content”: “Logos”
},
{
“type”: “range”,
“id”: “logo_display_width”,
“label”: “Logo display width”,
“step”: 5,
“min”: 105,
“max”: 205,
“default”: 205,
“unit”: “px”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Logo”,
“info”: “400 x 200px recommended”
},
{
“type”: “image_picker”,
“id”: “logo_home”,
“label”: “Secondary logo over content (optional)”,
“info”: “400 x 200px recommended”
},
{
“type”: “image_picker”,
“id”: “logo_mobile”,
“label”: “Mobile logo”,
“info”: “100 x 50px recommended”
},
{
“type”: “header”,
“content”: “Menus”
},
{
“type”: “link_list”,
“id”: “main_linklist”,
“label”: “Main menu”
},
{
“type”: “link_list”,
“id”: “main_linklist2”,
“label”: “Secondary menu”
},
{
“type”: “checkbox”,
“id”: “vertical_menu”,
“label”: “Enable vertical menus”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “dropdown_click”,
“label”: “Open dropdowns on click instead of hover”,
“default”: false
},
{
“type”: “header”,
“content”: “Search”
},
{
“type”: “checkbox”,
“id”: “search_enabled”,
“label”: “Show search”,
“default”: true
},
{
“type”: “header”,
“content”: “Layout”
},
{
“type”: “checkbox”,
“id”: “fixed_header”,
“label”: “Fixed (‘sticky’) header”,
“default”: true
},
{
“type”: “select”,
“id”: “logo_position”,
“label”: “Logo position”,
“info”: “Applies when menu position has been set to ‘Inline with logo’”,
“default”: “center”,
“options”: [
{
“value”: “left”,
“label”: “Left”
},
{
“value”: “center”,
“label”: “Center”
}
]
},
{
“type”: “select”,
“id”: “logo_alignment”,
“label”: “Logo alignment”,
“info”: “Applies when menu position has been set to ‘Under logo’”,
“default”: “center”,
“options”: [
{
“value”: “left”,
“label”: “Left”
},
{
“value”: “center”,
“label”: “Center”
}
]
},
{
“type”: “select”,
“id”: “menu_position”,
“label”: “Menu position”,
“default”: “inline”,
“options”: [
{
“value”: “inline”,
“label”: “Inline with logo”
},
{
“value”: “block”,
“label”: “Under logo”
}
]
},
{
“type”: “select”,
“id”: “menu_alignment”,
“label”: “Menu alignment”,
“default”: “align_left”,
“options”: [
{
“value”: “align_left”,
“label”: “Left”
},
{
“value”: “center”,
“label”: “Center”
},
{
“value”: “align_right”,
“label”: “Right”
}
]
}
]
}
{% endschema %}

4

Hey, it looks like you did eventually get this figured out but there’s no solution posted here. Any chance you could share how you did this?