If you're new to creating Checkout UI Extensions or want to revisit the basics in simple terms,

Welcome aboard!

Short Story: Once upon a time, there was a guy (that's me!), who wanted to learn how to create his first Checkout UI Extensions (let's call it CUI for short). He found himself tangled in questions like:

• What are extension targets?

• Where do I need to update extension targets to see changes on checkout?

• What are the different APIs and doc links for making API calls or accessing meta fields in CUI?

• Which UI library should I use to create CUIs?

After over 30 hours of searching and diving deep into endless YouTube videos and Shopify docs, he finally stumbled upon the documentation page that made everything clear (yes, the obvious one he should have started with from the beginning 😋).

And now, he's eager to share the key insights from his journey with his loyal audience of 34 followers (you guys are the best! 😘) and the many more who will join in the months and years to come.

Without further ado, let's dive in!

4 Key Basics of Checkout UI Extensions:

1. Extension Targets

2. Configuration File

3. Extension APIs

4. UI Components + Figma UI Kit
   

(All are linked to Shopify's official documentation pages)

This serves as a quick reference for my team and me (I'll always strive to keep it updated to the latest version).

Next, let's dive into the basics and cover:

• What

• Examples

• Pro Tips!

for each of the above.

1. Extension Targets (Checkout Locations)

Extension targets are the predefined locations where your custom checkout elements can be placed.

You can explore all here(visual) & here(copy/paste).

The Shopify team has beautifully categorized them 😍

There are 2 Types of Extension Targets:

1. Static Targets: These are fixed locations that cannot be moved in the Checkout editor.

2. Block Targets: These are dynamic locations that can be moved in the Checkout editor.

What!? Can I move Extension elements in the Checkout Editor, like App Blocks in the theme?

Yes, you can! With the new checkout editor 😃

A handy tip for remembering the difference between static and block targets in the documentation:

**Quick Tip**

Implementation?

For any Extension target change, it needs to be updated in two places:

1. Configuration file

 2. Extension component (i.e. one in the src folder)

Example

Q: If you want to place an upsell, for example: a 'you might also like' section for related products, where will you place it?

.

.

.

.

.

(Spoiler alert! - answer below.)

.

.

.

(Give it a try, you learn by doing!)

.

.

(Got it? Okay, here's my answer - remember, there's no right or wrong, just your preference!)

.

.

.

My Answer: Option C

My Reasoning: I see the "You might also like" upsell as an optional product and prefer to present it away from the main items to avoid any confusion.

Qualities of a good Upsell product:

• Relevant: Complements the main product, enhancing its use or experience.

• Impulse Buy: Small enough in cost to be an easy, spur-of-the-moment purchase.

• High Value: Offers significant value or benefit, justifying the additional cost.

• Limited Availability: This creates a sense of urgency by being a limited-time offer. Can achieve it by additionally showing: 'only 3 remaining' with the title

2. Configuration File

The shopify.extension.toml file (found in each extension folder)

The configuration file is the backbone of your extension setup.

Think of it as the gatekeeper of your extension, managing what is permitted by CUI and defining the extension’s structure.

Key Elements of the Configuration File:

Extension Name: Identifies each extension in your partner dashboard.

Targets: Specifies the same Extension targets discussed above.

Capabilities: Defines what CUIs can do, such as permitting API access, blocking checkout progress, or obtaining buyer consent. Metafields: Defines available metafields for your extensions.

Settings: Similar to section settings in the theme editor, allowing you to define editable settings for your CUIs via the checkout editor.

**Quick Tip**

3. Extension APIs

Powerful APIs for Checkout Customization

Extension APIs are the tools that enable your checkout UI extensions to interact with Shopify's backend and perform actions.

These APIs allow you to retrieve and manipulate data related to the checkout process.

What Can Extension APIs Do? (Some Examples)

• Retrieve Cart Information: Access details about the items in a customer's cart. Example: useCartLines() hook to retrieve cart lines data.

• Perform Actions: Modify checkout behavior, offer related products, or apply discounts. Example: useApplyDiscountCodeChange() to add /remove the discount code.

• API Access: You can query storefront API from CUI and get access to the store's data. Example: query method from useApi() for getting the first 5 product details from a store.

(And much more...)

By leveraging these APIs, you can create a checkout experience that's tailored to each customer's preferences, making it more personalized and dynamic.

**Quick Tip**

(date of screenshot: 31st May 2024)

Seeing the trend here? It's definitely on the rise! 😄

4. UI Components

UI components are the fundamental elements of your checkout extension's user interface.

When it comes to UI, the first question that arises is: Which UI library to use?

Fortunately, Shopify has made it easy for you. You can only use the components provided by them here.

Some Examples:

More Examples:

Few More:

Alright, I'm getting bored now!In short, there are too many components to cover here. You can find them all here

**Quick Tip**

Using the Figma UI Kit

Pairing the UI components with the Figma UI Kit allows you to:

• Visualize Options: See how different components will look and function in the checkout flow.

• Design Efficiently: Create a cohesive and user-friendly interface that aligns with Shopify’s design guidelines.

By utilizing these components, you can ensure your extensions are not only functional but also visually appealing.

Conclusion

Mastering Shopify's Checkout UI Extensions involves understanding and effectively using these four pillars: Extension Targets, Configuration File, Extension APIs, and UI Components.

By leveraging these tools, you can create a seamless, customized checkout experience that enhances customer satisfaction and drives conversions. Feel free to add comments 👇 or ping me on LinkedIn for any questions.

Excited to see it in action and learn more with a detailed tutorial like this one?

Let me know in the comments below, and if we reach 30+ comments, consider it delivered! 😁

Is this helpful? Don't hesitate to RESHARE

It's the best way to contribute to the growth and support of the Shopify community today!