Ecommerce integrations

Plasmic ecommerce integrations let you build your online store with the power of Plasmic Studio.

Plasmic supports the following built-in integrations:


First, you’ll need to install ecommerce on your Plasmic project. For general documentation about installing data integrations, read our data integrations page.

  1. Open up your project in Plasmic Studio
  2. Click “Insert…” (keyboard shortcut: Q)
  3. Click “Add component packages”
  4. Find and click the integration to install
  5. Configure the integration in the “Project Settings” left sidebar tab

Using ecommerce components

To use ecommerce components effectively, you’ll need to understand how to use “data fetching” and “data displaying” components.

A data fetching component fetches data which can then be referenced by its nested elements. The data fetching can usually be configured in the component’s settings.

A data displaying component can then reference the fetched data and display them, such as text data or a link to an image. If a data displaying component is not nested under expected data fetching component, it may not work properly.

For example, try inserting a Product Collection component. By default, if you dig into its children slot, you’ll see a nested Product Text Field and Product Media component. In this scenario, the Product Collection component is the data fetching component, and the Product Text Field and Product Media components are the data displaying components, using dynamic values under the hood.

Dynamic values

If you want to explore the fetched data for yourself, try inserting a Text component somewhere under Product Collection. Right-click its text content property on the right sidebar. You should see currentProduct and products available as data. Click around and explore the data! Hooray, you’re now using dynamic values!

Component catalog

Category CollectionProvides
- currentCategory
- categories
Fetches all product categories
Category FieldRequires currentCategoryDisplays text about the currentCategory
Category LinkRequires currentCategoryLink to currentCategory
Category MediaRequires currentCategoryDisplays media for the currentCategory
Product BoxProvides
- currentProduct
Fetches a single product
Product CollectionProvides
- currentProduct
- products
Fetches all products
Product LinkRequires currentProductLink to currentProduct
Product MediaRequires currentProductDisplays media for the currentProduct
Product Media CollectionRequires currentProductDisplays all media for the currentProduct in a grid
Product PriceRequires currentProductDisplays price for the currentProduct
Product SliderRequires currentProductDisplays all media for the currentProduct in a slideshow
Product Text FieldRequires currentProductProvides text data for the currentProduct
CartNoneDisplays data about the user’s cart
Add To Card ButtonRequires currentProductDisplays a button to add the currentProduct to the user’s cart
Product QuantityRequires currentProductDisplays a quantity input for the currentProduct.
Used with Add To Card Button.
Product Variant PickerRequires currentProductDisplays a variant picker for the currentProduct.
Used with Add To Card Button.
Was this page helpful?

Give feedback on this page