If you're using the default theme, this will be added automatically for you. If you have customized your theme in any tiny way (including integrating with certain 3rd party services), or are using the pre-Cooper default theme, you will need to add the code manually.
You'll be needing this section of code. You probably want to put it in your 'Layout' file in the sidebar somewhere but that's up to you.
<div id="searchbox">
<form action="/search" method="GET" class="storefront-search">
<input type="text" name="q" placeholder="Search" value="{{ search.term }}"/>
<button type="submit">
<img src="/assets/storefront/search-icon.svg"
width="15" height="15" alt="Search" />
</button>
</form>
</div>
If you want to show people when a search was performed but no results were found, you'll also need to add in code for that. As an example the Cooper theme uses this code on the 'Collections' page:
{% if !search.performed %}
<p id="search_text">Found
{{ search.results_count | pluralize: 'result', 'results' }}
for "{{ search.term }}"
</p>
{% endif %}
{% if products.current != blank %}
<ul class="products row">
{% for product in products.current %}
<li class="product col3" id="products_{{product.id}}">
<div class="flags">
{% if product.on_sale %}
<div class="on_sale flag status">On Sale</div>
{% endif %}
{% if product.preorder %}
<div class="preorder flag status">Preorder</div>
{% endif %}
{% if product.coming_soon %}
<div class="coming_soon flag status">Coming Soon</div>
{% endif %}
{% if product.sold_out %}
<div class="sold_out flag">Sold Out</div>
{% endif %}
</div>
<a href="{{product.url}}">
<img src="{{ product.photo.url_400sq }}"
alt="{{ product.photo.alt | escape }}" class="product-photo" />
<p class="product_name">
{{ product.name | strip_html }}
</p>
<span class="product_price">
{{ product.price | money_with_sign }}
</span>
</a>
</li>
{% endfor %}
</ul>
<div class="pagination">
{{ pagination.default_links }}
</div>
{% else %}
<div class="no-products">
<p>
{% if search.performed %}
No products found.
{% else %}
Nothing here yet.
{% endif %}
</p>
</div>
{% endif %}
Comments
0 comments
Article is closed for comments.