Skip to main content

Convert from Search with Algolia

Search is one of the primary ways that a customer navigates an online store, and can be a powerful mechanism to improve conversion. To improve this metric even further, implement a Convert from Search checkout flow. This flow is a unique checkout flow that boosts conversion by reducing the number of steps to make a purchase.

You can use a search provider, such as Algolia, to provide ecommerce-tailored search. Then, inject a “Buy Now” button into the search section, which would launch Bold Checkout on a modal within the page that the search was initialized. This blueprint covers implementing a Convert from Search checkout flow on an Adobe Commerce store.

Solution Overview​

The Convert from Search technology enables a higher converting checkout experience by minimizing the steps from choosing a product to the completion of the checkout process. Clicking the "Buy Now" button triggers a modal to appear on the current page with a checkout template from Bold Checkout.

The Convert from Search Checkout Flow is a self-hosted checkout flow that you must create and host.

Potential use cases​

Use cases for a Convert from Search checkout flow include the ability to:

  • Enable users searching for a particular product to check out as quickly as possible.
  • Improve conversion on high-priced items with a high risk of abandonment.
  • Focus on checkout conversion over average order value.

Reference architecture​

Solution details​

The following steps are a non-exhaustive outline for creating a Convert from Search checkout flow on your commercetools store:

  1. Install Self-Hosted Bold Checkout on your Adobe Commerce store.
  2. Set up Algolia:
    1. Sign up for an account with Algolia.
    2. Install the Algolia Search extension on your store.
  3. Set up the Checkout Experience Templates using the instructions in the repository README.
    1. Once you set up this project and run npm run build, that generates a /build directory in the repository. Ensure that these compiled JS files are hosted on the same domain as your Adobe Commerce store.
  4. Write custom code solution that does the following:
    1. Add a button to the search section results returned by Algolia.
    2. When the button is clicked, trigger a modal that appears on the page. Pass the order and customer objects to Bold Checkout using the Initialize Order endpoint.
    3. Create a load script that references the one_page.js build file from the Checkout Experience Templates.

Get started​

To get started implementing a Convert from Search checkout flow, reach out to the Bold Partners team at [email protected].

⬅︎ Return to the Solution Library​