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 tirggers 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 and normalize.css. We recommend placing it close to your root component. Then import any component, such as Button, to use it anywhere in your app.

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 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.

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 (apps.bigcommerce.com) to view the components.

Learn more about the channels app.

Design kits

Do you design with Figma or Adobe Illustrator? If so, check out our design kits:

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 Apps Marketplace 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 (developer.mozilla.org).

Note

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

Next steps

Resources

Sample apps

Tools

Blog posts