Colored Byte recently developed a feature for FarmFetch to enhance the shopping experience by suggesting related products directly in the cart. The goal was to recommend products from the same vendor as the items already added to the cart.
To achieve this, we used a vendor-filtered collection and a JavaScript script to dynamically build product recommendation cards on the cart page.
Creating the Filtered Collection
To start, we created a custom collection template called collection.vendor-json.liquid, which generates a JSON file containing all the necessary information about products from a specific vendor.
This JSON includes details such as:
- ID
- Title
- Handle
- Price
- Image
- URL
- Available variants
The code uses collection.products to list all products from the collection and organizes them in a structured format, making it easy for JavaScript to consume and display on the frontend.
Sample JSON Structure:
{
"collection": {
"title": "Collection Name",
"handle": "collection-handle",
"products": [
{
"id": 123456789,
"title": "Product Name",
"handle": "product-handle",
"vendor": "Vendor Name",
"price": 1999,
"compare_at_price": 2999,
"featured_image": "image-url",
"url": "product-url",
"available": "true",
"variants": [
{
"id": 987654321,
"title": "Variant 1",
"price": 1999,
"compare_at_price": 2999
}
]
}
]
}
}
Fetching the Data on the Frontend
On the frontend, a JavaScript script identifies the vendors of the products in the cart and fetches the corresponding JSON file.
It makes a request to the filtered collection URL:
/collections/vendors?q=vendor-name&view=vendor-json
Breakdown of the URL:
/collections/vendors: A default Shopify route that displays collections filtered by vendor.q=vendor-name: Ensures that only products from the specified vendor are retrieved.view=vendor-json: Calls the custom JSON template instead of rendering the standard collection page.
Filtering and Displaying Recommendations
After retrieving the vendor-specific JSON data, the script applies filters to ensure that:
- Products already in the cart are excluded from recommendations.
- Only available products are shown.
- A limited number of recommendations (e.g., four products) is displayed for clarity and performance.
Product Card Elements
JavaScript dynamically constructs a recommendation card for each filtered product. Each card includes:
- Product image
- Product name and vendor
- Price
- Button to view the product
- Button to quickly add the product to the cart
These cards are inserted dynamically below the cart items, creating a seamless user experience—no page refresh needed.
Benefits of the Implementation
This solution enables relevant product recommendations without relying on third-party apps. Since the logic is based on the vendor of the products already in the cart, the suggestions are highly personalized and can have a positive impact on conversion rates.
If you're looking to implement automatic product recommendations in Shopify, this approach is:
- Flexible
- Efficient
- Easily adaptable to your store’s unique setup
Contact us if you need custom solutions for your Shopify Store here
