Convert from Search with Constructor

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 Constructor, 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 a commercetools 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. Set up Bold Checkout:
   1. Install Bold Checkout on your commercetools store.
   2. Complete the steps in the Getting Started guide to set up Bold Account Center and generate an API access token.
2. Set up Constructor:
   1. Install and authenticate the application.
   2. Implement Constructor’s commercetools Platform Connector.
   3. Implement Constructor’s Search Platform 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 commercetools store.
4. Write custom code solution that does the following:
   1. Add a button to the search section results returned by Constructor.
   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