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
  • 🔘 Option A: Display Product Variants Using Variant Images
  • 🎨 Option B: Display Product Variants Using Color Hex values
  • 🔘 Option C: Display Product Variants Using Text
  • 💬 Need Help?
  1. Product Grid Management
  2. Product variants under product card

Configure product variants underneath product cards

PreviousProduct variants under product cardNextChange product variants shape

Last updated 18 days ago

🔘 Option A: Display Product Variants Using Variant Images

This option shows actual product variant images (e.g. product photos for each color).

Steps:

  1. Open the Smart Product Filter & Search app.

  2. In the left sidebar, click on Filter.

  3. Go to Product Grid tab.

  4. Scroll down to the Swatches section.

  5. Click Add swatch option button.

  6. In the Display Type dropdown, choose Variant Image option.

  7. Click Save to finish.


🎨 Option B: Display Product Variants Using Color Hex values

This option shows color circles or squares using the color value (e.g. red, blue, #000000).

Steps:

  1. Open the Smart Product Filter & Search app.

  2. In the left sidebar, click on Filter.

  3. Go to Product Grid tab.

  4. Scroll down to the Swatches section.

  5. Click Add swatch option button.

  6. In the Display Type dropdown, choose Color swatch option.

  7. Click Save to finish.


🔘 Option C: Display Product Variants Using Text

Steps:

  1. Open the Smart Product Filter & Search app.

  2. In the left sidebar, click on Filter.

  3. Go to Product Grid tab.

  4. Scroll down to the Swatches section.

  5. Click Add swatch option button.

  6. In the Display Type dropdown, choose Text option.

  7. Click Save to finish.

💬 Need Help?

If you have any questions or need assistance, feel free to contact our support team: 📩 [email protected]