Shopify Development

Creating a customized checkout experience is essential for providing a seamless and branded journey for your customers. With Shopify’s Checkout Extensions, you can tailor the checkout process to better align with your store’s needs, whether that means adding custom messages, upsells, or additional fields for order information. In this blog, we’ll walk you through the process of building a Shopify Checkout Extension, from setup to implementation, making it easier than ever to create a unique checkout flow that can boost conversions and enhance customer satisfaction.

Code: https://github.com/ndrishinski/blogs/commit/1bcb3404000459d2e133948d17db303977ae0fc1

Prefer video?

Enjoy, otherwise read on.

Create a Development Store with Checkout Extensions Preview

The first thing we need to do is create a new development store with Checkout Extensions preview enabled. Checkout extensions are only available on Shopify Plus stores so we need to enable this on our development store.

Navigate to https://partners.shopify.com/ and click ‘Add store’ -> ‘Create Development Store’.

On the new screen select ‘Create a store to test and build’, give your store a name, and select ‘Developer preview’. You’ll want to select ‘Checkout and Customer Accounts Extensibility’.

I would also recommend ‘Start with test data’.

It is imperative that you select the Checkout extensibility preview for your store, otherwise you will not be able to add it in the checkout customizer.

Create a Remix App and Install on Store

Now that we have our new store with the developer preview enabled, we can create our app and install it. Open the terminal and run

npm init @shopify/app@latest

Then follow the steps for authorization and select the option to ‘Yes, create it as a new app’.

Give your app a name and for this tutorial I have selected ‘Build an extension-only app’

Now move into your newly created directory and run:

shopify app generate extension

Then arrow down to “Checkout UI” and hit enter.

Then give your extension a name, and select ‘JavaScript React’

Now let’s install it on our store.

In the terminal run:

shopify app dev

and select the newly created store that enabled developer preview in step 1.

When prompted, hit ‘p’ to open up a developer preview. When the preview opens, click on the link ‘Install your app’ and you should see the option to Install like so.

After successfully installing, you should now be able to add your extension to the checkout page.

Creating our Checkout UI

Now that our extension is successfully installed, we can edit some code. If we open up our app in a code editor we should have a file under the src directory called ‘Checkout.jsx’.

We want to replace the code with this:

import {
  reactExtension,
  Banner,
  useExtensionApi,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);
function Extension() {
  const { lines } = useExtensionApi();
  let showNotice = lines.current.some(item => item.merchandise.title.includes('Snowboard'))
  if (showNotice) {
    return (
      <Banner
        status="warning"
        title="Snowboards do not ship to California, because it's California."
      />
    );
  }
}

This is a simple JSX component that is utilizing ‘useExtensionApi’ from the shopify/ui-extensions-react/checkout package. All I am doing here is simply checking if there are any ‘Snowboard’s in the cart, and if so displaying a message. Obviously this is where you should implement any custom behavior you would like to see.

You will also notice that there is no regular HTML/JSX code. That is because checkout extensions only allow the use of UI components from Shopify. You can take a look at all the components they have to offer here.

Lastly I want to point out this line “purchase.checkout.block.render” . This is crucial because it makes our extension a ‘block’ target rather than a ‘static’ target. A block target can be added to any section on the checkout page whereas a static target is only added to the section that is specified. Since we want the ability to move our widget anywhere, we will leave it as a block target.

Adding Checkout Extension in Theme Editor

Now that we have our code in place, let’s add our extension in the theme editor to see how it looks. To do this, first ensure that your server is still running and then open our browser back to our theme. Navigate to ‘Settings’ in the bottom left corner and then click ‘Checkout’. This should open up the theme editor where we can click ‘Add block’ to insert our newly created extension.

This should open up the theme editor where we can click ‘Add block’ to insert our newly created extension.

After adding our block we can see it successfully adding our block! You can also click the three dots in the top left and click ‘View’ to open a theme preview to test.

Conclusion

By building a Shopify Checkout Extension, you can create a tailored checkout experience that meets the specific needs of your customers and your brand. This customization can lead to increased customer satisfaction, improved conversion rates, and a more professional, cohesive feel across your store. Whether you’re adding upsells, custom messages, or extra order information, Shopify’s Checkout Extensions offer the flexibility to create a truly personalized checkout process. With the steps outlined in this guide, you’re well on your way to transforming your store’s checkout into a powerful tool for growth.