Globo Docs
Smart Product Filter & Search
Smart Product Filter & Search
  • Basic Knowledge
    • Getting Started
    • Integrate app to theme
    • Disable app from theme
  • Supported shopify themes
  • Sync Product Data
  • App pricing
  • Translate app to different languages
  • Filter sidebar management
    • Enable filter sidebar on search page
    • Show rating stars in filter sidebar
  • Use AND filtering condition in same filter option
  • Change filter tree style
  • Configure filter sidebar
    • Default filter sidebar
    • Create filter sidebar for specific collection
    • Disable filter sidebar for specific collection
    • Enable filter on search result page
  • Configure filter options
    • Add new filter option
    • Manage filter option values
      • Select filter option values manually
      • Select filter option values by value prefix
      • Delete a filter option value
    • Sort order of filter option values
      • Sort values alphabetically
      • Sort values manually
    • Delete filter option
  • Expand filter options by default
  • Hide matching product count in filter options
  • Color swatch for filter option
    • Show color swatch for filter option
    • Change color swatch shape & size
  • Configure collection data source
    • Add sub-collections to filter option
    • Display all collection values in filter option
  • Merge filter option values into group
  • Product Grid layout
    • Use theme product list layout
    • Use app product list layout
    • Customize app's product list template
  • Product Grid Management
    • Product variants under product card
      • Configure product variants underneath product cards
      • Change product variants shape
    • Hide specific products on collection & search page
    • Show product options under product cards
    • Show variants as separate products
  • Manage sorting products
    • Sort product order manually
    • Remove entire sort by dropdown
    • Enable/disable a sort option
    • Configure a default sorting option
  • Hide total number of products
  • Push sold-out products to bottom
  • Display in-stock products on top
  • Hide out-of-stock products
  • Manage paging style
  • Display chosen variant image after filtering
  • Search products on collection page
  • Product/variant metafields
    • Enable product metafield
  • Filter products by Metafield
  • Search products by Metafield
  • Sort products by Metafield
  • Year - Make - Model (YMM) form
    • Create YMM form
    • Configure YMM metafield values
    • Display values on YMM form
      • Select YMM values manually
      • Select YMM values by value prefix
  • Instant search widget
    • Enable instant search widget
    • Instant search widget layout
      • Customize instant search layout
      • Change product list style
    • Search for blog posts & pages
  • Manage search fields
  • Use Search Analytics
  • Synonyms settings
    • Configure Synonyms
    • Understanding synonym relationships
  • Configure pinning products
  • Configure search redirect
  • Show suggestion when no search result found
  • Show suggestions before typing
  • Recommendations
    • Add a recommendation section
  • Adjust number of products by screen size
  • Change recommendation widget name
  • App Integrations
    • Product review apps
  • Multi-language apps
  • Wishlist apps
  • Product Label apps
  • Multi-currencies apps
  • Other apps
  • Frequently Ask Questions
    • What happens after Trial ends?
Powered by GitBook
On this page
  • πŸ›  Steps to Change the Style
  • πŸ’‘ Tip
  • πŸ’¬ Need Help?
  1. Instant search widget
  2. Instant search widget layout

Change product list style

PreviousCustomize instant search layoutNextSearch for blog posts & pages

Last updated 17 days ago

The instant search widget shows a product list as soon as customers start typing in the search bar. You can customize how this list looks - either as a grid or a list layout.

✨ Example of a grid style:


πŸ›  Steps to Change the Style

  1. Open the App From your Shopify admin, go to Apps β†’ Smart Product Filter & Search.

  2. Go to Instant Search Settings In the left sidebar, click Search β†’ then scroll down to the Instant Search Widget tab.

  3. Choose preferred search widget layout Find the section called Search widget layout and choose one layout:

    • Overlay full width

    • Dropdown two columns

  4. Choose product list style

    • Find the section called Search Results:

    • Choose your preferred style:

      • Grid View – products appear in rows and columns (like on collection pages).

      • Carousel View – products appear in a slider.

  1. Click Save After selecting your layout, click the Save button to apply changes.


πŸ’‘ Tip

  • The Grid View is ideal if your products have large images and you want a clean, modern look.

  • The List View works well if you want to show more text details, like price or description.


πŸ’¬ Need Help?

If you're not sure which layout works best for your store, or if you’re not seeing changes after saving, feel free to contact us at [email protected] - we're happy to help!