The issue occurs because the Searchanise Search & Filter 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.
- Go to the Searchanise Search & Filter control panel > Search & Navigation > Search results widget section > Custom CSS tab.
- Set the Custom CSS toggle to ON if it was switched off.
- 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.
- 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.
