HomeGuidesAPI Reference

My search results are appearing in a very narrow space

Suggest Edits

Our search results are optimized to work on desktop, tablet and mobile devices. Due to this dynamic nature it’s best to allow our search results to fill in the whole page width and provide your customers with the best possible experience. Unfortunately sometimes the theme you’re using may hinder this behavior.
There are 2 main causes for this:

Cause #1: Sidebars

If our search results view needs to be shown next to a sidebar then it will naturally make the search results narrower. We already provide a great sidebar/faceting experience for your customer thus we can easily hide unwanted sidebars.
To hide unwanted sidebars:

  1. Identify the unique selector for the sidebar on the search results page.
  2. Append a line in your css file to hide it, example:
#search .sidebar {display: none !important;}
#search .content {display: 100% !important;}

Shopify tip – To make this change, edit your template, navigate to “Assets” and then select “style.scss.liquid”. The Shopify selectors are usually as follows, so you can can simply paste these lines in the bottom of your file.

#search-results .main-content .large—one-fifth {display: none !important;}
#search-results .main-content .large—four-fifths {width:100% !important;}

Cause #2: Narrow, fixed-width container (no sidebar)

Sometimes your theme will limit the width of the search results view container which can hinder the experience of your customers and reduce your revenue.
To make your search results container big:

  1. Identify an unique selector for the search results container on the search results page.
  2. Append a line in your css file to expand it, example:
#findify-search-results {width: 100%;}

👍

Shopify tip #1

To make this change, edit your template, navigate to “Assets” and then select “style.scss.liquid”. The Shopify selector is usually as follows, so you can can simply paste this line in the bottom of your file:

 #search-results .main-content .grid .grid__item {width:100% !important;}

Shopify Supply theme

If you are using a Supply theme on Shopify, you can also use this MJS API code to make the search results wider. You would need to put it in the <head> section of you layout.liquid file

(function($) {
	window.findifyApiRegistry = [
		{
			hook: "search.results",
			didMount: function() {
				$("#findify_results").parents(".grid-item").removeClass("large--two-thirds push--large--one-sixth");
			}
		}
	];
}(jQuery));

Updated almost 7 years ago