Shopify Extensions

What are Extensions?

Shopify extensions allow you to customize checkout, admin, and point-of-sale experiences with React components.

Extension Types

Checkout Extensions

Add custom UI to the checkout process

Admin Extensions

Extend the Shopify admin interface

POS Extensions

Customize point-of-sale experiences

Post-Purchase

Upsells after checkout completion

Example: Checkout Extension

import { Banner, useSettings } from '@shopify/ui-extensions-react/checkout';

export default function CheckoutExtension() {
  const settings = useSettings();
  
  return (
    <Banner title="Free Shipping">
      Orders over $50 ship free!
    </Banner>
  );
}

Key Features

React Components: Build with familiar React patterns
Shopify UI: Use official Shopify UI component library
GraphQL: Query cart and customer data
Settings: Configure extensions via metafields

Get Started

Core Concepts

Building Extensions

Building Functions

Development

Deployment

Advanced

Shopify Extensions

What are Extensions?

Extension Types

Checkout Extensions

Admin Extensions

POS Extensions

Post-Purchase

Example: Checkout Extension

Key Features

​What are Extensions?

​Extension Types

Checkout Extensions

Admin Extensions

POS Extensions

Post-Purchase

​Example: Checkout Extension

​Key Features

What are Extensions?

Extension Types

Example: Checkout Extension

Key Features