How to (easily!) build a BigCommerce Marketplace App using Gadget

Katie Hoesley

If you’ve built a BigCommerce app in the past, you may be familiar with the amount of time and effort that can go into ensuring everything is set up correctly. Managing the backend infrastructure and ensuring compliance with BigCommerce requirements is a core part of the process, but most of us would prefer to focus on building core features.

Earlier this year, we announced a partnership with Gadget, to help simplify the app development process for BigCommerce developers. Gadget is a full-stack development platform that minimizes the time developers spend setting up core infrastructure, so it’s easy to build robust, multi-tenant apps faster than ever.

All Gadget apps include a built-in connection to BigCommerce, so you can have your app installed and ready to start building in just a few minutes.

Today, we’ll build an app that automatically generates search keywords for products on a BigCommerce store. Whether you're a seasoned developer or new to app development, this process will help you learn the basics of Gadget and create a fully functional, scalable app.

If you’d prefer to follow along with a video, you can watch the webinar below for a step-by-step walkthrough of what is covered in this guide! 

Step 1: Setting Up Your Gadget App

  1. Create a New Gadget App

    • Visit Gadget and select the "BigCommerce app" template.

    • Provide a name for your app and click "Create."

    • Gadget automatically provisions a Postgres database, a serverless Node.js backend, and a React-based frontend.

  2. Connect to BigCommerce

    • Navigate to your BigCommerce Developer Portal and create an app.

    • Copy the callback URLs provided by Gadget into the app settings.

    • Configure the necessary scopes (e.g., products:read, products:modify).

    • Save the configuration and install the app on your BigCommerce sandbox store.

Step 2: Building the Backend

Gadget simplifies backend setup by managing Postgres migrations for your schema and autogenerating a CRUD API. Here's how to configure it for your app:

  1. Define Data Models

    • Product Model: Create fields for bigcommerce_id, name, description, price, and search_keywords. Add relationships to link products to stores.

    • Search Keywords Model: Add a value field to store keywords and set up a relationship to the product model.

  2. Create Webhook Actions

    • Gadget supports webhook subscriptions for BigCommerce events like products/create, products/update, and products/delete.

    • Set up global actions (e.g., handle_product_webhooks) to process incoming events.

    • Use Gadget's connections.bigcommerce.current client to fetch or update product data from the BigCommerce API seamlessly.

  3. Add Business Logic

    • Write custom utility functions, such as get_keywords, to extract keywords from product descriptions.

    • Integrate this logic into create and update actions for the product model, ensuring keywords are dynamically generated and saved.

Step 3: Building the Frontend

Gadget's frontend setup comes pre-configured with React and BigCommerce's BigDesign components, providing a clean UI toolkit.

  1. Configure the Frontend

    • Access the web/routes/index.jsx file in the web editor or a local development environment.

    • Use Gadget's autogenerated API client to interact with the backend seamlessly.

  2. Build User Interfaces

    • Add a form for managing search keywords, leveraging Gadget's useActionForm hook for state management and validation.

    • Display existing keywords using BigDesign's table components.

    • Implement CRUD functionality (Create, Read, Update, Delete) for keywords directly from the UI.

  3. Secure Access Control

    • Grant appropriate permissions for merchants to interact with keywords and products securely.

    • Use Gadget's built-in access control tools to manage roles and permissions.

Step 4: Testing and Debugging

  1. Test Webhooks

    • Ensure product creation and update events trigger the webhook actions correctly.

    • Validate that keywords are extracted and saved in the database.

  2. Test Frontend Integration

    • Verify that keywords entered through the app’s UI are stored in the backend and synced with BigCommerce.

    • Check for real-time updates and error handling to ensure a smooth user experience.

Step 5: Preparing for Marketplace Publication

  1. Enable Multi-Tenancy

    • Gadget apps support multi-tenancy by default, allowing you to support multiple stores with a single app instance.

  2. Set Up App Extensions

    • Use Gadget's tools to create app extensions that embed your app within the BigCommerce admin panel.

    • Store extension IDs in the database for easy reference.

  3. Implement Unified Billing

    • Integrate billing functionality using Gadget’s APIs to handle subscriptions and payments, aligning with BigCommerce's marketplace requirements.

Advanced Use Case: Catalyst Storefront Integration

For developers using BigCommerce's Catalyst storefront architecture, Gadget makes it easy to extend functionality:

  • Integrate Gadget's API client into Catalyst to fetch and display data.

  • For example, Riley demonstrated embedding a size chart app within a storefront, managed entirely through Gadget.

I’m interested! What’s next?

With Gadget, you can focus on what matters most—building exceptional experiences for BigCommerce merchants.

Gadget eliminates the complexity of building BigCommerce apps by handling the heavy lifting of infrastructure, API integrations, and scalability. Its intuitive interface, developer-friendly tooling, and comprehensive support make it a top choice for modern app development.

Get started today at Gadget. 🚀

Additional Resources