Shopify Development Hacks : Manipulating Cart / Checkout

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!

Cart/Checkout Manipulation

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:

1. 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.
2. 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,
3. 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)

‍

So What's The Hack?

‍

The secret? The Checkout UI Extension! (Read more: https://shopify.dev/docs/api/checkout-ui-extensions )

A few of the capabilities worth noting are:

1. 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 )
2. There are APIs and Hooks you can use to get/update the data. (Read: https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis )
3. You can also connect it to your backend. (Read: https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#network-access )
4. There are default components available to ensure that your widget doesn't look out of place.
5. 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:

1. 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!)
2. 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!

That's it, 'til the next hack!-Aisya Aziz