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:
- Shopify (YouTube tutorial)
- Swell (YouTube tutorial)
- Saleor
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.
- Open up your project in Plasmic Studio.
- Click “Insert…” (keyboard shortcut: Q) to open the insert menu.
- Browse the Component Store or type an integration name to search for it.
- Click a package to install.
- 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.
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
| Component | Data | Description |
|---|---|---|
| Category Collection | Provides - currentCategory- categories | Fetches all product categories |
| Category Field | Requires currentCategory | Displays text about the currentCategory |
| Category Link | Requires currentCategory | Link to currentCategory |
| Category Media | Requires currentCategory | Displays media for the currentCategory |
| Product Box | Provides - currentProduct | Fetches a single product |
| Product Collection | Provides - currentProduct- products | Fetches all products |
| Product Link | Requires currentProduct | Link to currentProduct |
| Product Media | Requires currentProduct | Displays media for the currentProduct |
| Product Media Collection | Requires currentProduct | Displays all media for the currentProduct in a grid |
| Product Price | Requires currentProduct | Displays price for the currentProduct |
| Product Slider | Requires currentProduct | Displays all media for the currentProduct in a slideshow |
| Product Text Field | Requires currentProduct | Provides text data for the currentProduct |
| Cart | None | Displays data about the user’s cart |
| Add To Card Button | Requires currentProduct | Displays a button to add the currentProduct to the user’s cart |
| Product Quantity | Requires currentProduct | Displays a quantity input for the currentProduct.Used with Add To Card Button. |
| Product Variant Picker | Requires currentProduct | Displays a variant picker for the currentProduct.Used with Add To Card Button. |
Have feedback on this page? Let us know on our forum.