Join Our Latest Webinar: Warehouse-Free Returns: Optimizing U.S. Logistics for Global Brands on Wednesday (12/04) @ 2-3pm EST!

Register for Event

February 16, 2024

6

min read

Shopify Development Hacks : Manipulating Cart / Checkout

Aisya Aziz

Director of Engineering

Join Aisya, one of the founding engineers at LiquiDonate, as she delves into the world of Shopify development. Learn exclusive tips and tricks to elevate your e-commerce game and master cart/checkout manipulation. Discover the power of the Checkout UI Extension and unlock its capabilities to customize discounts seamlessly. Dive deeper into the intricacies of Shopify development with Aisya's expert insights.

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

Let’s Connect

LiquiDonate is the first returns platform designed for sustainability. We connect returns directly to nonprofits, upcycle, or resell to reduce waste.

Contact Us