Integrating Searchspring with Optimizely – Part 2: Implementation & Lessons Learned

Introduction

In Part 1, we covered the architecture and setup of integrating Searchspring with Optimizely.

Now let’s move into the practical side—how to render search results, implement merchandising features, and handle real-world challenges.

Frontend Integration (PLP & Search)

Unlike traditional Optimizely rendering, Searchspring integrations are typically frontend-driven.

Instead of server-side rendering:

• Call Searchspring APIs
• Render products dynamically

Example

const loadProducts = async () => {
  const response = await fetch(`/api/searchspring?q=${query}`);
  const data = await response.json();
  renderProducts(data.results);
};

This approach improves performance and gives more flexibility for UI updates.

Inline Banners & Merchandising

One of the most powerful features is inline banners inside product listings.

These are controlled via Searchspring and injected into the product grid.

Example Logic

products.forEach((product, index) => {
  if (banner && index === banner.position) {
    renderBanner(banner);
  }
  renderProduct(product);
});

Important: This logic must run every time products are re-rendered.

Real-World Challenges

Here are some common issues (and fixes) from real implementations:

Pagination Issues

Problem: Only a subset of products (e.g., 23 out of 90) appears.

Cause: Incorrect resultsPerPage or page handling.

Fix: Ensure correct paging parameters are passed in API calls.

Inline Banner Breaking on Pagination

Problem: Banner appears on page 1 but disappears on page 2.

Cause: Product list is refreshed via AJAX.

Fix: Reapply banner logic after every API response.

Data Mismatch (Brand Issues)

Example:

• Portal: WSH
• External system: WHS

Fix: Add a transformation layer in feed generation to standardise values.

Caching Issues

Problem: Changes not reflecting immediately.

Fix:

• Avoid caching API responses unnecessarily
• Use proper cache headers
• Invalidate cache where required

Best Practices

• Keep integration loosely coupled
• Centralise API calls
• Log feed sync errors
• Validate feed data before pushing
• Handle edge cases like empty results

Final Thoughts

Searchspring + Optimizely is a powerful combination for composable commerce.

• Optimizely → content, CMS, experience
• Searchspring → search, filtering, merchandising

Together, they create a scalable and high-performance solution.

Conclusion

If you’re working with large product catalogs and need advanced merchandising capabilities, integrating Searchspring with Optimizely is a strong architectural choice.