Add a Search Bar to Sidebar in Pop Theme?

Solved
Highlighted
Tourist
4 0 0

I'm using the Pop theme on my store but have no idea how to get a search bar onto the sidebar.  The only thing I can manage is a "Search" hyperlink in the footer.  

 

I've searched and found some previous threads that have solutions but those were several years old and the code is different now unfortunately.

 

Any help would be much appreciated!  Thanks :)

0 Likes
Highlighted
Explorer
66 5 7

This is an accepted solution.

Hello 

Follow the below given steps:-

1) Copy the below given code

<div class="search-field">
<form action="{{ routes.search_url }}" method="get" class="input-group search-bar" role="search">
{% comment %}<input type="hidden" name="type" value="product">{% endcomment %}
<input type="search" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" class="input-group-field" aria-label="{{ 'general.search.placeholder' | t }}">
<span class="input-group-btn">
<button type="submit" class="btn icon-fallback-text">
<span class="icon icon-search" aria-hidden="true"></span>
<span class="fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
</span>
</form> 
</div>

2) Dashboard->Onlinestore->themes->Sections->header.liquid

3) Paste the code given in (1) above this section in header.liquid

<div class="medium-down--hide">
<ul class="site-nav">

You can also paste the code as per your requirement where you want to display the search bar in side-bar

-Want to customize or make changes to a theme? Hire me.
-If my reply was helpful, Click Like to let me know!
- If your question was answered, Mark it as an Accepted Solution!
Highlighted
Tourist
4 0 0

That did the trick!  Thanks so much for the quick reply :)

0 Likes
Highlighted
Tourist
4 0 0

Quick follow-up question!

How would I go about changing the color of the search icon on the search bar? Right now its a dark grey icon on a dark grey background so it's not visible.

0 Likes
Highlighted
Explorer
66 5 7

Add this css to theme.css

.search-field span.icon.icon-search {
    color: red;
}

Instead of red you can use any color which you wants.

-Want to customize or make changes to a theme? Hire me.
-If my reply was helpful, Click Like to let me know!
- If your question was answered, Mark it as an Accepted Solution!
Highlighted
Tourist
4 0 0

Perfect!  Thanks again for your help :)

0 Likes
Highlighted
New Member
3 0 0

Thank you for the help! I too am having some difficulty changing the search icon. By chance, where can I find  'theme.css' to add the 'css' provided in the above instructions. 

0 Likes
Highlighted
New Member
3 0 0

Thank you ! By chance, where do I find theme.css? 

0 Likes
Highlighted
Explorer
66 5 7
Hello LoJack,
Follow the steps:-

Dashboard->Online store->Themes->assets->theme.scss.liquid

Here you can add your css code.

-Want to customize or make changes to a theme? Hire me.
-If my reply was helpful, Click Like to let me know!
- If your question was answered, Mark it as an Accepted Solution!
Highlighted
New Member
3 0 0

Thank you so much for your help and quick response as I've been tackling this issue for a few days now.  When I follow the pathway provided above, I am only 

presented with the following options: 

 

I am having some difficulty locating--> theme.scss.liquid

 

sScreenshot 2019-09-24 at 2.21.41 PM.png

0 Likes