---
title: Build a pre-purchase product offer checkout UI extension
description: Learn how to offer customers additional products at checkout that they can add to their order.
source_url:
  html: https://shopify.dev/docs/apps/build/checkout/product-offers/build-a-pre-purchase-offer?extension=polaris
  md: https://shopify.dev/docs/apps/build/checkout/product-offers/build-a-pre-purchase-offer.md?extension=polaris
---

# Build a pre-purchase product offer checkout UI extension

A pre-purchase product offer is an additional sales opportunity that's displayed to customers before they complete checkout. Pre-purchase product offers can help to increase a store's average order value.

In this tutorial, you'll use checkout UI extensions to build a pre-purchase upsell offer that prompts the customer to add a product to their order.

Before you start, review the [product offer checkout UI extension UX guidelines](https://shopify.dev/apps/checkout/product-offers/product-offer-composition).

Shopify Plus

Checkout UI extensions are available only to [Shopify Plus](https://www.shopify.com/plus) merchants.

## What you'll learn

In this tutorial, you'll learn how to do the following:

* Generate a checkout UI extension that appears in the checkout flow using Shopify CLI.
* Set up configurations for your checkout UI extension in the extension TOML file.
* Query the Storefront API from the extension code to get product data.
* Create a user interface for the Checkout UI extension.
* Use the checkout UI extension API to read and write cart information.

## Requirements

* You're a [user with app development permissions](https://shopify.dev/docs/apps/build/dev-dashboard/user-permissions).

* You've created a new [development store](https://shopify.dev/docs/api/development-stores) with the following:

  * [Generated test data](https://shopify.dev/docs/api/development-stores/generated-test-data)
  * [Checkout and Customer Accounts Extensibility](https://shopify.dev/docs/api/developer-previews#checkout-and-customer-accounts-extensibility-developer-preview) feature preview enabled

* You've [created an app that uses Shopify CLI 3.85.1 or higher](https://shopify.dev/docs/apps/build/scaffold-app).

## Project

Polaris

[View on GitHub](https://github.com/Shopify/example-checkout--product-offer-pre-purchase--preact)

## Create a checkout UI extension

To create a checkout UI extension, you'll use Shopify CLI, which generates starter code for building your extension.

To create a checkout UI extension, you can use Shopify CLI, which generates starter code for building your extension and automates common development tasks.

1. Navigate to your app directory:

   ## Terminal

   ```terminal
   cd <directory>
   ```

2. Run the following command to create a new checkout UI extension:

   ## Terminal

   ```terminal
   shopify app generate extension --template checkout_ui --name my-checkout-ui-extension
   ```

1) Select `Checkout UI`.

   You should now have a new extension directory in your app's directory. The extension directory includes the extension script at `src/Checkout.jsx`. The following is an example directory structure:

   ## Checkout UI extension file structure

   ```text
   └── my-app
     └── extensions
       └── my-checkout-ui-extension
           ├── src
           │   └── Checkout.jsx OR Checkout.js // The index page of the checkout UI extension
           ├── locales
           │   ├── en.default.json // The default locale for the checkout UI extension
           │   └── fr.json // The locale file for non-regional French translations
           ├── shopify.extension.toml // The config file for the checkout UI extension
           └── package.json
   ```

1. Start your development server to build and preview your app:

   ## Terminal

   ```terminal
   shopify app dev
   ```

   To learn about the processes that are executed when you run `dev`, refer to the [Shopify CLI command reference](https://shopify.dev/docs/api/shopify-cli/app/app-dev).

2. Press `p` to open the developer console. In the developer console page, click on the preview link for your extension.

## Set up an extension target

Set up a target for your checkout UI extension. [Targets](https://shopify.dev/docs/api/checkout-extensions/checkout#extension-targets) control where your extension renders in the checkout flow.

### Render the extension from your script file

In your `Checkout.jsx` file, render the extension so it can be referenced in your configuration.

***

This example code uses the default `purchase.checkout.block.render` extension target. This target lets merchants choose where they want the extension to appear using the [checkout editor](https://help.shopify.com/manual/checkout-settings/checkout-extensibility/checkout-editor), and will render regardless of which checkout features are available.

You can [update the checkout URL](https://shopify.dev/docs/apps/build/checkout/test-checkout-ui-extensions#dynamic-extension-points) to test the extension in different locations in the checkout.

If you want the extension to render in only certain places, then use a [static target](https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview#static-extension-targets).

[extension targets](https://shopify.dev/docs/api/checkout-ui-extensions#extension-targets)[purchase.checkout.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/latest/targets/block/purchase-checkout-block-render)

## /extensions/example-pre-purchase-offer/src/Checkout.jsx

```jsx
import "@shopify/ui-extensions/preact";
import { render } from "preact";
import { useEffect, useState } from "preact/hooks";


// 1. Export the extension
export default function () {
  render(<Extension />, document.body);
}


function Extension() {
  const { applyCartLinesChange, query, i18n } = shopify;
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [adding, setAdding] = useState(false);
  const [showError, setShowError] = useState(false);
  const { lines } = shopify;


  useEffect(() => {
    fetchProducts();
  }, []);


  useEffect(() => {
    if (showError) {
      const timer = setTimeout(() => setShowError(false), 3000);
      return () => clearTimeout(timer);
    }
  }, [showError]);


  async function handleAddToCart(variantId) {
    setAdding(true);
    const result = await applyCartLinesChange({
      type: "addCartLine",
      merchandiseId: variantId,
      quantity: 1,
    });
    setAdding(false);
```

#### Reference the extension targets in your configuration file

You can define more than one target so that app users can add the extension to multiple locations in the checkout.

In your checkout UI extension's configuration file, for each of your targets, create an `[[extensions.targeting]]` section with the following information:

* `module`: The path to the file that contains the extension code.

* `target`: An identifier that specifies where you're injecting code into Shopify.

***

[`shopify.extension.toml`](https://shopify.dev/docs/apps/build/app-extensions/configure-app-extensions) is the configuration file for your extension. It contains basic information and settings.

Note

Whenever you edit your extension configuration file, you need to restart your server for the changes to take effect.

## Terminal

```bash
shopify app dev
```

## /extensions/example-pre-purchase-offer/shopify.extension.toml

```toml
# Learn more about configuring your checkout UI extension:
# https://shopify.dev/api/checkout-extensions/checkout/configuration


# The version of APIs your extension will receive. Learn more:
# https://shopify.dev/docs/api/usage/versioning
api_version = "2025-10"


[[extensions]]
name = "example-pre-purchase-offer"
handle = "example-pre-purchase-offer"
type = "ui_extension"
uid = "7a24b03f-cbda-c096-6fdc-5ef13bfc10698c4cbea5"


# Controls where in Shopify your extension will be injected,
# and the file that contains your extension’s source code. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/extension-targets-overview


[[extensions.targeting]]
module = "./src/Checkout.jsx"
target = "purchase.checkout.block.render"


[extensions.capabilities]
# Gives your extension access to directly query Shopify’s storefront API.
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#api-access
api_access = true
```

## Retrieve product data

Now that you've set up the extension target, you'll set up products so that you can display them to customers for the product offer.

### Request API access

Configure your extension to make calls to the Storefront API. In your checkout UI extension's configuration file, create an `[extensions.capabilities]` section with `api_access` set to `true`.

***

[Learn more about requesting Storefront API access for your extension](https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#api-access).

To retrieve data from an external source using a checkout UI extension, you need to request the [network access](https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#network-access) capability instead of the API access capability.

## /extensions/example-pre-purchase-offer/shopify.extension.toml

```toml
# Learn more about configuring your checkout UI extension:
# https://shopify.dev/api/checkout-extensions/checkout/configuration


# The version of APIs your extension will receive. Learn more:
# https://shopify.dev/docs/api/usage/versioning
api_version = "2025-10"


[[extensions]]
name = "example-pre-purchase-offer"
handle = "example-pre-purchase-offer"
type = "ui_extension"
uid = "7a24b03f-cbda-c096-6fdc-5ef13bfc10698c4cbea5"


# Controls where in Shopify your extension will be injected,
# and the file that contains your extension’s source code. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/extension-targets-overview


[[extensions.targeting]]
module = "./src/Checkout.jsx"
target = "purchase.checkout.block.render"


[extensions.capabilities]
# Gives your extension access to directly query Shopify’s storefront API.
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#api-access
api_access = true
```

### Retrieve products

Set up a function that handles retrieving your products, using the `query` helper function of the `StandardApi` Checkout API object.

Query the Storefront API `Products` resource. This query fetches the first five products in the store. Store the products in an array so you can reference the data later.

***

The `StandardApi` Checkout API object is automatically made available to all targets.

In a production-ready app, you might query your own database to retrieve a list of products to offer.

For more examples of [querying the Storefront API](https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#api-access), refer to the [Storefront API learning kit](https://github.com/Shopify/storefront-api-learning-kit).

[query](https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/standardapi#properties-propertydetail-query)[Standard​Api](https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/standardapi)[Products](https://shopify.dev/docs/api/storefront/latest/queries/products)

## /extensions/example-pre-purchase-offer/src/Checkout.jsx

```jsx
import "@shopify/ui-extensions/preact";
import { render } from "preact";
import { useEffect, useState } from "preact/hooks";


// 1. Export the extension
export default function () {
  render(<Extension />, document.body);
}


function Extension() {
  const { applyCartLinesChange, query, i18n } = shopify;
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [adding, setAdding] = useState(false);
  const [showError, setShowError] = useState(false);
  const { lines } = shopify;


  useEffect(() => {
    fetchProducts();
  }, []);


  useEffect(() => {
    if (showError) {
      const timer = setTimeout(() => setShowError(false), 3000);
      return () => clearTimeout(timer);
    }
  }, [showError]);


  async function handleAddToCart(variantId) {
    setAdding(true);
    const result = await applyCartLinesChange({
      type: "addCartLine",
      merchandiseId: variantId,
      quantity: 1,
    });
    setAdding(false);
```

### Retrieve cart data

Use the `shopify.lines` property to retrieve the current line items of the cart.

***

`shopify.lines` allows you to interact with the cart lines. To learn more about it, refer to the [Cart Lines API reference](https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/cart-lines).

[shopify.lines](https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/cart-lines)

## /extensions/example-pre-purchase-offer/src/Checkout.jsx

```jsx
import "@shopify/ui-extensions/preact";
import { render } from "preact";
import { useEffect, useState } from "preact/hooks";


// 1. Export the extension
export default function () {
  render(<Extension />, document.body);
}


function Extension() {
  const { applyCartLinesChange, query, i18n } = shopify;
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [adding, setAdding] = useState(false);
  const [showError, setShowError] = useState(false);
  const { lines } = shopify;


  useEffect(() => {
    fetchProducts();
  }, []);


  useEffect(() => {
    if (showError) {
      const timer = setTimeout(() => setShowError(false), 3000);
      return () => clearTimeout(timer);
    }
  }, [showError]);


  async function handleAddToCart(variantId) {
    setAdding(true);
    const result = await applyCartLinesChange({
      type: "addCartLine",
      merchandiseId: variantId,
      quantity: 1,
    });
    setAdding(false);
```

### Filter products

Create a function to compare the cart contents to the products that you retrieved from the Storefront API to ensure that you don't offer a product that's already in the cart.

## /extensions/example-pre-purchase-offer/src/Checkout.jsx

```jsx
import "@shopify/ui-extensions/preact";
import { render } from "preact";
import { useEffect, useState } from "preact/hooks";


// 1. Export the extension
export default function () {
  render(<Extension />, document.body);
}


function Extension() {
  const { applyCartLinesChange, query, i18n } = shopify;
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [adding, setAdding] = useState(false);
  const [showError, setShowError] = useState(false);
  const { lines } = shopify;


  useEffect(() => {
    fetchProducts();
  }, []);


  useEffect(() => {
    if (showError) {
      const timer = setTimeout(() => setShowError(false), 3000);
      return () => clearTimeout(timer);
    }
  }, [showError]);


  async function handleAddToCart(variantId) {
    setAdding(true);
    const result = await applyCartLinesChange({
      type: "addCartLine",
      merchandiseId: variantId,
      quantity: 1,
    });
    setAdding(false);
```

## Build the pre-purchase offer UI

Build a basic user interface, loading state, and error handling using components from the checkout UI extensions component library.

### Add add-to-cart functionality

Use the `applyCartLinesChange` method to mutate the `lines` property of the checkout.

***

`applyCartLinesChange` allows you to write cart information. To learn more about Cart Lines and other available APIs, refer to the [Checkout UI Extension API reference](https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis).

[apply​Cart​Lines​Change](https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/cart-lines#checkoutapi-propertydetail-applycartlineschange)

## /extensions/example-pre-purchase-offer/src/Checkout.jsx

```jsx
import "@shopify/ui-extensions/preact";
import { render } from "preact";
import { useEffect, useState } from "preact/hooks";


// 1. Export the extension
export default function () {
  render(<Extension />, document.body);
}


function Extension() {
  const { applyCartLinesChange, query, i18n } = shopify;
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [adding, setAdding] = useState(false);
  const [showError, setShowError] = useState(false);
  const { lines } = shopify;


  useEffect(() => {
    fetchProducts();
  }, []);


  useEffect(() => {
    if (showError) {
      const timer = setTimeout(() => setShowError(false), 3000);
      return () => clearTimeout(timer);
    }
  }, [showError]);


  async function handleAddToCart(variantId) {
    setAdding(true);
    const result = await applyCartLinesChange({
      type: "addCartLine",
      merchandiseId: variantId,
      quantity: 1,
    });
    setAdding(false);
```

### Build the offer UI

Using Polaris web components, build a basic UI for the product offer.

***

Checkout UI extensions are limited to specific UI components exposed by the platform [for security reasons](https://shopify.dev/docs/api/checkout-ui-extensions#security). Checkout UI components allow you to create a UI that feels seamless within the checkout experience, and that inherits a merchant's brand settings.

[Stack](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/structure/stack)[Divider](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/structure/divider)[Heading](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/titles-and-text/heading)[Grid](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/structure/grid)[Image](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/media/image)[Text](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/titles-and-text/text)

## /extensions/example-pre-purchase-offer/src/Checkout.jsx

```jsx
import "@shopify/ui-extensions/preact";
import { render } from "preact";
import { useEffect, useState } from "preact/hooks";


// 1. Export the extension
export default function () {
  render(<Extension />, document.body);
}


function Extension() {
  const { applyCartLinesChange, query, i18n } = shopify;
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [adding, setAdding] = useState(false);
  const [showError, setShowError] = useState(false);
  const { lines } = shopify;


  useEffect(() => {
    fetchProducts();
  }, []);


  useEffect(() => {
    if (showError) {
      const timer = setTimeout(() => setShowError(false), 3000);
      return () => clearTimeout(timer);
    }
  }, [showError]);


  async function handleAddToCart(variantId) {
    setAdding(true);
    const result = await applyCartLinesChange({
      type: "addCartLine",
      merchandiseId: variantId,
      quantity: 1,
    });
    setAdding(false);
```

### Build a loading state

Use checkout components, including `SkeletonParagraph` and `Image`, to build a loading state to display while the product variants are being fetched.

***

A loading state lets the customer know that content is being rendered, improving the perceived performance of the checkout.

[Stack](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/structure/stack)[Button](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/actions/button)[Divider](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/structure/divider)[Heading](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/titles-and-text/heading)[Grid](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/structure/grid)[Image](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/media/image)[Skeleton​Paragraph](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/feedback/skeletonparagraph)

## /extensions/example-pre-purchase-offer/src/Checkout.jsx

```jsx
import "@shopify/ui-extensions/preact";
import { render } from "preact";
import { useEffect, useState } from "preact/hooks";


// 1. Export the extension
export default function () {
  render(<Extension />, document.body);
}


function Extension() {
  const { applyCartLinesChange, query, i18n } = shopify;
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [adding, setAdding] = useState(false);
  const [showError, setShowError] = useState(false);
  const { lines } = shopify;


  useEffect(() => {
    fetchProducts();
  }, []);


  useEffect(() => {
    if (showError) {
      const timer = setTimeout(() => setShowError(false), 3000);
      return () => clearTimeout(timer);
    }
  }, [showError]);


  async function handleAddToCart(variantId) {
    setAdding(true);
    const result = await applyCartLinesChange({
      type: "addCartLine",
      merchandiseId: variantId,
      quantity: 1,
    });
    setAdding(false);
```

### Build an error handling UI

If there's an error adding a product on offer, then use the `Banner` component to communicate any errors to the user.

For example, you might need to display an error to the customer if the offered product is out of stock.

***

[Banner](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/feedback/banner)

## /extensions/example-pre-purchase-offer/src/Checkout.jsx

```jsx
import "@shopify/ui-extensions/preact";
import { render } from "preact";
import { useEffect, useState } from "preact/hooks";


// 1. Export the extension
export default function () {
  render(<Extension />, document.body);
}


function Extension() {
  const { applyCartLinesChange, query, i18n } = shopify;
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [adding, setAdding] = useState(false);
  const [showError, setShowError] = useState(false);
  const { lines } = shopify;


  useEffect(() => {
    fetchProducts();
  }, []);


  useEffect(() => {
    if (showError) {
      const timer = setTimeout(() => setShowError(false), 3000);
      return () => clearTimeout(timer);
    }
  }, [showError]);


  async function handleAddToCart(variantId) {
    setAdding(true);
    const result = await applyCartLinesChange({
      type: "addCartLine",
      merchandiseId: variantId,
      quantity: 1,
    });
    setAdding(false);
```

### Preview the extension

Preview your extension to make sure that it works as expected.

#### Start your server

Run the Shopify CLI `dev` command to build your app and preview it on your development store.

Make sure that you select a development store that has enabled the feature preview for [Checkout and Customer Accounts Extensibility](https://shopify.dev/docs/api/developer-previews#checkout-and-customer-accounts-extensibility-developer-preview).

1. In a terminal, navigate to your app directory.

2. Either start or restart your server to build and preview your app:

   ## Terminal

   ```bash
   shopify app dev
   ```

3. Press `p` to open the developer console.

4. In the developer console page, click on the preview link for the custom pre-purchase offer extension.

   The checkout opens.

***

This section describes how to solve some potential errors when you run `dev` for an app that contains a checkout UI extension.

### Property token error

If you receive the error `ShopifyCLI:AdminAPI requires the property token to be set`, then you'll need to use the [`--checkout-cart-url` flag](https://shopify.dev/docs/api/shopify-cli/app/app-dev#flags) to direct Shopify CLI to open a checkout session for you.

## Terminal

```terminal
shopify app dev --checkout-cart-url cart/{product_variant_id}:{quantity}
```

### Missing checkout link

If you don't receive the test checkout URL when you run `dev`, then verify the following:

* You have a development store populated with products.

* You're logged in to the correct Partners organization and development store. To verify, check your app info using the following command:

  ## Terminal

  ```terminal
  shopify app info
  ```

Otherwise, you can manually create a checkout with the following steps:

1. From your development store's storefront, add some products to your cart.

2. From the cart, click **Checkout**.

3. From directory of the app that contains your extension, run `dev` to preview your app:

   ## Terminal

   ```terminal
   shopify app dev
   ```

4. On the checkout page for your store, change the URL by appending the `?dev=https://{tunnel_url}/extensions` query string and reload the page. The `tunnel_url` parameter allows your app to be accessed using a unique HTTPS URL.

   You should now see a rendered order note that corresponds to the code in your project template.

## Test the extension

Preview your new code and ensure that the extension works as designed.

### Test the extension functionality

1. With your server running, open the storefront of your development store.

2. Add a product to the cart and then check out.

   Your placeholder extension is replaced with your new extension code that offers a product from the store, under the heading **You might also like**.

3. Click **Add** to add the product to the cart.

   The product is added to the cart, and the offer is replaced with a new offer. If the product is out of stock, then an error is returned and the offer is replaced with a new offer.

4. Continue adding products to the cart using the **Add** button.

   After you add multiple offered products to the cart, the extension is hidden.

5. Complete the checkout.

In the [Orders](https://shopify.com/admin/orders) area of the Shopify admin, a new order appears. The order contains the products that you added to the cart, including the offered products.

***

![The product offer section in the checkout.](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/apps/checkout/product-offer-D_XGb-90.png)

When you're ready to release your changes to users, you can create and release an [app version](https://shopify.dev/docs/apps/launch/deployment/app-versions). An app version is a snapshot of your app configuration and all extensions.

1. Navigate to your app directory.

2. Run the following command.

   Optionally, you can provide a name or message for the version using the `--version` and `--message` flags.

   ## Terminal

   ```terminal
   shopify app deploy
   ```

Releasing an app version replaces the current active version that's served to stores that have your app installed. It might take several minutes for app users to be upgraded to the new version.

Tip

If you want to create a version, but avoid releasing it to users, then run the `deploy` command with a `--no-release` flag. You can release the unreleased app version using Shopify CLI's [`release`](https://shopify.dev/docs/api/shopify-cli/app/app-release) command, or through the Dev Dashboard.

## /extensions/example-pre-purchase-offer/shopify.extension.toml

```toml
# Learn more about configuring your checkout UI extension:
# https://shopify.dev/api/checkout-extensions/checkout/configuration


# The version of APIs your extension will receive. Learn more:
# https://shopify.dev/docs/api/usage/versioning
api_version = "2025-10"


[[extensions]]
name = "example-pre-purchase-offer"
handle = "example-pre-purchase-offer"
type = "ui_extension"
uid = "7a24b03f-cbda-c096-6fdc-5ef13bfc10698c4cbea5"


# Controls where in Shopify your extension will be injected,
# and the file that contains your extension’s source code. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/extension-targets-overview


[[extensions.targeting]]
module = "./src/Checkout.jsx"
target = "purchase.checkout.block.render"


[extensions.capabilities]
# Gives your extension access to directly query Shopify’s storefront API.
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#api-access
api_access = true
```

## /extensions/example-pre-purchase-offer/src/Checkout.jsx

```jsx
import "@shopify/ui-extensions/preact";
import { render } from "preact";
import { useEffect, useState } from "preact/hooks";


// 1. Export the extension
export default function () {
  render(<Extension />, document.body);
}


function Extension() {
  const { applyCartLinesChange, query, i18n } = shopify;
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [adding, setAdding] = useState(false);
  const [showError, setShowError] = useState(false);
  const { lines } = shopify;


  useEffect(() => {
    fetchProducts();
  }, []);


  useEffect(() => {
    if (showError) {
      const timer = setTimeout(() => setShowError(false), 3000);
      return () => clearTimeout(timer);
    }
  }, [showError]);


  async function handleAddToCart(variantId) {
    setAdding(true);
    const result = await applyCartLinesChange({
      type: "addCartLine",
      merchandiseId: variantId,
      quantity: 1,
    });
    setAdding(false);
```

## Tutorial complete!

Nice work - what you just built could be used by Shopify merchants around the world! Keep the momentum going with these related tutorials and resources.

### Next steps

[![](https://shopify.dev/images/icons/32/heart.png)![](https://shopify.dev/images/icons/32/heart-dark.png)](https://shopify.dev/docs/apps/checkout/product-offers/pre-purchase/ux-guidelines)

[Review product offer UX guidelines](https://shopify.dev/docs/apps/checkout/product-offers/pre-purchase/ux-guidelines)

[Build a good pre-purchase product offer experience by following our UX guidelines.](https://shopify.dev/docs/apps/checkout/product-offers/pre-purchase/ux-guidelines)

[![](https://shopify.dev/images/icons/32/globe.png)![](https://shopify.dev/images/icons/32/globe-dark.png)](https://shopify.dev/docs/apps/checkout/localizing-ui-extensions)

[Localize your extension](https://shopify.dev/docs/apps/checkout/localizing-ui-extensions)

[Learn how to localize the text and number formats in your extension.](https://shopify.dev/docs/apps/checkout/localizing-ui-extensions)

[![](https://shopify.dev/images/icons/32/blocks.png)![](https://shopify.dev/images/icons/32/blocks-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components)

[Explore the checkout UI extension component reference](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components)

[Learn about all of the components that you can use in your checkout UI extension.](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components)

[![](https://shopify.dev/images/icons/32/blocks.png)![](https://shopify.dev/images/icons/32/blocks-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/extensiontargets)

[Explore the checkout UI extension targets API reference](https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/extensiontargets)

[Learn about the extension targets offered in the checkout.](https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/extensiontargets)