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
  • 🛠 How to Customize the Layout
  • 💡 Tips
  • 💬 Need Help?
  1. Instant search widget
  2. Instant search widget layout

Customize instant search layout

PreviousInstant search widget layoutNextChange product list style

Last updated 17 days ago

The Instant Search Widget lets customers see live product suggestions as they type. With Smart Product Filter & Search, you can customize how this widget looks on your store.

  • Overlay fullwidth:

  • Dropdown one column:

  • Dropdown two columns

🛠 How to Customize the Layout

  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

    • Dropdown one column

  4. Click Save to apply the changes.

Step 3 – Customize Layout Details (Optional)

  1. You can configure the product list layout (Grid/carousel).

  2. You can set:

    • The maximum number of products shown in the instant search widget.

    • Whether to show product prices, product vendors, etc.

  3. After adjusting your settings, click Save.

💡 Tips

  • Choose a layout that fits your brand and product range for the best customer experience.

💬 Need Help?

If you need assistance customizing your search layout, feel free to contact our support team: 📧 [email protected]