Add a Search Bar to Sidebar in Pop Theme?

Solved
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

Success.

Explorer
65 5 6

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!
1 Like
Tourist
4 0 0

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

0 Likes
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
Explorer
65 5 6

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!
1 Like
Tourist
4 0 0

Perfect!  Thanks again for your help :)

0 Likes
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
New Member
3 0 0

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

0 Likes
Explorer
65 5 6
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!
1 Like
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