ShoppablePost

• The ShoppablePost component is a versatile tool for React Native applications tailored for e-commerce and content-rich platforms. It enhances the user experience by integrating shoppable features directly within media posts, such as images. Is one of the minis UGC, User-Generated Content, that allows users to create and share their own content, and other users can shop directly from it.

  This component dynamically renders an image with associated actionable elements like a list of related products that can be directly shopped from the post.

  Designed to foster interactive shopping experiences, the ShoppablePost supports customization for media rendering and extends functionality to include product relationships directly beneath the media content, dynamically adjusting its layout based on content attributes and device-specific behaviors.

  Here's how you can use the ShoppablePost component within your React Native application:

• 
  

  <ShoppablePost
    post={postDetails}
    shopId="shop123"
    renderMedia={({ item }) => <CustomMediaComponent item={item} />}
    renderMediaFooter={({ item }) => <CustomFooterComponent item={item} />}
  />

Requirements:

• Ensure your project environment is set up with access to @shopify/shop-minis-platform-sdk. See the quickstart for requirements and to set up a Shop Mini.

Integration

Step 1: Importing the Component

Import the ShoppablePost component from where it's defined in your project’s component library:

import { ShoppablePost } from '@shopify/shop-minis-platform-sdk';

Step 2: Using the ShoppablePost

Implement the ShoppablePost in parts of your application that match products with rich media content. You will need to supply a distinct shopId, details of the post, and methods for rendering the media or footer if customization is required:

<ShoppablePosts
  items={shoppablePosts}
  shopId={entryPointParams.shopGID}
  fetchMoreByProductIds={fetchMoreByProductIds}
  fetchMoreByShopId={fetchMoreByShopId}
/>

Example

For detailed examples check how to build a ShoppablePost mini using this template here.

Props

• post: (ShoppablePostsItem) The post object containing details like image URL, related products, and descriptions.
• shopId: (string) The identifier for the shop within which the post exists.
• renderMedia: (function) Optional. Custom render function for the media content.
• renderMediaFooter: (function) Optional. A render prop for the footer component to be displayed under the media.

For more details on the props, please refer to the ShoppablePosts Props.