Top

Symmetry Theme Search Box Modification

The remove the hidden products from the search drop-down and prevent them from showing up in the search quantities, follow these steps:

  1. Duplicate themes, to create a backup copy.
  2. From "Shopify Admin", select Online Store.

    select online store 

  3. Select Actions.

    Actions 

  4. Select Edit code.

    Edit code 

  5. Under "Config", select search.json.liquid.

    Select search.json.liquid 

  6. Replace all code in the file with this:

    {% layout none %}
    {% comment %} Inspired by: http://ecommerce.shopify.com/c/ecommerce-design/t/diy-implementing-autocomplete-with-search-144104 {% endcomment %}
    {% paginate search.results by 10 %}
     {% capture output %}
    {% assign first = 1 %}
     {% for result in search.results %}
    {% if result.metafields.inventory.ShappifyHidden == "true" %}{% else %}
          {% if first == 1 %}{% assign first = 0 %}{% else %},{% endif %}
            {% assign resultURL = result.url %}
            {% assign thumbURL = result.images[0] | product_img_url: 'thumb' %}
    
            {"title":"{{ result.title | replace: '\\', '\\\\' | replace: '"', '\\"' | replace:  '/','\\/' }}",
               "url":"{{ result.url   | replace: '\\', '\\\\' | replace: '"', '\\"' | replace:  '/','\\/' }}",
             "thumb":"{{ thumbURL     | replace: '\\', '\\\\' | replace: '"', '\\"' | replace:  '/','\\/' }}",
                "id":{{result.id}} }
        {% endif %}{% endfor %}
    {% endcapture %}
    
    {% comment %} Output the json object {% endcomment %}
    {"results_total":{{paginate.items}},"results":[{{ output | strip_newlines }}]}
    {% endpaginate %}
  7. Select Save.

    Select save 

  8. Under "Templates", select search.liquid.

    select search.liquid 

  9. Comment out this line:

    <h5>We found {{ paginate.items }} {{ paginate.items | pluralize: 'result','results' }}</h5>

    Note: to comment out a line, enter <!-- before it and --> after it, the result will look like this: 

    <!-- <h5>We found {{ paginate.items }} {{ paginate.items | pluralize: 'result','results' }}</h5> -->
  10. Select Save.

    Select save 

  11. Under "Assets", select main.js.liquid.

    select main.js.liquid 

  12. Remove (' + data.results_total + ') from this line:

    $resultsBox.append('<a href="' + linkURL + '" class="note">See all results (' + data.results_total + ')</a>');

    The result will look like this:

    $resultsBox.append('<a href="' + linkURL + '" class="note">See all results</a>'
  13. Select Save.

    Select save

That's it!

Next Steps