Watch our biggest AI launch event

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Platform
Developers
Contact Sales

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

By combining the flexibility of custom components and the features of e-commerce plugins, you can integrate your custom component's input fields with your e-commerce platform.

The following video shows using a custom component—being dragged in from the left—along with a plugin to feature an image of a shirt in the collection grid.

When you use e-commerce plugin custom types with component inputs, your teammates can use these custom fields to select products, collections, and other e-commerce platform resources from a searchable list. Your component receives the selected resource's handle as a prop, which you can use to fetch and consume data from your e-commerce platform.

Use cases for this technique could include:

  • Displaying a selected product's details
  • Displaying a selected product collection
  • Combining data from a selected product with data fetched from external platforms to display shipping times, pricing histories, and other information.

Providing a searchable list for selecting e-commerce platform resources reduces the risk of data entry errors when compared to requiring users to manually enter handles or resource IDs and offers better UX when using your components.

To get the most out of this document, you should be familiar with the following:

This section demonstrates registering your custom component using an e-commerce plugin custom type.

The ProductCollection React component in the example below displays the titles of a product collection's products from a Shopify store.

The component has a string prop called collection that corresponds to the collection's handle. The component fetches the collection's data from Shopify using a function called getCollection() and stores the collection's products in its local state. Finally, it renders each product's title.

const ProductCollection = ({ collection }) => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const result = getCollection(collection);

    setProducts(result.products);
  }, [collection]);

  return (
    <div>
      {products.map((product, i) => (
        <h1 key={`product-${i}`}>
          {product.title}
        </h1>
      ))}
    </div>
  );
}

Next, register the component using Builder.registerComponent(), which makes the component available for use in the Visual Editor. This example has one input, collection, with the type ShopifyCollectionHandle.

Builder.registerComponent(ProductCollection, {
  name: 'ProductCollection',
  inputs: [
    {
      name: 'collection',
      type: 'ShopifyCollectionHandle',
    },
  ],
});

ShopifyCollectionHandle is a custom type available in the Shopify e-commerce plugin that represents the handle of a Shopify collection. The exact types that you use when registering your components depend on your application and the e-commerce platform with which you're integrating.

Tip: We suggest that you use request object, handle, or list types depending on your use case.

Request object types are versatile: they provide you with an id, which you can use to fetch resource data from your e-commerce platform.

By passing includeRefs: true to builder.get(), when the query API sends content, it fetches any data you specify, as in this example on GitHub. The Visual Editor also fetches remote requests while editing when you pass options=undefined to BuilderComponent, as in this example on GitHub.

Handle and list types are convenient when you need to consume a resource's handle—for example, while constructing a product page URL—or multiple resources at once.

For more information, see E-commerce Custom Types.

This section builds upon the example snippets above. Your e-commerce plugin options and custom component inputs might differ, but the process follows the same pattern.

  1. Add a ProductCollection block to your Page or Section in Builder.
  2. Set the collection by selecting Choose collection in the Options tab. This loads a searchable list with all the collections from your Shopify store available.
  3. Choosing a collection sets your ProductCollection block's collection field.

For more information on using e-commerce plugins, check out the following articles:

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

Product

Platform Overview

Integrations

What's New

Open Source

Builder

Builder

Mitosis

Mitosis

Qwik

Qwik

Partytown

Partytown

Popular Guides

From Design to Code Guide

Composable Commerce Guide

Headless CMS Guide

Headless Commerce Guide

Composable DXP Guide

Design to Code

Resources

Blog

Knowledge Base

Community Forum

Partners

Templates

Success Stories

Showcase

Resource Center

Frameworks

React

React

Next

Next.js

Qwik

Qwik

Gatsby

Gatsby

Angular

Angular

Vue

Vue

Svelte

Svelte

Remix logo

Remix

Nuxt

Nuxt

Hydrogen

Hydrogen

See All

© 2024 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Security & Compliance

Cookie Preferences