Search Results Widget is not taking up the width of Shopify page

The issue occurs because the Smart Search Bar & Filters app uses the theme template to show search results. Sometimes, the template itself is too narrow.

You can fix it by making the page container of your theme template wider for the Search Results Widget on Shopify, using the Custom CSS feature. A page container is a block that wraps the main content of your website.

To change the width of the search results page container, follow these steps:

Important info

This is not a universal solution and additional adjustments might be needed in some cases, so don’t hesitate to contact us. We will be happy to assist.

  1. Go to the Smart Search Bar & Filters control panel > Search & Navigation > Search results widget section > Custom CSS tab.
  2. Set the Custom CSS toggle to ON if it was switched off.
  3. Enter CSS rules to change the width of the widget’s page container, as in the example here:
    .snize-results-page .container--tiny {
        max-width: 1600px;
    Important info
    • snize-results-page – the CSS class of the Search Results Widget, which wraps the main content including the page container, so the changes will happen in the widget only.
    • container–tiny – an example of a CSS class of a page container. It varies from theme to theme. You need to paste the CSS class of the theme page container here. 

  4. Apply the changes

That’s it. The new styles are now applied. You can now go to your storefront and check out how it looks.

Updated on March 21, 2023

Was this article helpful?

Related Articles

Need Support?
Can't find the answer you're looking for?
Contact Support
Back to top