Moving the search icon and adding social media icons to the header

elegowisko · October 28, 2025, 10:04am

Hello This is the header code; please help move the search icon next to the customer account icon and add social media icons.

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

{%- if section.settings.menu_type_desktop == ‘mega’ -%}

{%- endif -%}

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

{%- endif -%}

header-drawer { justify-self: start; margin-left: -1.2rem; } {%- if section.settings.sticky_header_type == 'reduce-logo-size' -%} .scrolled-past-header .header__heading-logo-wrapper { width: 75%; } {%- endif -%} {%- if section.settings.menu_type_desktop != "drawer" -%} @media screen and (min-width: 990px) { header-drawer { display: none; } } {%- endif -%} .menu-drawer-container { display: flex; } .list-menu { list-style: none; padding: 0; margin: 0; } .list-menu--inline { display: inline-flex; flex-wrap: wrap; } summary.list-menu__item { padding-right: 2.7rem; } .list-menu__item { display: flex; align-items: center; line-height: calc(1 + 0.3 / var(--font-body-scale)); } .list-menu__item--link { text-decoration: none; padding-bottom: 1rem; padding-top: 1rem; line-height: calc(1 + 0.8 / var(--font-body-scale)); } @media screen and (min-width: 750px) { .list-menu__item--link { padding-bottom: 0.5rem; padding-top: 0.5rem; } }

{%- style -%}

.header {

padding: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px 3rem {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px 3rem;

}

.section-header {

position: sticky; /\* This is for fixing a Safari z-index issue. PR #2147 \*/

margin-bottom: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }}px;

}

@media screen and (min-width: 750px) {

.section-header {

  margin-bottom: {{ section.settings.margin_bottom }}px;

}

}

@media screen and (min-width: 990px) {

.header {

  padding-top: {{ section.settings.padding_top }}px;

  padding-bottom: {{ section.settings.padding_bottom }}px;

}

}

{%- endstyle -%}

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

{%- endif -%}

<path fill-rule="evenodd" clip-rule="evenodd" d="M11.03 11.68A5.784 5.784 0 112.85 3.5a5.784 5.784 0 018.18 8.18zm.26 1.12a6.78 6.78 0 11.72-.7l5.4 5.4a.5.5 0 11-.71.7l-5.41-5.4z" fill="currentColor"/>

<circle r="8.5" cy="9" cx="9" stroke-opacity="0.2"/>

<path d="M6.82972 6.82915L1.17193 1.17097" stroke-linecap="round" stroke-linejoin="round" transform="translate(5 5)"/>

<path d="M1.22896 6.88502L6.77288 1.11523" stroke-linecap="round" stroke-linejoin="round" transform="translate(5 5)"/>

<path d="M.865 15.978a.5.5 0 00.707.707l7.433-7.431 7.579 7.282a.501.501 0 00.846-.37.5.5 0 00-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 10-.707-.708L8.991 7.853 1.413.573a.5.5 0 10-.693.72l7.563 7.268-7.418 7.417z" fill="currentColor">

{%- liquid

for block in section.blocks

if block.type == '@app'

  assign has_app_block = true

endif

endfor

-%}

<{% if section.settings.sticky_header_type != ‘none’ %}sticky-header data-sticky-type=“{{ section.settings.sticky_header_type }}”{% else %}div{% endif %} class=“header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper–border-bottom{% endif %}”>

{%- liquid

assign social_links = false

assign localization_forms = false



if settings.social_twitter_link != blank or settings.social_facebook_link != blank or settings.social_pinterest_link != blank or settings.social_instagram_link != blank or settings.social_youtube_link != blank or settings.social_vimeo_link != blank or settings.social_tiktok_link != blank or settings.social_tumblr_link != blank or settings.social_snapchat_link != blank

  assign social_links = true

endif



if localization.available_countries.size > 1 and section.settings.enable_country_selector or section.settings.enable_language_selector and localization.available_languages.size > 1

  assign localization_forms = true

endif

-%}

{%- liquid

  if section.settings.menu != blank

    render 'header-drawer'

  endif



  if section.settings.logo_position == 'top-center' or section.settings.menu == blank

    render 'header-search', input_id: 'Search-In-Modal-1'

  endif

-%}



{%- if section.settings.logo_position != 'middle-center' -%}

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

    <h1 class="header__heading">

  {%- endif -%}

      <a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset">

        {%- if settings.logo != blank -%}

          <div class="header__heading-logo-wrapper">

            {%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}

            {%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}

            {% capture sizes %}(max-width: {{ settings.logo_width | times: 2 }}px) 50vw, {{ settings.logo_width }}px{% endcapture %}

            {% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %}

            {{ settings.logo | image_url: width: 600 | image_tag:

              class: 'header__heading-logo motion-reduce',

              widths: widths,

              height: logo_height,

              width: settings.logo_width,

              alt: logo_alt,

              sizes: sizes,

              preload: true

            }}

          </div>

        {%- else -%}

          <span class="h2">{{ shop.name }}</span>

        {%- endif -%}

      </a>

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

    </h1>

  {%- endif -%}

{%- endif -%}



{%- liquid

  if section.settings.menu != blank

    if section.settings.menu_type_desktop == 'dropdown'

      render 'header-dropdown-menu'

    elsif section.settings.menu_type_desktop != 'drawer'

      render 'header-mega-menu'

    endif

  endif

%}



{%- if section.settings.logo_position == 'middle-center' -%}

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

    <h1 class="header__heading">

  {%- endif -%}

      <a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset">

        {%- if settings.logo != blank -%}

          <div class="header__heading-logo-wrapper">

            {%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}

            {%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}

            {% capture sizes %}(min-width: 750px) {{ settings.logo_width }}px, 50vw{% endcapture %}

            {% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %}

            {{ settings.logo | image_url: width: 600 | image_tag:

              class: 'header__heading-logo',

              widths: widths,

              height: logo_height,

              width: settings.logo_width,

              alt: logo_alt,

              sizes: sizes,

              preload: true

            }}

          </div>

        {%- else -%}

          <span class="h2">{{ shop.name }}</span>

        {%- endif -%}

      </a>

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

    </h1>

  {%- endif -%}

{%- endif -%}



<div class="header__icons{% if section.settings.enable_country_selector or section.settings.enable_language_selector %} header__icons--localization header-localization{% endif %}">

  <div class="desktop-localization-wrapper">

    {%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}

      <localization-form class="small-hide medium-hide" data-prevent-hide>

        {%- form 'localization', id: 'HeaderCountryForm', class: 'localization-form' -%}

          <div>

            <h2 class="visually-hidden" id="HeaderCountryLabel">{{ 'localization.country_label' | t }}</h2>

            {%- render 'country-localization', localPosition: 'HeaderCountry' -%}

          </div>

        {%- endform -%}

      </localization-form>

    {% endif %}



    {%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}

      <localization-form class="small-hide medium-hide" data-prevent-hide>

        {%- form 'localization', id: 'HeaderLanguageForm', class: 'localization-form' -%}

          <div>

            <h2 class="visually-hidden" id="HeaderLanguageLabel">{{ 'localization.language_label' | t }}</h2>

            {%- render 'language-localization', localPosition: 'HeaderLanguage' -%}

          </div>

        {%- endform -%}

      </localization-form>

    {%- endif -%}

  </div>

  {% render 'header-search', input_id: 'Search-In-Modal' %}



  {%- if shop.customer_accounts_enabled -%}

    <a href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}" class="header__icon header__icon--account link focus-inset{% if section.settings.menu != blank %} small-hide{% endif %}">

      <account-icon>

        {%- if customer and customer.has_avatar? -%}

          {{ customer | avatar }}

        {%- else -%}

          {% render 'icon-account' %}

        {%- endif -%}

      </account-icon>

      <span class="visually-hidden">

        {%- liquid

          if customer

            echo 'customer.account_fallback' | t

          else

            echo 'customer.log_in' | t

          endif

        -%}

      </span>

    </a>

  {%- endif -%}



  {%- for block in section.blocks -%}

    {%- case block.type -%}

      {%- when '@app' -%}

        {% render block %}

    {%- endcase -%}

  {%- endfor -%}



  <a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">

    {%- liquid

      if cart == empty

        render 'icon-cart-empty'

      else

        render 'icon-cart'

      endif

    -%}

    <span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>

    {%- if cart != empty -%}

      <div class="cart-count-bubble">

        {%- if cart.item_count < 100 -%}

          <span aria-hidden="true">{{ cart.item_count }}</span>

        {%- endif -%}

        <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>

      </div>

    {%- endif -%}

  </a>

</div>

</{% if section.settings.sticky_header_type != ‘none’ %}sticky-header{% else %}div{% endif %}>

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

{%- render ‘cart-notification’, color_scheme: section.settings.color_scheme, desktop_menu_type: section.settings.menu_type_desktop -%}

{%- endif -%}

{% javascript %}

class StickyHeader extends HTMLElement {

constructor() {

  super();

}



connectedCallback() {

  this.header = document.querySelector('.section-header');

  this.headerIsAlwaysSticky = this.getAttribute('data-sticky-type') === 'always' || this.getAttribute('data-sticky-type') === 'reduce-logo-size';

  this.headerBounds = {};



  this.setHeaderHeight();



  window.matchMedia('(max-width: 990px)').addEventListener('change', this.setHeaderHeight.bind(this));



  if (this.headerIsAlwaysSticky) {

    this.header.classList.add('shopify-section-header-sticky');

  };



  this.currentScrollTop = 0;

  this.preventReveal = false;

  this.predictiveSearch = this.querySelector('predictive-search');



  this.onScrollHandler = this.onScroll.bind(this);

  this.hideHeaderOnScrollUp = () => this.preventReveal = true;



  this.addEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);

  window.addEventListener('scroll', this.onScrollHandler, false);



  this.createObserver();

}



setHeaderHeight() {

  document.documentElement.style.setProperty('--header-height', \`${this.header.offsetHeight}px\`);

}



disconnectedCallback() {

  this.removeEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);

  window.removeEventListener('scroll', this.onScrollHandler);

}



createObserver() {

  let observer = new IntersectionObserver((entries, observer) => {

    this.headerBounds = entries\[0\].intersectionRect;

    observer.disconnect();

  });



  observer.observe(this.header);

}



onScroll() {

  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;



  if (this.predictiveSearch && this.predictiveSearch.isOpen) return;



  if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {

    this.header.classList.add('scrolled-past-header');

    if (this.preventHide) return;

    requestAnimationFrame(this.hide.bind(this));

  } else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {

    this.header.classList.add('scrolled-past-header');

    if (!this.preventReveal) {

      requestAnimationFrame(this.reveal.bind(this));

    } else {

      window.clearTimeout(this.isScrolling);



      this.isScrolling = setTimeout(() => {

        this.preventReveal = false;

      }, 66);



      requestAnimationFrame(this.hide.bind(this));

    }

  } else if (scrollTop <= this.headerBounds.top) {

    this.header.classList.remove('scrolled-past-header');

    requestAnimationFrame(this.reset.bind(this));

  }



  this.currentScrollTop = scrollTop;

}



hide() {

  if (this.headerIsAlwaysSticky) return;

  this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky');

  this.closeMenuDisclosure();

  this.closeSearchModal();

}



reveal() {

  if (this.headerIsAlwaysSticky) return;

  this.header.classList.add('shopify-section-header-sticky', 'animate');

  this.header.classList.remove('shopify-section-header-hidden');

}



reset() {

  if (this.headerIsAlwaysSticky) return;

  this.header.classList.remove('shopify-section-header-hidden', 'shopify-section-header-sticky', 'animate');

}



closeMenuDisclosure() {

  this.disclosures = this.disclosures || this.header.querySelectorAll('header-menu');

  this.disclosures.forEach(disclosure => disclosure.close());

}



closeSearchModal() {

  this.searchModal = this.searchModal || this.header.querySelector('details-modal');

  this.searchModal.close(false);

}

}

customElements.define(‘sticky-header’, StickyHeader);

{% endjavascript %}

{%- 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”,

“max_blocks”: 3,

“settings”: [

{

  "type": "select",

  "id": "logo_position",

  "options": \[

    {

      "value": "top-left",

      "label": "t:sections.header.settings.logo_position.options__2.label"

    },

    {

      "value": "top-center",

      "label": "t:sections.header.settings.logo_position.options__3.label"

    },

    {

      "value": "middle-left",

      "label": "t:sections.header.settings.logo_position.options__1.label"

    },

    {

      "value": "middle-center",

      "label": "t:sections.header.settings.logo_position.options__4.label"

    }

  \],

  "default": "middle-left",

  "label": "t:sections.header.settings.logo_position.label",

  "info": "t:sections.header.settings.logo_help.content"

},

{

  "type": "link_list",

  "id": "menu",

  "default": "main-menu",

  "label": "t:sections.header.settings.menu.label"

},

{

  "type": "select",

  "id": "menu_type_desktop",

  "options": \[

    {

      "value": "dropdown",

      "label": "t:sections.header.settings.menu_type_desktop.options__1.label"

    },

    {

      "value": "mega",

      "label": "t:sections.header.settings.menu_type_desktop.options__2.label"

    },

    {

      "value": "drawer",

      "label": "t:sections.header.settings.menu_type_desktop.options__3.label"

    }

  \],

  "default": "dropdown",

  "label": "t:sections.header.settings.menu_type_desktop.label",

  "info": "t:sections.header.settings.menu_type_desktop.info"

},

{

  "type": "select",

  "id": "sticky_header_type",

  "options": \[

    {

      "value": "none",

      "label": "t:sections.header.settings.sticky_header_type.options__1.label"

    },

    {

      "value": "on-scroll-up",

      "label": "t:sections.header.settings.sticky_header_type.options__2.label"

    },

    {

      "value": "always",

      "label": "t:sections.header.settings.sticky_header_type.options__3.label"

    },

    {

      "value": "reduce-logo-size",

      "label": "t:sections.header.settings.sticky_header_type.options__4.label"

    }

  \],

  "default": "on-scroll-up",

  "label": "t:sections.header.settings.sticky_header_type.label"

},

{

  "type": "checkbox",

  "id": "show_line_separator",

  "default": true,

  "label": "t:sections.header.settings.show_line_separator.label"

},

{

  "type": "header",

  "content": "t:sections.header.settings.header__1.content"

},

{

  "type": "color_scheme",

  "id": "color_scheme",

  "label": "t:sections.all.colors.label",

  "default": "scheme-1"

},

{

  "type": "color_scheme",

  "id": "menu_color_scheme",

  "label": "t:sections.header.settings.menu_color_scheme.label",

  "default": "scheme-1"

},

{

  "type": "header",

  "content": "t:sections.header.settings.header__3.content",

  "info": "t:sections.header.settings.header__4.info"

},

{

  "type": "checkbox",

  "id": "enable_country_selector",

  "default": false,

  "label": "t:sections.header.settings.enable_country_selector.label"

},

{

  "type": "header",

  "content": "t:sections.header.settings.header__5.content",

  "info": "t:sections.header.settings.header__6.info"

},

{

  "type": "checkbox",

  "id": "enable_language_selector",

  "default": false,

  "label": "t:sections.header.settings.enable_language_selector.label"

},

{

  "type": "header",

  "content": "t:sections.header.settings.mobile_layout.content"

},

{

  "type": "select",

  "id": "mobile_logo_position",

  "options": \[

    {

      "value": "center",

      "label": "t:sections.header.settings.mobile_logo_position.options__1.label"

    },

    {

      "value": "left",

      "label": "t:sections.header.settings.mobile_logo_position.options__2.label"

    }

  \],

  "default": "center",

  "label": "t:sections.header.settings.mobile_logo_position.label"

},

{

  "type": "header",

  "content": "t:sections.all.spacing"

},

{

  "type": "range",

  "id": "margin_bottom",

  "min": 0,

  "max": 100,

  "step": 4,

  "unit": "px",

  "label": "t:sections.header.settings.margin_bottom.label",

  "default": 0

},

{

  "type": "header",

  "content": "t:sections.all.padding.section_padding_heading"

},

{

  "type": "range",

  "id": "padding_top",

  "min": 0,

  "max": 36,

  "step": 4,

  "unit": "px",

  "label": "t:sections.all.padding.padding_top",

  "default": 20

},

{

  "type": "range",

  "id": "padding_bottom",

  "min": 0,

  "max": 36,

  "step": 4,

  "unit": "px",

  "label": "t:sections.all.padding.padding_bottom",

  "default": 20

}

],

“blocks”: [

{

  "type": "@app"

}

]

}

{% endschema %}

doren67mark · October 28, 2025, 10:13am

elegowisko:

Hello This is the header code; please help move the search icon next to the customer account icon and add social media icons.

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

{%- if section.settings.menu_type_desktop == ‘mega’ -%}

{%- endif -%}

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

{{ ‘component-cart-drawer.css’ | asset_url | stylesheet_tag }}

{{ ‘component-cart.css’ | asset_url | stylesheet_tag }}

{{ ‘component-totals.css’ | asset_url | stylesheet_tag }}

{{ ‘component-price.css’ | asset_url | stylesheet_tag }}

{{ ‘component-discounts.css’ | asset_url | stylesheet_tag }}

{%- endif -%}

header-drawer { justify-self: start; margin-left: -1.2rem; } {%- if section.settings.sticky_header_type == ‘reduce-logo-size’ -%} .scrolled-past-header .header__heading-logo-wrapper { width: 75%; } {%- endif -%} {%- if section.settings.menu_type_desktop != “drawer” -%} @media screen and (min-width: 990px) { header-drawer { display: none; } } {%- endif -%} .menu-drawer-container { display: flex; } .list-menu { list-style: none; padding: 0; margin: 0; } .list-menu–inline { display: inline-flex; flex-wrap: wrap; } summary.list-menu__item { padding-right: 2.7rem; } .list-menu__item { display: flex; align-items: center; line-height: calc(1 + 0.3 / var(–font-body-scale)); } .list-menu__item–link { text-decoration: none; padding-bottom: 1rem; padding-top: 1rem; line-height: calc(1 + 0.8 / var(–font-body-scale)); } @media screen and (min-width: 750px) { .list-menu__item–link { padding-bottom: 0.5rem; padding-top: 0.5rem; } } my wisely

{%- style -%}

Hello,

We sell retreats and are currently facing an issue with our automated emails. When a client books a retreat, they correctly receive an automated booking confirmation email for their chosen retreat. However, they are also receiving another automated confirmation email for a completely different retreat on another date, making it appear as though they have booked two retreats. I’ve spent hours trying to fix this using the AI help feature but haven’t been able to resolve it.

Topic		Replies	Views
Dawn Theme: How do I add social media icons to the header infront of the cart icon? Technical Q&A	10	35	October 17, 2022
Getting Dawn Theme To Display Social Media Icons In Header Technical Q&A	0	17	October 9, 2022
Dawn Theme - Adding social media to header Store Design design , css	8	125	December 8, 2022
How can I change the look of my search icon in the header? Store Design design , customizations , css , shopify-themes	10	56	March 27, 2023
Need help with search box in Dawn theme Store Design	1	49	November 22, 2022

Moving the search icon and adding social media icons to the header

Topic summary

Related topics