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
  • ⚡ Important! Don’t Miss This:
  • 1. Enable the Display of Selected Variant Images
  • 2. Configure Color Swatches Under Products

Display chosen variant image after filtering

PreviousManage paging styleNextSearch products on collection page

Last updated 1 month ago

Enhancing your Shopify store by displaying the selected variant's image on collection pages can significantly improve the shopping experience. The Smart Product Filter & Search app offers a simple way to enable this feature.

⚡ Important! Don’t Miss This:

📌 App Layout Requirement: This feature only works when the app layout is enabled.

1. Enable the Display of Selected Variant Images

Access the App Settings:

  • From your Shopify admin, go to Apps → Smart Product Filter & Search.

Navigate to Product Grid Settings:

  • In the app's left-hand sidebar, click on Filters.

  • Select the Product Grid tab.

Adjust General Settings:

  • Scroll down to the General Settings section.

  • Check the box labeled Display price and image of variants that match the filters.

2. Configure Color Swatches Under Products

Scroll to Swatches Settings:

  • Keep scrolling to find the Swatches section at the bottom of the settings page.

Set Up Color Product Options:

  • Define the Color Product Option to ensure the correct variant images are displayed.

  • ⚠️ Note: This feature only works with the Variant Image/Color Swatch display type.

Save Your Changes:

  • Click Save to apply the new settings.

By following these steps, your collection pages will dynamically display images corresponding to the selected product variants, giving customers a more interactive shopping experience.

💬 Need Help? Contact us at [email protected] – we’re happy to assist! 😊