Shopify Extensions Guide

📚 Official References (Latest)

• App Extensions Overview: Shopify.dev - App Extensions
• List of All Extensions: Shopify.dev - Extension List
• Checkout UI Extensions: Shopify.dev - Checkout UI Extensions
• Admin UI Extensions: Shopify.dev - Admin UI Extensions
• Theme App Extensions: Shopify.dev - Theme App Extensions
• Shopify Functions: Shopify.dev - Shopify Functions

🛠️ Prerequisites

• Shopify CLI: Ensure you are using the latest version of Shopify CLI.
  bash

  npm install -g @shopify/cli@latest

• Shopify App: Extensions must be part of a Shopify App.

🚀 Common Extension Types

1. Admin UI Extensions

• Action Extensions: Add transactional workflows (modals) to resource pages (Orders, Products, Customers).
  • Usage: "More actions" menu.
• Block Extensions: Embed contextual information as cards directly on resource pages.
  • Usage: Inline cards on Product/Order details.
• Configuration: Defined in

  shopify.extension.toml

  .
  toml

  [[extensions]]
  type = "ui_extension"
  name = "product-action"
  handle = "product-action"
  
  [[extensions.targeting]]
  target = "admin.product-details.action.render"
  module = "./src/ActionExtension.jsx"

2. Checkout UI Extensions

• Targets: Information, Shipping, Payment, Order Summary, Thank You Page, Order Status Page.
• Capabilities:
  • Show banners/upsells.
  • Collect additional data (attributes).
  • Validate input.
• UI Components: Use Shopify's restricted component library (Banner, Button, TextField, etc.) for security and performance.
• Example Configuration:
  toml

  [[extensions]]
  type = "ui_extension"
  name = "checkout-banner"
  handle = "checkout-banner"
  
  [[extensions.targeting]]
  target = "purchase.checkout.block.render"
  module = "./src/CheckoutBanner.jsx"

3. Theme App Extensions

• App Blocks: Reusable UI blocks merchants can add to templates.
• App Embed Blocks: Floating elements or global scripts/styles (e.g., chat widgets).
• Assets: CSS/JS files are scoped to the extension.

4. specialized Extensions

• Shopify Functions: Backend logic for discounts, shipping, and payment methods (replaces Shopify Scripts).
• Post-Purchase Extensions: Add pages between checkout and thank you page (e.g., one-click upsells).
• Web Pixels: Securely subscribe to behavioral events for analytics.
• POS UI Extensions: Custom tiles and modals for Shopify POS.

💻 CLI Extension Creation

shopify app generate extension

Basic Usage

shopify app generate extension

Non-Interactive Usage (CI/CD or Scripts)

shopify app generate extension --name "my-extension" --template <template_type> --flavor <flavor>

• --name

  : The name of your extension.

• --template

  : The type of extension to generate (e.g.,

  checkout_ui

  ,

  product_subscription

  ,

  theme_app_extension

  ).

• --flavor

  : The language/framework to use (e.g.,

  react

  ,

  typescript

  ,

  vanilla-js

  ). Note: Not all extensions support all flavors.

Examples

shopify app generate extension --template checkout_ui --name "checkout-upsell" --flavor react

shopify app generate extension --template theme_app_extension --name "trust-badges"

shopify app generate extension --template product_discounts --name "volume-discount" --flavor rust

Useful Flags

• --client-id <value>

  : Explicitly link to a specific app Client ID.

• --path <path>

  : Run the command in a specific directory.

• --reset

  : Reset the project configuration.

📝 Development Workflow

1. Generate Extension:
   bash

   shopify app generate extension

   Select the extension type from the list.
2. Develop:
   • Edit source files (React/JS/TS).
   • Configure

     shopify.extension.toml

     .
   • Use

     shopify app dev

     to preview.
3. Deploy:
   bash

   shopify app deploy

   This publishes the extension version to Shopify Partners.
4. Publish:
   • Go to Partner Dashboard > App > Extensions.
   • Publish the uploaded version.

💡 Best Practices

• Performance: UI extensions run in a web worker (Checkout/Admin). Avoid heavy computations.
• Design: Use Polaris components (Admin) or provided UI components (Checkout) to match Shopify's look and feel.
• API Usage: Use the

  useApi()

  hook in React extensions to access valid APIs and data for the current context.
• Versioning: Always test new extension versions in a development store before promoting to production.