BigCommerce
Integrations
Apps
Guide
Designing the UI

Designing a Single-Click App's UI

Your app's user interface is loaded inside an iFrame in a store's control panel after a user clicks the app's icon in the left nav and triggers the load callback. To ensure a seamless user experience, you should design your app's UI to match the design of BigCommerce's control panel. We've built a collection of reusable React components, design guidelines, and UI patterns (known collectively as BigDesign) that you can use to rapidly develop an app front-end that's consistent with BigCommerce's UI.

Installing BigDesign React components

Add BigDesign and styled-components to your project using npm:

npm install @bigcommerce/big-design styled-components

or with yarn:

yarn add @bigcommerce/big-design styled-components

Import the GlobalStyles component and use it once in your app. This will set a few styles globally, including a base font family, Source Sans Pro (opens in a new tab) and normalize.css (opens in a new tab). We recommend placing it close to your root component. Then import any component, such as Button, to use it anywhere in your app.

GlobalStyles component
import { Button, GlobalStyles } from '@bigcommerce/big-design';
 
// ...
 
<App>
  <GlobalStyles />
  <Button>Click me</Button>
</App>

For additional installation and usage instructions, see the bigcommerce/big-design (opens in a new tab) repo on GitHub.

Using BigDesign tools

The BigCommerce team has developed a collection of tools to help you design your app's UI.

Developer playground

The BigDesign Playground demonstrates the visual style and behavior of each BigDesign component. Each component has props that you can pass to the components for further configuration.

Go to the BigDesign Developer Playground (opens in a new tab).

Example app

We've built a channels app that serves as a reference implementation for BigDesign React Components. You can install it on your store here (opens in a new tab) (apps.bigcommerce.com) to view the components.

Learn more about the channels app (opens in a new tab).

Design kits

Do you design with Figma? If so, check out our design kit:

Developing for the iFrame

Single-click apps benefit from a high level of integration with the BigCommerce control panel. BigCommerce achieves this by rendering your app's UI in an iFrame. To meet App Marketplace (opens in a new tab) requirements, your app should perform all functions inside the iFrame. The iFrame approach requires special attention from app developers.

To load inside the control panel iFrame, your app must do the following:

  1. Serve app resources over HTTPS: BigCommerce's control panel is served over HTTPS. Your app must also be served over HTTPS, including any remote resources referenced (such as CSS, JS, and image files). If any resources are served over HTTP, the user's browser will display a mixed content error and refuse to render your app's UI in the control panel iFrame.
  2. Support browser same-origin policies: Same-origin policities restrict apps running within iFrames from performing certain activities, such as interacting with other services. If your app requires this, open a new tab for actions that cannot occur in an iFrame1. Learn more about same-origin policies (opens in a new tab) (developer.mozilla.org).

Apps that operate in the iFrame get strong preference during App Marketplace (opens in a new tab) consideration; however, we sometimes make exceptions for apps that need to interact with other services.

Next steps

Resources

Sample apps

Tools

Blog posts

Listening for EventsCreating Install Buttons