Help

Adding a Product Search Field

Some themes already have built in support for product search fields. To check if your theme already has this feature built in, do the following:

1. Go to your store's admin area.
2. Click "Storefront" > "Theme" in the dashboard navigation.
3. Click the "Options" button on your current Theme.
4. Look for an option that says something like "Display Product Search Field in Sidebar".
5. If it's there, enable it and click save.

If your theme doesn't already have this feature built in, try going to http://yourstore.limitedrun.com/products/search and see if there's a search box. If there is, you can simply create a new "Redirect to External Website" Page (see instructions here) that points to your /products/search URL. This link will appear alongside your other pages and visitors will be able to conduct searches on that page.

If your Theme doesn't have a /products/search page or you'd like a search field always available in your Storefront, you'll want to make sure you can edit your current Theme's HTML. If your "HTML / CSS" button is currently disabled, see this help doc about making changes to your Theme's HTML.

After confirming you can make changes to your HTML, click the "HTML / CSS" button in the "Storefront" > "Theme" area of your dashboard. From here, find the default.html layout file and click "Edit". Find the spot you'd like to add a search field, and past the following HTML:

<form id="search" action="/products/search" method="get"> 
  <input type="input" name="q" value="{{ query }}"> <a href="#">»</a> 
</form>

You may also want to check your search.html and ensure you have HTML to display search results. Here's sample HTML to get you started on that page:

<div id="product-grid">
  {% for product in products %}
    <div class="product">
      <a class="image" href="{{ product.url }}" style="{% if product.images.size > 0 %}background-image:url({{ product.images.first.v200_url }});{% endif %}">
         
      </a>
      <a class="info" href="{{ product.url }}">
        {{ product.name }} - {{ product.price_range | money | join: ' - ' }}
      </a>
    </div>
  {% endfor %}
</div>