Getting started with Shopify checkout extensions
Shopify launched a new features named “Checkout extensions” in order to tackle the “problem” of checkout customizations. This set of features allows us to add new functionalities and new user interface features to the Shopify Plus stores.
The biggest issue developers and store owners like have is that to even have the option to access checkout.liquid, a store needs to be on Shopify Plus. And once you do modify the checkout.liquid, all the updates that will be done later on need to be done manually. Which is, as you probably are aware, somewhat problematic.
The checkout extensions are only visible on the Shopify Plus store.
The extensions are included in the checkout extensibility developer preview and are only available in development stores, so you need to enable the Developer Preview feature while creating the ne store.
Reference: https://shopify.dev/docs/api/release-notes/developer-previews
The checkout extensions are currently divided into many groups:
- Theme app extension
- Checkout UI
- Function – Order discount
- Function – Product discount
- Function – Shipping discount
- Post-purchase UI
- Web pixel
- Subscription UI
One of the cool options is that we will now be able to further customize the checkout layout, and also have the option to set up the field for customization via the WYSIWYG editor, or NO-CODE, if you will. That means the store owner who is not familiar with the code will be able to customize the checkout layout (more so than before). There will be some limitations here obviously, because checkout is an extremely important step in the conversion process, and going too wild with creative efforts could seriously affect the sales. Basically, these will be branding changes mostly using CSS, but via the NO CODE visual editor.
This will all be done using the already familiar Shopify CLI commands, creating an app, and generating extensions.
Build with a Checkout UI extension
Let’s create a checkout extension app. First we will create a folder where our app will live. Power up the Terminal, navigate to the folder (using cd command) where you want to start working and create a new folder. I have placed my folder on the desktop, so I will first navigate to it:
First, you need to create a new folder.
mkdir checkout-extensions
Go to checkout-extensions folder.
cd /checkout-extensions/
Now, we will create a Shopify app. I am using npm here to buid an shopify app.
npm init @shopify/app@latest
After this, it will be asked to enter your app project name.
When the name is entered, we will be able to choose the template option,
Than, it will instaling all thedependencies.
The installation is completed you will see as below. you can also check your folder than you will see there has been some files added.
Now we need to navigate to the folder which was created and named per our app name.
cd enhanced-checkout-app
Run the bellow command to generate the extension.
npm run shopify app generate extension
Now, select “Yes, create it as a new app” to create project as new app.
Enter the App name.
You will have an options to select which type of extension you want to create on shopify app. Example: Checkout UI
Enter extension name.
Select the library which you want to prefer.
Once, installation is completed then you need to run bellow command to start the project.
npm run dev
It will ask you to login to your partner account and redirect to browser. and after logged in to account it will show the successfull message on shopify site.
After this, it will list out all the stores from your partner account. And ask to select which store would you like to view app on store.
You can see the preview URL to check the extension.
Finally you can see the preview url and install the app on your stir eandprevie wthe app extention on your storefront.
Reference site: https://shopify.dev/docs/api/checkout-ui-extensions