---
title: useCreateImageContent
description: >-
  The `useCreateImageContent` hook combines image upload with content creation
  to generate user-generated content entries. Built on top of `useImageUpload`,
  it extends the basic upload functionality with content management features
  including titles, visibility controls, and unique IDs for sharing and
  discovery.


  ### Visibility Options


  The `visibility` parameter accepts an optional array of `ContentVisibility`
  values:


  - **`DISCOVERABLE`**: Makes content eligible for Shop's recommendation and
  discovery systems. Your content can appear in feeds and recommendations across
  the Shop app.

  - **`LINKABLE`**: Enables shareable URLs for the content. Required if you want
  users to share content via direct links (generates a `shareableUrl`).

  - **Both values**: `['DISCOVERABLE', 'LINKABLE']` - Maximum reach with content
  both discoverable in recommendations and shareable via links.

  - **No values** (`null` or `[]`): Content remains private within your Mini,
  not discoverable or shareable externally.


  ### Use Cases


  Choose visibility settings based on your content strategy:

  - User reviews with photos: Use both `DISCOVERABLE` and `LINKABLE` for maximum
  reach

  - Private user collections: Omit visibility or use empty array

  - Shareable but not public: Use `LINKABLE` only

  - Featured content: Use `DISCOVERABLE` to appear in recommendations


  The hook handles both the image upload pipeline and content entity creation in
  a single operation, automatically associating content with your Mini and
  integrating with Shop's content systems.


  > Caution: You must run the [`setup`](/docs/api/shop-minis/commands/setup) CLI
  command before using this hook so the content can be associated with the Mini.
api_name: shop-minis
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/hooks/content/usecreateimagecontent'
  md: >-
    https://shopify.dev/docs/api/shop-minis/hooks/content/usecreateimagecontent.md
---

# use​Create​Image​Content

The `useCreateImageContent` hook combines image upload with content creation to generate user-generated content entries. Built on top of `useImageUpload`, it extends the basic upload functionality with content management features including titles, visibility controls, and unique IDs for sharing and discovery.

### Visibility Options

The `visibility` parameter accepts an optional array of `ContentVisibility` values:

* **`DISCOVERABLE`**: Makes content eligible for Shop's recommendation and discovery systems. Your content can appear in feeds and recommendations across the Shop app.
* **`LINKABLE`**: Enables shareable URLs for the content. Required if you want users to share content via direct links (generates a `shareableUrl`).
* **Both values**: `['DISCOVERABLE', 'LINKABLE']` - Maximum reach with content both discoverable in recommendations and shareable via links.
* **No values** (`null` or `[]`): Content remains private within your Mini, not discoverable or shareable externally.

### Use Cases

Choose visibility settings based on your content strategy:

* User reviews with photos: Use both `DISCOVERABLE` and `LINKABLE` for maximum reach
* Private user collections: Omit visibility or use empty array
* Shareable but not public: Use `LINKABLE` only
* Featured content: Use `DISCOVERABLE` to appear in recommendations

The hook handles both the image upload pipeline and content entity creation in a single operation, automatically associating content with your Mini and integrating with Shop's content systems.

**Caution:** You must run the \<a href="/docs/api/shop-minis/commands/setup">\<code>setup\</code>\</a> CLI command before using this hook so the content can be associated with the Mini.

## use​Create​Image​Content()

### Returns

* **UseCreateImageContentReturns**

  ### ### UseCreateImageContentReturns

  * **createImageContent**

    **(params: CreateImageContentParams) => Promise<{ data: Content; userErrors?: ContentCreateUserErrors\[]; }>**

    Upload an image and create content.

  * **loading**

    **boolean**

    Whether the content is being created.

### UseCreateImageContentReturns

* createImageContent

  Upload an image and create content.

  ```ts
  (params: CreateImageContentParams) => Promise<{ data: Content; userErrors?: ContentCreateUserErrors[]; }>
  ```

* loading

  Whether the content is being created.

  ```ts
  boolean
  ```

```ts
interface UseCreateImageContentReturns {
  /**
   * Upload an image and create content.
   */
  createImageContent: (
    params: CreateImageContentParams
  ) => Promise<{data: Content; userErrors?: ContentCreateUserErrors[]}>
  /**
   * Whether the content is being created.
   */
  loading: boolean
}
```

### CreateImageContentParams

* contentTitle

  ```ts
  string
  ```

* image

  ```ts
  File
  ```

* visibility

  ```ts
  ContentVisibility[] | null
  ```

```ts
interface CreateImageContentParams {
  image: File
  contentTitle: string
  visibility?: ContentVisibility[] | null
}
```

### ContentVisibility

```ts
'DISCOVERABLE' | 'LINKABLE'
```

### Content

* description

  ```ts
  string | null
  ```

* externalId

  ```ts
  string | null
  ```

* image

  ```ts
  ContentImage
  ```

* products

  ```ts
  ContentProduct[] | null
  ```

* publicId

  ```ts
  string
  ```

* shareableUrl

  ```ts
  string | null
  ```

* status

  ```ts
  MinisContentStatus | null
  ```

* title

  ```ts
  string
  ```

* visibility

  ```ts
  ContentVisibility[]
  ```

```ts
export interface Content {
  publicId: string
  externalId?: string | null
  image: ContentImage
  title: string
  description?: string | null
  visibility: ContentVisibility[]
  shareableUrl?: string | null
  products?: ContentProduct[] | null
  status?: MinisContentStatus | null
}
```

### ContentImage

* altText

  ```ts
  string | null
  ```

* height

  ```ts
  number | null
  ```

* id

  ```ts
  string | null
  ```

* thumbhash

  ```ts
  string | null
  ```

* url

  ```ts
  string
  ```

* width

  ```ts
  number | null
  ```

```ts
export interface ContentImage {
  id?: string | null
  url: string
  width?: number | null
  height?: number | null
  thumbhash?: string | null
  altText?: string | null
}
```

### ContentProduct

* featuredImage

  ```ts
  ContentImage | null
  ```

* id

  ```ts
  string
  ```

* title

  ```ts
  string
  ```

```ts
export interface ContentProduct {
  id: string
  title: string
  featuredImage?: ContentImage | null
}
```

### MinisContentStatus

* PENDING

  ```ts
  PENDING
  ```

* READY

  ```ts
  READY
  ```

* REJECTED

  ```ts
  REJECTED
  ```

```ts
export enum MinisContentStatus {
  PENDING = 'PENDING',
  READY = 'READY',
  REJECTED = 'REJECTED',
}
```

### ContentCreateUserErrors

* code

  ```ts
  ContentCreateUserErrorCode
  ```

* message

  ```ts
  string
  ```

```ts
export interface ContentCreateUserErrors {
  code: ContentCreateUserErrorCode
  message: string
}
```

### ContentCreateUserErrorCode

* DUPLICATE\_EXTERNAL\_ID

  ```ts
  DUPLICATE_EXTERNAL_ID
  ```

* INELIGIBLE\_PRODUCTS

  ```ts
  INELIGIBLE_PRODUCTS
  ```

```ts
export enum ContentCreateUserErrorCode {
  DUPLICATE_EXTERNAL_ID = 'DUPLICATE_EXTERNAL_ID',
  INELIGIBLE_PRODUCTS = 'INELIGIBLE_PRODUCTS',
}
```

Examples

### Examples

* #### Example code

  ##### Default

  ```tsx
  import {
    useCreateImageContent,
    useImagePicker,
    Button,
  } from '@shopify/shop-minis-react'

  export default function MyComponent() {
    const {createImageContent, loading} = useCreateImageContent()
    const {openCamera, openGallery} = useImagePicker()

    const handleCameraCapture = async () => {
      try {
        const file = await openCamera()
        const result = await createImageContent({
          image: file,
          contentTitle: 'Photo from camera',
          visibility: ['DISCOVERABLE', 'LINKABLE'],
        })
        console.log({data: result.data, userErrors: result.userErrors})
      } catch (error) {
        console.error('Failed to capture and upload image:', error)
      }
    }

    const handleGallerySelect = async () => {
      try {
        const file = await openGallery()
        const result = await createImageContent({
          image: file,
          contentTitle: 'Photo from gallery',
          // Visibility options:
          // - ['DISCOVERABLE'] - Appears in Shop recommendations
          // - ['LINKABLE'] - Enables shareable URLs
          // - ['DISCOVERABLE', 'LINKABLE'] - Both features
          // - null or [] - Private within Mini only
          visibility: ['DISCOVERABLE', 'LINKABLE'],
        })
        console.log({data: result.data, userErrors: result.userErrors})
      } catch (error) {
        console.error('Failed to select and upload image:', error)
      }
    }

    return (
      <>
        <Button onClick={handleCameraCapture} disabled={loading}>
          Take Photo and Upload
        </Button>
        <Button onClick={handleGallerySelect} disabled={loading}>
          Select from Gallery and Upload
        </Button>
        {loading && <p>Uploading image...</p>}
      </>
    )
  }
  ```

## Related

[For displaying images - ImageContentWrapper](../../components/primitives/imagecontentwrapper)