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 (opens in a new tab)) 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-componentsor with yarn:
yarn add @bigcommerce/big-design styled-componentsImport 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.
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 created BigDesign (opens in a new tab), a complete and thorough design system that covers design, development and UX writing tools to speed up and enhance the design of your app's UI.
Figma Libraries
BigDesign also provides Figma assets to help you design your app's UI. The Figma libraries include components, icons, and design tokens that match the BigDesign React components. You can use these assets to create mockups and prototypes that align with BigCommerce's design language.
Developer playground
The BigDesign Playground showcases the visual style and behavior of each component, along with complete API documentation. You can customize each component using configurable props.
Go to the BigDesign Developer Playground (opens in a new tab).
Patterns sandbox
The BigDesign Patterns Sandbox is a collection of common UI patterns that you can use in your app. It includes examples of how to use BigDesign components to create common layouts and interactions, such as forms, tables, and modals. You can use these patterns as a starting point for your app's UI design.
UX writing
BigDesign also provides a set of UX writing guidelines to help you create clear and consistent copy for your app's UI. These guidelines cover topics such as tone, voice, and terminology, and provide examples of how to write effective UI copy. You can use these guidelines to ensure that your app's UI copy aligns with BigCommerce's design language and provides a consistent user experience.
BigDesign UX writing guidelines (opens in a new tab).
In order to facilitate your app's UX writing, we have also developed a ChatGPT UX writing assistant that can help you generate copy that adheres to BigDesign's guidelines. You can use this tool to quickly create UI copy that is clear, concise, and consistent with BigCommerce's design language.
ChatGPT UX writing assistant (opens in a new tab)
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:
- 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.
- 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
- Node / React / Next.js (opens in a new tab)
- Python / Flask (opens in a new tab)
- PHP / Silex (opens in a new tab)
- Ruby / Sinatra (opens in a new tab)
- Laravel / React (opens in a new tab)
Tools
- Node API Client (opens in a new tab)
- Python API Client (opens in a new tab)
- PHP API Client (opens in a new tab)
- Ruby API Client (opens in a new tab)
- Ruby OmniAuth Gem (opens in a new tab)
- BigDesign Developer Playground (opens in a new tab)
- BigDesign patterns sandbox (opens in a new tab)
- Figma component library (opens in a new tab)
- Figma pattern library (opens in a new tab)
- ChatGPT UX writing assistant (opens in a new tab)
Blog posts
- How to Test App Authentication Locally with ngrok (opens in a new tab)
- Building a BigCommerce App Using Laravel and React (opens in a new tab)
- BigDesign Tutorial (opens in a new tab)