Ecommerce integrations

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

Plasmic has built-in support for the following ecommerce platforms:

Installation

First, you’ll need to install the ecommerce package on your Plasmic project from the Component Store. For general documentation about installing packages, read our data-fetching components page.

  1. Open up your project in Plasmic Studio.
  2. Click “Insert…” (keyboard shortcut: Q) to open the insert menu.
  3. Browse the Component Store or type an integration name to search for it.
  4. Click a package to install.
  5. Configure the package 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

ComponentDataDescription
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?

Join 3000+ Plasmic users on Slack