App Extensions are Now Available for All BigCommerce App Developers!

We’re thrilled to announce to our developer community — app developers in particular — that App Extensions are now available wherever apps are installed on the BigCommerce platform! Let’s talk about what App Extensions are, why you should be excited, and walk through how to get started!

What are App Extensions?

An App Extension is a progressive enhancement to an app that is visible and useful to merchants, custom-built by developers. At their core, App Extensions are deep links to particular pages — Products, Customers, and Orders — within your app that can add new features, modify existing ones, and integrate with other systems to enhance the functionality of a BigCommerce store.

App Extensions allow developers to register custom menu items that appear on standard Control Panel pages allowing merchants to navigate directly to related parts of the app with ease.

In the image below, you can see my sample app, App Name, appearing as an App Extension, with the option now to “View Inside Sample App”. This App Extension has been installed on my store and now appears in the menu for each product on my Products page.

App developers are no longer limited to rendering apps solely in the Apps sub-menu because App Extensions allow you to render an app’s content in a Panel in context, directly on the standard control panel page, or as a Link, linking a user directly to the app’s context that you would otherwise navigate from the Control Panel > Apps.

Merchants reported the user experience of installed apps as not feeling “native” enough. Using App Extensions, app developers now have the ability to integrate their app’s functionality within the BigCommerce control panel, extending the native control panel features.

Why use App Extensions on BigCommerce?

• Enhance the functionality of BigCommerce stores: App Extensions can extend or add new features and functionality to BigCommerce stores available in the merchant’s control panel, making an app more powerful and useful.
• Streamline operations: App Extensions can automate tasks, simplify workflows, and improve the overall efficiency of your business operations.
• Better merchant experience: App Extensions can help developers create a more personalized control panel for merchants.
• Increased customization: App Extensions can be customized to suit your specific needs and requirements. You can create custom workflows, integrate with third-party systems, and tailor your store’s functionality to your unique business needs.
• Deeper integrations: App Extensions can integrate with other systems, such as CRMs, ERP systems, and marketing automation tools, making it easier to manage your entire e-commerce operation in one place.

How do they work?

There are two ways to implement App Extensions on a store at this time: Panel and Link.

Panel

In this case, your iFrame’s target is a side panel that overlays the Control Panel on the right side of a user’s current view.

As you can see above, this app renders in a Panel when clicked on for my “face wash” product, directly on the same view!

Link

In this case, your iFrame’s target is the app’s usual location, in the store Control Panel’s Apps sub-menu. When a user clicks the App Extension menu item, instead of the current page being overlaid, like with Panels, they navigate directly to the app’s URL.

As you can see above, an App Extension was added to this store’s Orders page. When a user clicks the App Extension for an order, its context remains tied to that specific order. Cool, right?

How do I get started?

If you’re starting from scratch without an existing app, create a draft app using our NextJS Sample App. Just fork and clone this repository, and check out the `app-extensions` branch. To register this app, follow the steps outlined in our documentation found here!

Login to your BigCommerce Developer Portal and in your app’s settings, on the “Technical” page, add App Extensions to your OAuth scope! Scroll to the bottom of OAuth scopes and you will find App Extensions, like below:

From this point, if you’re using the sample repository provided, follow the steps in the ReadME. By the end of those instructions, you should see an App Extension on each product on your Products page. Voila!

If you have an existing app to which you would like to add App Extension functionality, check out the following resources in our Developer Documentation, specifically this Guide to App Extensions, to get up n’ running!

I’m interested! What’s next?

For more information about implementation and to see code samples, please check out our App Extensions documentation to guide you!

If you still have questions, feedback, or anything in between, tweet at us or send our DevRel team an email!