Intents API

Examples

• Description

  Launch the article creation workflow from a button click. This example uses `shopify.intents.invoke()` to open the article editor, awaits the workflow completion, and displays success or cancellation feedback based on the response code.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const [result, setResult] = useState(null);
    const [creating, setCreating] = useState(false);
  
    const handleCreate = async () => {
      setCreating(true);
      
      const activity = await shopify.intents.invoke('create:shopify/Article');
      const response = await activity.complete;
  
      setResult(response);
      setCreating(false);
    };
  
    return (
      <s-page heading="Create Article">
        <s-button onClick={handleCreate} disabled={creating}>
          {creating ? 'Creating...' : 'Launch Article Creator'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Article created successfully!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Creation cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Open the article editor for a selected blog post. This example retrieves the article GID from extension context, passes it to the edit intent, and handles both successful updates and cancellations.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const {data} = shopify;
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const resourceId = data.selected[0]?.id || 'gid://shopify/Article/123456789';
  
    const handleAction = async () => {
      setLoading(true);
      
      const activity = await shopify.intents.invoke('edit:shopify/Article', {
        value: resourceId,
      });
      
      const response = await activity.complete;
      setResult(response);
      setLoading(false);
    };
  
    return (
      <s-page heading="Edit Article">
        <s-text>Editing: {resourceId}</s-text>
        <s-button onClick={handleAction} disabled={loading}>
          {loading ? 'Opening...' : 'Edit Article'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Article updated!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Edit cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Launch the catalog creation workflow to set up B2B customer groups or market-specific product collections. This example invokes the create intent, manages loading state, and displays success or cancellation feedback.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const handleAction = async () => {
      setLoading(true);
      
      const activity = await shopify.intents.invoke('create:shopify/Catalog');
      const response = await activity.complete;
  
      setResult(response);
      setLoading(false);
    };
  
    return (
      <s-page heading="Create Catalog">
        <s-button onClick={handleAction} disabled={loading}>
          {loading ? 'Creating...' : 'Launch Catalog Creator'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Catalog created successfully!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Creation cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Open the catalog editor to adjust product assignments or market settings. This example retrieves the catalog GID from extension context, invokes the edit intent, and handles the completion response.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const {data} = shopify;
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const resourceId = data.selected[0]?.id || 'gid://shopify/Catalog/123456789';
  
    const handleAction = async () => {
      setLoading(true);
      
      const activity = await shopify.intents.invoke('edit:shopify/Catalog', {
        value: resourceId,
      });
      
      const response = await activity.complete;
      setResult(response);
      setLoading(false);
    };
  
    return (
      <s-page heading="Edit Catalog">
        <s-text>Editing: {resourceId}</s-text>
        <s-button onClick={handleAction} disabled={loading}>
          {loading ? 'Opening...' : 'Edit Catalog'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Catalog updated!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Edit cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Launch the collection creation workflow for organizing products on the storefront. This example invokes the create intent, tracks loading state, and displays feedback when the workflow completes.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const handleAction = async () => {
      setLoading(true);
      
      const activity = await shopify.intents.invoke('create:shopify/Collection');
      const response = await activity.complete;
  
      setResult(response);
      setLoading(false);
    };
  
    return (
      <s-page heading="Create Collection">
        <s-button onClick={handleAction} disabled={loading}>
          {loading ? 'Creating...' : 'Launch Collection Creator'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Collection created successfully!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Creation cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Open the collection editor to modify products or automation rules. This example retrieves the collection GID, invokes the edit intent, and handles the completion response.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const {data} = shopify;
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const resourceId = data.selected[0]?.id || 'gid://shopify/Collection/123456789';
  
    const handleAction = async () => {
      setLoading(true);
      
      const activity = await shopify.intents.invoke('edit:shopify/Collection', {
        value: resourceId,
      });
      
      const response = await activity.complete;
      setResult(response);
      setLoading(false);
    };
  
    return (
      <s-page heading="Edit Collection">
        <s-text>Editing: {resourceId}</s-text>
        <s-button onClick={handleAction} disabled={loading}>
          {loading ? 'Opening...' : 'Edit Collection'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Collection updated!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Edit cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Launch the customer creation form to add a new profile with contact details and addresses. This example invokes the create intent, awaits completion, and displays feedback based on the result code.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const handleAction = async () => {
      setLoading(true);
      
      const activity = await shopify.intents.invoke('create:shopify/Customer');
      const response = await activity.complete;
  
      setResult(response);
      setLoading(false);
    };
  
    return (
      <s-page heading="Create Customer">
        <s-button onClick={handleAction} disabled={loading}>
          {loading ? 'Creating...' : 'Launch Customer Creator'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Customer created successfully!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Creation cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Open the customer editor to update contact information or tags. This example retrieves the customer GID from extension context, invokes the edit intent, and handles the completion response.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const {data} = shopify;
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const resourceId = data.selected[0]?.id || 'gid://shopify/Customer/123456789';
  
    const handleAction = async () => {
      setLoading(true);
      
      const activity = await shopify.intents.invoke('edit:shopify/Customer', {
        value: resourceId,
      });
      
      const response = await activity.complete;
      setResult(response);
      setLoading(false);
    };
  
    return (
      <s-page heading="Edit Customer">
        <s-text>Editing: {resourceId}</s-text>
        <s-button onClick={handleAction} disabled={loading}>
          {loading ? 'Opening...' : 'Edit Customer'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Customer updated!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Edit cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Launch the discount creation form for setting up promotional campaigns. This example invokes the create intent, manages loading state, and displays feedback on completion.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const handleAction = async () => {
      setLoading(true);
      
      const activity = await shopify.intents.invoke('create:shopify/Discount');
      const response = await activity.complete;
  
      setResult(response);
      setLoading(false);
    };
  
    return (
      <s-page heading="Create Discount">
        <s-button onClick={handleAction} disabled={loading}>
          {loading ? 'Creating...' : 'Launch Discount Creator'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Discount created successfully!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Creation cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Open the discount editor to adjust values or extend active dates. This example retrieves the discount GID from extension context, invokes the edit intent, and handles the completion response.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const {data} = shopify;
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const resourceId = data.selected[0]?.id || 'gid://shopify/DiscountNode/123456789';
  
    const handleAction = async () => {
      setLoading(true);
      
      const activity = await shopify.intents.invoke('edit:shopify/Discount', {
        value: resourceId,
      });
      
      const response = await activity.complete;
      setResult(response);
      setLoading(false);
    };
  
    return (
      <s-page heading="Edit Discount">
        <s-text>Editing: {resourceId}</s-text>
        <s-button onClick={handleAction} disabled={loading}>
          {loading ? 'Opening...' : 'Edit Discount'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Discount updated!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Edit cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Open the file picker so the merchant can choose existing files from the store. Use the `data` options to filter by media type, allow multiple selection, or pre-select files. The workflow resolves with the selected file IDs in `response.data.ids`.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const [ids, setIds] = useState<string[]>([]);
    const [loading, setLoading] = useState(false);
  
    const handlePick = async () => {
      setLoading(true);
  
      const activity = await shopify.intents.invoke('pick:shopify/File', {
        data: {mediaTypes: ['MediaImage'], multiSelect: true},
      });
      const response = await activity.complete;
  
      if (response.code === 'ok') {
        setIds(response.data.ids);
      }
      setLoading(false);
    };
  
    return (
      <s-page heading="Pick files">
        <s-button onClick={handlePick} disabled={loading}>
          {loading ? 'Opening...' : 'Open file picker'}
        </s-button>
        {ids.length > 0 && <s-text>{ids.length} file(s) selected</s-text>}
      </s-page>
    );
  }

• Description

  Launch the market creation workflow for international selling with region-specific configurations. This example invokes the create intent, manages loading state, and displays feedback on completion.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const handleAction = async () => {
      setLoading(true);
      
      const activity = await shopify.intents.invoke('create:shopify/Market');
      const response = await activity.complete;
  
      setResult(response);
      setLoading(false);
    };
  
    return (
      <s-page heading="Create Market">
        <s-button onClick={handleAction} disabled={loading}>
          {loading ? 'Creating...' : 'Launch Market Creator'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Market created successfully!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Creation cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Open the market editor to adjust geographic coverage or pricing strategies. This example retrieves the market GID from extension context, invokes the edit intent, and handles the completion response.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const {data} = shopify;
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const resourceId = data.selected[0]?.id || 'gid://shopify/Market/123456789';
  
    const handleAction = async () => {
      setLoading(true);
      
      const activity = await shopify.intents.invoke('edit:shopify/Market', {
        value: resourceId,
      });
      
      const response = await activity.complete;
      setResult(response);
      setLoading(false);
    };
  
    return (
      <s-page heading="Edit Market">
        <s-text>Editing: {resourceId}</s-text>
        <s-button onClick={handleAction} disabled={loading}>
          {loading ? 'Opening...' : 'Edit Market'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Market updated!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Edit cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Launch the menu creation workflow for storefront navigation headers or footers. This example invokes the create intent, tracks loading state, and displays feedback on completion.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const handleAction = async () => {
      setLoading(true);
      
      const activity = await shopify.intents.invoke('create:shopify/Menu');
      const response = await activity.complete;
  
      setResult(response);
      setLoading(false);
    };
  
    return (
      <s-page heading="Create Menu">
        <s-button onClick={handleAction} disabled={loading}>
          {loading ? 'Creating...' : 'Launch Menu Creator'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Menu created successfully!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Creation cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Open the menu editor to reorganize navigation structure or update links. This example retrieves the menu GID from extension context, invokes the edit intent, and handles the completion response.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const {data} = shopify;
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const resourceId = data.selected[0]?.id || 'gid://shopify/Menu/123456789';
  
    const handleAction = async () => {
      setLoading(true);
      
      const activity = await shopify.intents.invoke('edit:shopify/Menu', {
        value: resourceId,
      });
      
      const response = await activity.complete;
      setResult(response);
      setLoading(false);
    };
  
    return (
      <s-page heading="Edit Menu">
        <s-text>Editing: {resourceId}</s-text>
        <s-button onClick={handleAction} disabled={loading}>
          {loading ? 'Opening...' : 'Edit Menu'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Menu updated!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Edit cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Launch the metafield definition creator to add custom data fields to products, orders, or customers. This example invokes the create intent, manages loading state, and displays feedback on completion.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const handleAction = async () => {
      setLoading(true);
      
      const activity = await shopify.intents.invoke('create:shopify/MetafieldDefinition');
      const response = await activity.complete;
  
      setResult(response);
      setLoading(false);
    };
  
    return (
      <s-page heading="Create Metafield Definition">
        <s-button onClick={handleAction} disabled={loading}>
          {loading ? 'Creating...' : 'Launch Metafield Definition Creator'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Metafield Definition created successfully!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Creation cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Open the metafield definition editor to modify validation rules or field descriptions. This example retrieves the definition GID from extension context, invokes the edit intent, and handles the completion response.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const {data} = shopify;
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const resourceId = data.selected[0]?.id || 'gid://shopify/MetafieldDefinition/123456789';
  
    const handleAction = async () => {
      setLoading(true);
      
      const activity = await shopify.intents.invoke('edit:shopify/MetafieldDefinition', {
        value: resourceId,
      });
      
      const response = await activity.complete;
      setResult(response);
      setLoading(false);
    };
  
    return (
      <s-page heading="Edit Metafield Definition">
        <s-text>Editing: {resourceId}</s-text>
        <s-button onClick={handleAction} disabled={loading}>
          {loading ? 'Opening...' : 'Edit Metafield Definition'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Metafield Definition updated!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Edit cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Launch the metaobject creator to add a new entry to a custom content type. This example invokes the create intent, tracks loading state, and displays feedback on completion.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const handleAction = async () => {
      setLoading(true);
      
      const activity = await shopify.intents.invoke('create:shopify/Metaobject');
      const response = await activity.complete;
  
      setResult(response);
      setLoading(false);
    };
  
    return (
      <s-page heading="Create Metaobject">
        <s-button onClick={handleAction} disabled={loading}>
          {loading ? 'Creating...' : 'Launch Metaobject Creator'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Metaobject created successfully!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Creation cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Open the metaobject editor to modify field values or resource references. This example retrieves the metaobject GID from extension context, invokes the edit intent, and handles the completion response.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const {data} = shopify;
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const resourceId = data.selected[0]?.id || 'gid://shopify/Metaobject/123456789';
  
    const handleAction = async () => {
      setLoading(true);
      
      const activity = await shopify.intents.invoke('edit:shopify/Metaobject', {
        value: resourceId,
      });
      
      const response = await activity.complete;
      setResult(response);
      setLoading(false);
    };
  
    return (
      <s-page heading="Edit Metaobject">
        <s-text>Editing: {resourceId}</s-text>
        <s-button onClick={handleAction} disabled={loading}>
          {loading ? 'Opening...' : 'Edit Metaobject'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Metaobject updated!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Edit cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Launch the metaobject definition creator to build reusable content types with custom field schemas. This example invokes the create intent, manages loading state, and displays feedback on completion.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const handleAction = async () => {
      setLoading(true);
      
      const activity = await shopify.intents.invoke('create:shopify/MetaobjectDefinition');
      const response = await activity.complete;
  
      setResult(response);
      setLoading(false);
    };
  
    return (
      <s-page heading="Create Metaobject Definition">
        <s-button onClick={handleAction} disabled={loading}>
          {loading ? 'Creating...' : 'Launch Metaobject Definition Creator'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Metaobject Definition created successfully!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Creation cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Open the metaobject definition editor to add fields or update validation rules. This example retrieves the definition GID from extension context, invokes the edit intent, and handles the completion response.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const definitionType = 'my_metaobject_definition_type';
  
    const handleAction = async () => {
      setLoading(true);
      
      const activity = await shopify.intents.invoke('edit:shopify/MetaobjectDefinition', {
        data: {
          type: definitionType,
        },
      });
      
      const response = await activity.complete;
      setResult(response);
      setLoading(false);
    };
  
    return (
      <s-page heading="Edit Metaobject Definition">
        <s-text>Editing: {definitionType}</s-text>
        <s-button onClick={handleAction} disabled={loading}>
          {loading ? 'Opening...' : 'Edit Metaobject Definition'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Metaobject Definition updated!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Edit cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Launch the page creator to add an informational page like About Us or Shipping Policy. This example invokes the create intent, manages loading state, and displays feedback on completion.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const handleAction = async () => {
      setLoading(true);
      
      const activity = await shopify.intents.invoke('create:shopify/Page');
      const response = await activity.complete;
  
      setResult(response);
      setLoading(false);
    };
  
    return (
      <s-page heading="Create Page">
        <s-button onClick={handleAction} disabled={loading}>
          {loading ? 'Creating...' : 'Launch Page Creator'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Page created successfully!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Creation cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Open the page editor to update content or SEO metadata. This example retrieves the page GID from extension context, invokes the edit intent, and handles the completion response.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const {data} = shopify;
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const resourceId = data.selected[0]?.id || 'gid://shopify/Page/123456789';
  
    const handleAction = async () => {
      setLoading(true);
      
      const activity = await shopify.intents.invoke('edit:shopify/Page', {
        value: resourceId,
      });
      
      const response = await activity.complete;
      setResult(response);
      setLoading(false);
    };
  
    return (
      <s-page heading="Edit Page">
        <s-text>Editing: {resourceId}</s-text>
        <s-button onClick={handleAction} disabled={loading}>
          {loading ? 'Opening...' : 'Edit Page'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Page updated!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Edit cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Launch the product creation workflow to add a new item to the store catalog. This example invokes the create intent, tracks loading state, and displays feedback on completion.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const [result, setResult] = useState(null);
    const [creating, setCreating] = useState(false);
  
    const handleCreate = async () => {
      setCreating(true);
  
      const activity = await shopify.intents.invoke('create:shopify/Product');
      const response = await activity.complete;
  
      setResult(response);
      setCreating(false);
    };
  
    return (
      <s-page heading="Create Product">
        <s-button onClick={handleCreate} disabled={creating}>
          {creating ? 'Creating...' : 'Launch Product Creator'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">
            Product created: {result.data?.product?.id}
          </s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Creation cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Open the product editor to update details, pricing, or images. This example retrieves the product GID from extension context, invokes the edit intent, and handles the completion response.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const {data} = shopify;
    const [result, setResult] = useState(null);
    const [editing, setEditing] = useState(false);
  
    const productId = data.selected[0]?.id || 'gid://shopify/Product/123456789';
  
    const handleEdit = async () => {
      setEditing(true);
      
      const activity = await shopify.intents.invoke('edit:shopify/Product', {
        value: productId,
      });
      
      const response = await activity.complete;
      setResult(response);
      setEditing(false);
    };
  
    return (
      <s-page heading="Edit Product">
        <s-text>Product: {productId}</s-text>
        <s-button onClick={handleEdit} disabled={editing}>
          {editing ? 'Opening...' : 'Edit Product'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Product updated!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Edit cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Launch the variant creation workflow to add size, color, or material options to a product. This example invokes the create intent, manages loading state, and displays feedback on completion.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const handleAction = async () => {
      setLoading(true);
      
      const activity = await shopify.intents.invoke('create:shopify/ProductVariant');
      const response = await activity.complete;
  
      setResult(response);
      setLoading(false);
    };
  
    return (
      <s-page heading="Create Product Variant">
        <s-button onClick={handleAction} disabled={loading}>
          {loading ? 'Creating...' : 'Launch Product Variant Creator'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Product Variant created successfully!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Creation cancelled</s-text>
        )}
      </s-page>
    );
  }

• Description

  Open the variant editor to modify pricing, SKU, or inventory levels. This example retrieves the variant GID from extension context, invokes the edit intent, and handles the completion response.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  function Extension() {
    const {data} = shopify;
    const [result, setResult] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const resourceId = data.selected[0]?.id || 'gid://shopify/ProductVariant/123456789';
  
    const handleAction = async () => {
      setLoading(true);
      
      const activity = await shopify.intents.invoke('edit:shopify/ProductVariant', {
        value: resourceId,
      });
      
      const response = await activity.complete;
      setResult(response);
      setLoading(false);
    };
  
    return (
      <s-page heading="Edit Product Variant">
        <s-text>Editing: {resourceId}</s-text>
        <s-button onClick={handleAction} disabled={loading}>
          {loading ? 'Opening...' : 'Edit Product Variant'}
        </s-button>
        {result?.code === 'ok' && (
          <s-banner tone="success">Product Variant updated!</s-banner>
        )}
        {result?.code === 'closed' && (
          <s-text>Edit cancelled</s-text>
        )}
      </s-page>
    );
  }