Plasmic data integrations

Overview

Plasmic can let you drag and drop data. This lets you design with real dynamic data from anywhere.

Plasmic provides a number of built-in data sources in its component store. But your team can also author your own (see below).

Currently, the built-in integrations include:

  • Commerce platforms, like Shopify and Swell. This lets you display products from your catalog, including their info and images, as individual products or collections. You can also insert add-to-cart functionality, variant pickers, cart-display widgets, and much more.
  • CMSes, like Plasmic CMS, Sanity, and Strapi. This lets you display structured records of data from your CMS, such as your blog posts, testimonials, case studies, and more.

The data-fetching defaults to occurring at pre-render time (at static page generation or server-side rendering time), so that you have fast and optimal page rendering.

How to use data components

Here’s an example of adding Shopify data:

Here’s an example of adding Plasmic CMS data:

With all of these components, the general pattern looks like:

  • Configure the integration’s global settings in the left sidebar tab. This usually involves specifying the exact data source and credentials.
  • Insert some data-fetching component into your page. This might be a ProductCollection or ProductBox for commerce.
  • Add the correct details!
  • If you are able, then you can do this.

Portable commerce components

For the commerce platform integrations like Shopify and Swell, these actually share a common set of data-display and data-fetching components. That means that a design or template that uses one can easily be switched from one data source to another.

For instance, if you start with a project template showing Shopify products, you can simply remove the Shopify commerce package and add the Swell one. You won’t need to replace the actual data-fetching and data-display components that currently exist throughout the page (other than changing your product/collection specifiers to make sense for the new store).

Customizing or creating new data integrations

All these data integrations are implemented just as normal code components—React components that have been registered for use in Plasmic. You can fork and customize these for your own needs, or write your own data-fetching code components.

If you would like us to prioritize building integrations for any other data sources, please get in touch with our enterprise team.

Give feedback on this page