Hey there, I'm Aisya, one of the founding engineers at LiquiDonate. Are you ready to dive into the world of Shopify development? Join me as I share exclusive tips and tricks to take your e-commerce game to the next level. Let's get coding!
![](https://imageproxy.liquidonate.com/3000x2400/https://storage.googleapis.com/liquid-images-prod/item-images/81648843-74a5-4524-bf15-0a6b178e2966.png)
If you plan on manipulating your shop's cart during checkout (i.e., adding discounts, etc.), here are some tips and tricks on achieving cart/checkout manipulation!
While I have a good understanding of the concept & the APIs now, it didn't come as easily for me at first. My initial thought was to build a custom Javascript widget to solve the problem and connect it to a backend app like Helpscout. However, I faced a few struggles including:
- The customer needs to be tech-savvy to be able to look into their code and plug in the widget. Honestly, I don't know if this is even possible as I didn't even get to this point.
- You would also need a lot of information (Cart, Customer, etc) to work on your logic. Not to mention, the Admin GraphQL doesn't even have a Cart query,
- You might think that you need Storefront API for this case. The struggle with Storefront API is that you can't easily build a public app for this. You could, but it has to be a sales channel and there are several other rules/guidelines in the sales channel app that you might not want to handle. You could...but why would you? All you want to do is just add a customized discount! (Read more: https://shopify.dev/docs/apps/selling-strategies/channels)
The secret? The Checkout UI Extension! (Read more: https://shopify.dev/docs/api/checkout-ui-extensions )
A few of the capabilities worth noting are:
- You would be able to place your "widget" at a targeted location on the checkout. (There are a couple of locations you could use but you get to decide where!) (Read: https://shopify.dev/docs/api/checkout-ui-extensions/unstable/extension-targets-overview )
- There are APIs and Hooks you can use to get/update the data. (Read: https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis )
- You can also connect it to your backend. (Read: https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#network-access )
- There are default components available to ensure that your widget doesn't look out of place.
- Of course, if you are building an actual Storefront, you will still be able to access your Storefront API. (Read: https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#api-access )
Here are a few less-than-fun parts:
- The widget would need to be placed by the customer themselves at the checkout editor. It's a simple drag-and-drop but, you still need some kind of customer intervention. (It took me a while to figure out why it wasn't there!)
- This extension is built separately from the rest of your app. It will be placed in a sandbox, thus you won't be able to use your env variables. But... I figured out a way to "make it work". (Read my previous blog post on this: https://liquidonate.com/blog/shopify-development-hacks-environment-variable-in-checkout-ui-extension )
Thanks for joining to learn about the nuances of cart and checkout manipulation, especially with the Checkout UI Extension. With these insights in your toolkit, you're well-equipped to elevate your e-commerce platform. Stay tuned for more Shopify development hacks and invaluable tips to propel your online store to new heights. Until next time, happy coding!
![](https://imageproxy.liquidonate.com/3000x2400/https://storage.googleapis.com/liquid-images-prod/item-images/3db55db8-f8e3-48ee-b01f-a6e1b03a4dd5.png)