> ## Documentation Index
> Fetch the complete documentation index at: https://docs.synapsebuilder.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Shopify Extensions

> Build UI extensions for checkout, admin, and POS

## What are Extensions?

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

## Extension Types

<CardGroup cols={2}>
  <Card title="Checkout Extensions" icon="cart-shopping">
    Add custom UI to the checkout process
  </Card>

  <Card title="Admin Extensions" icon="toolbox">
    Extend the Shopify admin interface
  </Card>

  <Card title="POS Extensions" icon="cash-register">
    Customize point-of-sale experiences
  </Card>

  <Card title="Post-Purchase" icon="gift">
    Upsells after checkout completion
  </Card>
</CardGroup>

## Example: Checkout Extension

```tsx theme={null}
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