Narrative Theme: Adding search bars

Highlighted
Tourist
5 0 2

My website is https://oliverfox.co/

I need help implementing some search bars in specific areas.

 

First, I need one at the top of the landing page, next to the cart.

 

search 1.jpg

 

 

Second, I want to move the search bar in the sidebar from the bottom to the top for easier access. Also, I want to have a buffer between the search bar and the first menu item. (If this conflicts with the search bar from the first request, I will just settle with the first one.)

 

search 2.jpg

Highlighted
New Member
1 0 1

I am also looking for a way to: 

 

1. Get the search bar next to the cart option at homepage.

 

2. Move search bar from bottom to the top of menu.

 

Couldn't find any solution on google. 

Highlighted
Tourist
3 0 0

same problem

0 Likes
Highlighted
Tourist
6 0 1

You can move {% include 'search-bar', animate: true, disableTab: true %} from line 170 to line 88 in sections/header.liquid

then moltiply per 0 $Gutter for .navigation__search class and its media query to reduce top margin in assets/theme.scss.liquid

at about line 5783.

0 Likes
Highlighted
New Member
2 0 0

I also need this! Any help would be great.

0 Likes
Highlighted
New Member
2 0 0

I should start by saying that I'm not a coder. I do build basic shopify sites but I try not to code. This works for me though as you can see by the screen shots.

You can move the search bar to the top right of the drop down menu in Narrative by doing the following:

Go to 'header.liquid' in your theme code - sections. 

IF YOU WANT IT ON THE LEFT CORNER

Cut this from line 168 {% include 'search-bar', animate: true, disableTab: true %} (you also type Search by colour or design after the bracket so that it appears under the search line) and paste it in line 86. 

search by colour.png

Then select Save. It is a good idea to copy your theme before playing with the code.

IF YOU WANT IT AT TOP OF THE MENU LINKS IN THE MIDDLE

Cut this from line 168 {% include 'search-bar', animate: true, disableTab: true %} and paste it in line 88

SEARCH MIDDLE.png

Head over to my website if you need any other tips for branding and social media posts etc. www.zeegers.com.au

 

0 Likes
Highlighted
New Member
2 0 0

Hi, 

I have a similar issue, My client wants a search bar on the collections page, the Shopify URL is https://premium-framed-vinyls.myshopify.com/. I'll really appreciate any help I can get. Thank you. 

0 Likes
Highlighted
New Member
2 0 0

the spacing on this is very tight. any way to remove some padding/margin above and add some margin/padding below the search bar?

0 Likes
Highlighted
New Member
2 0 0
You could try adding a line break by inserting
before the text? They
are both single tags and therefore do not need a closing tag.
So your code will now look like this:
{% include 'search-bar', animate: true, disableTab: true %}

Search by colour or design

If you want it to match with your theme you will need to start a new
paragraph.
www.zeegers.com.au - shopify partner
0 Likes