Shopify themes, liquid, logos, and UX
As the title says. Anyone figured out a way this can be done? I've searched the forum but haven't found any answers.
Solved! Go to the solution
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
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.
Hi Ketan! Thanks for the reply.
My store url is: https:/emmys.se
sorry for late
yes, it can be done some custom code in header fils and this icon
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
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
great Thanks and update here.
thank you so much!
Where do you add the padding?
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.
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
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
sorry for that issue
i can't see any search bar code
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?
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.
Paste this above line 217 in the header.liquid tab.
This worked perfectly on my client's Narrative theme. Thank you so much for sharing this!!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024