Knowledge Base

Merchandising Cloud

/autocomplete
Add to Cart Button
Adding Content Search to Autocomplete and Search Results
Advanced Integration Overview
Analytics JS Overview
Analytics Overview
Authentication
Autocomplete: Usage & Components
Color Mapping
Color Swatches
Compare App
Content API
Content Search Use Cases
Controlling Global Styling for Findify Elements
Custom MerchantJS Integration Steps
Customization Design Scope (MJS React)
Dashboard Access and Management
Filter Clear Button
Framework
GDPR
Gateway Overview
Generating BigCommerce Credentials
Getting Started
Grid Control
Hotjar Analytics
Include Sorting within Mobile Filters
Inside a Popup
JS SDK Overview
Merchandising Cloud
Merchandising Cloud Integration Steps
Merchandising Cloud Overview
Merchandising Overview
Merchant JS API Overview
Multimarket Overview
Neto Integration Steps
Norce Integration Steps
Overview
Placeholder Images in Search Results
Product Reviews
Promo Card Customization
Push API for Multimarket
Push API for Smart Collections
Recommendations Overview
Recommendations in Shopify Cart Drawer
Search API
Search API Overview
Searchable Fields
Settings Overview
Shopify App Store Integration Steps
Slide-in Mobile Filters for Desktop
Smart Collections Overview
Smart Wishlist
Swym Wishlist
Trustpilot
What is Merchandising Cloud?
What is Shopify Liquid?
What is Shopify Liquid?
Yotpo
/content/{source}
/search
API Integration Overview
Alternating amount of products in a recommendation
Analytics for CTA and Wishlist
Authentication
Autocomplete_1_Fullscreen
BigCommerce Integration Steps (Blueprint)
CCPA
Coding Principles
Configure Color Swatches in Shopify Editor
Content Tiles Above Search Results
Control Promo Card Appearance
Files and Usage
Github: Analytics JS
Github: JS SDK
Google Analytics
Instagram Integration Setup
Integrating Recommendations in Norce
Integrating Search Results in Neto
Integrating Smart Collections in Custom MerchantJS
Log in and password
Loox
Manual Configuration of Smart Collections
Manual Control
Manual Shopify Integration Steps
Maropost Add to Cart
Merchandising Cloud Integrations
Merchandising Rules & Pinning
Mobile Facet using Desktop Filters
Mobile Sorting Within Filters
Multimarket Configuration for Push API
Multimarket Translations
One-way Synonyms
Performance Optimization
Personalized Search
Personalized Search Analytics
Product Filtering Overview
Product Sync
Push API for Single Market
Recommendations Fallback
Search JSON API
Search: Product Inclusion/Exclusion
Shopify Liquid FE Overview
Shopify and Merchandising Cloud
SmartWishlist
Stamped.io
Toggle to dynamically change the number of returned results
Wishlists
Working with Findify's DevTool
iWish
/recommend/{slot}
ADA
API Integration Checklist
Analytics Reference
Autocomplete
BigCommerce Integration Steps (Stencil)
Color Swatches
Components Overview
Configure Autocomplete in Shopify Editor
Content Search
Custom Icons
Custom Reviews
Debugging and Best Practices
FindifySDK.init(config)
Google Analytics 4 (GA4)
Grid and Product Cards (Shopify Liquid)
IP Blocking
Integrating Recommendations in Custom MerchantJS
Integrating Smart Collections in Neto
Integrating Smart Collections in Shopify
Manage Users
Merchandising Use Cases
Mobile Autocomplete: Product Matches
Multimarket FAQ
NPM: Analytics JS
Norce Flight and Merchandising Cloud
Okendo
Pagination and Lazy Loading
Price Slider Setup
Product Push API
Product Push API
Recommendations
Recommendations Analytics
Recommendations Strategies
Required Data
Seamless Collections (Shopify)
Shopify Multi-currency
Size Swatches
Sort Facet items
Sorting Options and Available Fields
Styling Templates for Promo Cards and Collections
Third Party Integrations
Two-way Synonyms
Update Page Title To Include Search Query
Wishlist Hero
Market Configuration Push API
/recommend/items/newest
Analytics DOM
Change Filter Name to Image
Filters and Sorting (Shopify Liquid)
Frontend Components Integration Overview
Google Tag Manager Integration
Grid Control
Growave
Hiding Out of Stock Products
Horizontal Filters
Install Merchandising Cloud (Shopify Liquid)
Integrating Recommendations in Neto
Integrating Recommendations in Shopify
Integrating Smart Collections in BigCommerce
JSON Feed Specification
Judge.me
Manage Billing
Merchandising Cloud Dashboard
Mobile Autocomplete with removed keyboard on scroll
Neto and Merchandising Cloud
Personal Recommendations
Privacy & Consent
Product Grid: Search Result & Collection
Product MM Push API
Promo Card Campaigns
Seamless Collections (BigCommerce)
Secondary image on hover for swatches using alt text
Size Control for Promo Cards
Smart Collections
Smart Collections
Smart Collections Analytics
Styling Promo Cards in Shopify Editor
Translations
Translations
Translations Push API
Troubleshooting Liquid Issues
client.send(request, opts)
findifyAnalytics(config)
/recommend/items/trending
Active Sync
Analytics
Banners
BigCommerce and Merchandising Cloud
CSV Feed Specification
Collection Push API
Controlling Expanded State for Filters
Dark Theme
Google Web Vitals
Hide filters in selected collections
Image Change on Hover Component
Image Lazy Loading
Import / Export Pins in Smart Collections
Integrating Analytics in Neto
Integrating Recommendations in BigCommerce
Load Status Bar
Merchandising
Merchant Obligations
Price Plans & How to Upgrade
Prices Push API
Product Card (MJS React)
Product Push API
Promo Cards (Shopify Liquid)
Remove App from Shopify
Removing Terms from Autocomplete
ShipStation
Shopify Liquid FAQ
Shopify Liquid FE
Swym
Trending Products Recommendations
Version Migration for Findify Liquid Components
Yotpo
client.sendEvent(type, request)
/recommend/items/{item_id}/viewed/viewed
Add Tooltip to Color Facet Values
Agent
Case Studies
Content Push API
Context Passing from FE
Custom MerchantJS
Custom Stickers
Filter Control
Filters (MJS React)
Google SEO
Inventory Push API
MJS React FE
Multimarket
Removing Products from Autocomplete
Sale Stickers
Search (Shopify Liquid)
Stamped
Stickers
XML Feed Specification
client.user
/recommend/items/{item_id}/viewed/bought
Advanced Integration
Agent Reference
Analytics JS
Custom Reviews
Custom Stickers using Metafields
Key Benefits
Only X Left Sticker
Page Redirects
Product Filtering
Recommendations (Shopify Liquid)
Removing Products from Results
Sending Analytics with Context
Simple SPA Integration
Sorting Customisations (MJS React)
Sorting Elements Within Filters
UTM Tracking Query
/recommend/items/{item_id}/bought/bought
Add collection handle to product URL
Analytics
Collection Push API
Content Search (Shopify Liquid)
JS SDK
Merchant JS API
New In Sticker
Recommendation Widget (MJS React)
Recommendations
Removing Products from Search Queries
Testimonials
Trend Scoring: Define Time Window
/feedback
Add to Cart Button
Architecture Overview
General Settings (Shopify Liquid)
Merchandising Cloud Analytics
Sale and Discount Price Ranges
Call to Action Button
Compliance
Machine Learning
Merchandising Cloud Settings
Wishlist Integrations (Shopify Liquid)
API References
Quick Add & Quick View
Reviews Integrations (Shopify Liquid)
Supported Languages
Other Integrations (Shopify Liquid)
Security & Reliability
Variant Selector for Add to Cart
Display Custom Fields on Product Cards
Hosting

Image Lazy Loading

Requires at least version 6.9.15
You can check which version your shop is using within the console of your dev tools.
Note: Only Findify's admins can change the version's number. If you need further assistance, please reach out to yourfriends@findify .io

📘
Components
components/Cards/Product/view.tsx

To add lazy loading to your image component, simply add lazy to it as shown below.

components/Cards/Product/view.tsx

<Image  className={classNames(theme.image)}  aspectRatio={config.getIn(['product', 'image', 'aspectRatio'], 1)}  thumbnail={item.get('thumbnail_url')}  src={item.get('image_url') || item.get('thumbnail_url')}  alt={item.get('title')}  // add lazy, default is true  lazy  />