Solved

Add search icon/bar to header on Narrative theme

tompa
Tourist
8 1 7

As the title says. Anyone figured out a way this can be done? I've searched the forum but haven't found any answers.

Accepted Solution (1)
tompa
Tourist
8 1 7

This is an accepted solution.

Ok so i wasn't able to add an icon like i wanted, but i was able to add a search bar to the header on the Narrative theme, which will do for now. I'll explain how i did it in case anyone else wants to add a search bar to the header on the Narrative theme as well.

1. Find the header.liquid file under the sections folder.

2. Then paste {% include 'search-bar' %} under the </header> tag.

 

<div class="site-header__section site-header__section--button">
        <a href="{{ routes.cart_url }}" class="btn btn--clear btn--square btn--hover-scale site-header__cart ajax-cart__toggle" aria-expanded="false">
          {%- assign icon = 'icon-header-' | append: section.settings.icon %}
          {% include icon %}
          <span class="icon__fallback-text">{{ 'general.header.view_cart' | t }}</span>
          <span class="site-header__cart-bubble{% if cart.item_count > 0 %} site-header__cart-bubble--visible{% endif %}"></span>
        </a>
      </div>
    </div>
    {% include 'search-bar' %}
  </header>
</div>

 

 3. Voila

From there you'll have to fix a little with the padding and margins to fit your theme. I've done this:

 

.navigation__search {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    //margin-bottom: 20px;
    border-radius: 10px;
    padding: 10px 20px 20px 20px;
}

.input-group--underline {
    border: 1px solid #000;
}

.input-group--underline {
    position: relative;
    display: flex;
    width: 100%;
    border-collapse: separate;
}

 

 

Cheers

View solution in original post

Replies 16 (16)

KetanKumar
Shopify Partner
36839 3635 11972

Hello, @tompa 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
tompa
Tourist
8 1 7

Hi Ketan! Thanks for the reply.

My store url is: https:/emmys.se

tompa
Tourist
8 1 7
KetanKumar
Shopify Partner
36839 3635 11972

@tompa 

sorry for late 

yes, it can be done some custom code in header fils and this icon 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
tompa
Tourist
8 1 7

Yes i'm sure it can, but how? I'd even be happy adding a search bar myself using the cusom html module on the Narrative theme, but would need someone to help me connect it with the right code. @KetanKumar 

tompa
Tourist
8 1 7

This is an accepted solution.

Ok so i wasn't able to add an icon like i wanted, but i was able to add a search bar to the header on the Narrative theme, which will do for now. I'll explain how i did it in case anyone else wants to add a search bar to the header on the Narrative theme as well.

1. Find the header.liquid file under the sections folder.

2. Then paste {% include 'search-bar' %} under the </header> tag.

 

<div class="site-header__section site-header__section--button">
        <a href="{{ routes.cart_url }}" class="btn btn--clear btn--square btn--hover-scale site-header__cart ajax-cart__toggle" aria-expanded="false">
          {%- assign icon = 'icon-header-' | append: section.settings.icon %}
          {% include icon %}
          <span class="icon__fallback-text">{{ 'general.header.view_cart' | t }}</span>
          <span class="site-header__cart-bubble{% if cart.item_count > 0 %} site-header__cart-bubble--visible{% endif %}"></span>
        </a>
      </div>
    </div>
    {% include 'search-bar' %}
  </header>
</div>

 

 3. Voila

From there you'll have to fix a little with the padding and margins to fit your theme. I've done this:

 

.navigation__search {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    //margin-bottom: 20px;
    border-radius: 10px;
    padding: 10px 20px 20px 20px;
}

.input-group--underline {
    border: 1px solid #000;
}

.input-group--underline {
    position: relative;
    display: flex;
    width: 100%;
    border-collapse: separate;
}

 

 

Cheers

KetanKumar
Shopify Partner
36839 3635 11972

@tompa 

great Thanks and update here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
hippiehavenshop
Visitor
1 0 0

thank you so much!

 

Where do you add the padding?

 

tompa
Tourist
8 1 7

To the .navigation_search class, see the attached code in my previous post. You can add custom css to your theme code at the very bottom of the theme.css file.

 

Emmaco
Visitor
1 0 0

Hello @tompa ,

I followed all the steps but I would like to change a small (not so small detail). I wish for the navigation search to be in the sticky header, at the same level of the burger menu, the title and the cart item and therefore to follow the same behaviour. Could you please help me with this ?

Thank you very much,
Emma 

moodnz
Visitor
1 0 1

Hi there

 

my site https://mood.nz/ is not getting this to work. I added the section in line 86 but the height of the header goes bigger and the search bar comes up as black (not white)

 

Any help is appreciated.

 

Kind regards

James

 

KetanKumar
Shopify Partner
36839 3635 11972

@moodnz 

sorry for that issue 

i can't see any search bar code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
h_bulfield
Visitor
1 0 0

I've tried adding the search bar into my site, however it comes up with this error. Liquid error (sections/header.liquid line 442): Could not find asset snippets/search-bar.liquid

 

Any ideas on what to do?

KetanKumar
Shopify Partner
36839 3635 11972

@h_bulfield 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

OscarKraken
Excursionist
12 0 6

Paste this above line 217 in the header.liquid tab.

 

 <div class="input-group__btn">
        <a href="/search" class="btn btn--clear btn--square">
          <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 21.4 21.4"><path fill="#444" d="M13.4 0c-4.4 0-8 3.6-8 8 0 1.8.6 3.5 1.7 4.9L0 20l1.4 1.4 7.1-7.1c1.4 1.1 3.1 1.7 4.9 1.7 4.4 0 8-3.6 8-8s-3.6-8-8-8zm0 14c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"></path></svg>
          <span class="icon__fallback-text">Search</span>
        </a>
      </div>
mayuum
Shopify Partner
4 0 1

This worked perfectly on my client's Narrative theme. Thank you so much for sharing this!!