User-generated content

Learn how to create, display, and moderate user-generated image content in Shop Minis using the content system.

Anchor to IntroductionIntroduction

Shop Minis provides a built-in content system for handling user-generated images. This system includes automatic moderation, reporting capabilities, and shareable links. All user-generated images must use this system to ensure content safety and comply with Shop's Content Policy.

Anchor to Creating contentCreating content

Use the useCreateImageContent hook to upload images and create content. This hook handles the upload process and returns content metadata including moderation status.

HookLearn more about the useCreateImageContent hook

Creating image content

import {useCreateImageContent} from '@shopify/shop-minis-react'

import {useImagePicker} from '@shopify/shop-minis-react'

export default function UploadImage() {

const {createImageContent, loading} = useCreateImageContent()

const {pickImage} = useImagePicker()

const handleUpload = async () => {

// Pick an image from the user's device

const image = await pickImage()

if (image) {

// Upload and create content

const result = await createImageContent({

image: image.uri,

title: 'My uploaded image',

description: 'A great photo',

externalId: 'unique-id-123', // Optional: Your own ID for reference

visibility: ['DISCOVERABLE', 'LINKABLE'],

})

if (result.data) {

console.log('Content created:', result.data.publicId)

console.log('Status:', result.data.status) // PENDING, READY, or REJECTED

console.log('Shareable URL:', result.data.shareableUrl)

}

if (result.userErrors) {

console.error('Upload failed:', result.userErrors)

}

return (

{loading ? 'Uploading...' : 'Upload Image'}

</Button>

)

}

Anchor to Content visibilityContent visibility

The visibility parameter controls how content can be discovered and shared. It accepts an array of ContentVisibility values:

DISCOVERABLE: Content appears in Shop's recommendation surfaces, such as feeds and content discovery areas.
LINKABLE: Content gets a shareable URL, enabling users to share it outside of Shop.

Pass both values to make content fully public, or pass null or an empty array to keep content private within your Mini.

Anchor to Content statusContent status

Content goes through moderation and has three possible statuses:

PENDING: Content is being reviewed for moderation.
READY: Content has passed moderation and can be displayed.
REJECTED: Content was rejected during moderation.

Users will always be able to see their own content, but will not be able to see other users' rejected content. In this case, it will be null.

Anchor to Displaying contentDisplaying content

Use the ContentWrapper component to display user-generated images. This component provides built-in moderation reporting functionality that allows users to long-press on content to report inappropriate material.

Caution

Always use ContentWrapper instead of rendering user-generated content directly. This is required for content moderation.

ComponentLearn more about the ContentWrapper component

You can also use an externalId if you're tracking content with your own identifiers:

Anchor to Long-press moderationLong-press moderation

Content displayed with ContentWrapper automatically supports long-press gestures for user reporting. When a user long-presses on the content, they can report it for moderation if it violates Shop's content policies.

This functionality is built into the component and requires no additional configuration. Shop's moderation team will review reported content and take appropriate action.

Anchor to Linking to contentLinking to content

Content created with useCreateImageContent includes a shareableUrl property that you can use to link to the content from outside your Mini or share with other users.

Anchor to Deeplinking to contentDeeplinking to content

When a user opens a content link (shop.app/mc/<public_id>), the Shop app opens your Mini and passes the publicId through the deeplink. Use the useDeeplink hook to retrieve the content ID and display the appropriate content.

HookLearn more about the useDeeplink hook

Handling content deeplinks

import {useDeeplink} from '@shopify/shop-minis-react'

import {ContentWrapper, Image, MinisContentStatus} from '@shopify/shop-minis-react'

export default function ContentPage() {

const {publicId} = useDeeplink()

if (!publicId) {

return <div>No content specified</div>

}

return (

{({content, loading}) => {

if (loading) return <div>Loading...</div>

if (!content || content.status !== MinisContentStatus.READY) {

return <div>Content not available</div>

}

return (

<div>

<h1>{content.title}</h1>

{content.description && <p>{content.description}</p>}

<Image

src={content.image.url}

alt={content.title}

</div>

)

}}

</ContentWrapper>

)

}

Anchor to GuidelinesGuidelines

When working with user-generated content, follow these guidelines:

Required moderation: All user-generated images must use useCreateImageContent and ContentWrapper. This is enforced during the Mini review process.
Check status: Always check the content status before displaying. Only show content with READY status.
Use the wrapper: Never render user-generated content directly. Always use ContentWrapper to enable moderation reporting.
Content policy: Ensure your moderation practices align with Shop's Content Policy.
Additional review: Minis with user-generated content will face additional review scrutiny during submission.

GuideReview submission guidelines

Anchor to Related resourcesRelated resources

useCreateImageContent hook - Create and upload image content
ContentWrapper component - Display moderated content
useDeeplink hook - Handle content deeplinks
useImagePicker hook - Pick images from device
useShare hook - Share content with others
Guidelines - Review and submission requirements

Was this page helpful?