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.

    select actions 

  4. Select Edit HTML / CSS.

    select edit html / css 

  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!

Have more questions? Submit a request