Add search icon/bar to header on Narrative theme

Solved
tompa
Tourist
8 1 5

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

KetanKumar
Shopify Partner
20314 2103 7613

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 5

Hi Ketan! Thanks for the reply.

My store url is: https:/emmys.se

0 Likes
tompa
Tourist
8 1 5
KetanKumar
Shopify Partner
20314 2103 7613

@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
0 Likes
tompa
Tourist
8 1 5

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 

0 Likes
tompa
Tourist
8 1 5

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
20314 2103 7613

@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
0 Likes
hippiehavenshop
New Member
1 0 0

thank you so much!

 

Where do you add the padding?

 

0 Likes
tompa
Tourist
8 1 5

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.

 

0 Likes