Building Ecommerce Storefronts on the JAMstack
•
1 like•1,194 views
Presented by BigCommerce Product Manager Ashley McKemie at the 2019 JAMstack Conference, this presentation describes building headless storefronts using Gatsby, Netlify and BigCommerce. Learn more about headless commerce: https://www.bigcommerce.com/solutions/headless-commerce/
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Building Ecommerce Storefronts on the JAMstack
Similar to Building Ecommerce Storefronts on the JAMstack (20)
Recently uploaded
Recently uploaded (20)
Building Ecommerce Storefronts on the JAMstack
- 1. Building Ecommerce Storefronts on the JAMstack BigCommerce + JAMstack Presenter Date Ashley McKemie BigCommerce Oct. 2019 Company
- 2. Intros.
- 4. Product Manager ⥋ 3rd Party Storefronts, Channels & Webhooks Who Am I? Intros Ashley McKemie
- 5. Building a Headless Storefront with Gatsby, Netlify, and BigCommerce
- 6. Getting Started. Spinning up the Netlify, Gatsby, BigCommerce starter app ◿ Github Repo: http://bit.ly/gatsby-netlify-bc ◿ Out of the box functionality: ● Core site pages: Home, About, Products, Product Detail Pages (PDP), Blog, Contact Form, Cart ● Data syncing between headless site and BigCommerce store ○ Catalog with products, images, and variants ○ Categories ● Netlify CMS ● Cart & Checkout ○ Redirected checkout Building a Headless Storefront
- 7. Extending the Storefront. With an extensive set of APIs, you can quickly and easily start adding more robust e-commerce functionality to the Gatsby + Netlify + BigCommerce starter. ◿ Customers ● Customer account and login management ● Wish lists ◿ Embedded Checkout ◿ Marketing ● Coupons ● Gift certificates ◿ Orders & Payments Management ◿ And more! Building a Headless Storefront
- 8. Use Cases What can you do with BC’s headless options?
- 9. The BigCommerce Platform BigCommerce Storefront Third Party Analytics Built-in Product Management Built-in Order Management Built-in Customer Management Native Mobile App Third Party Analytics Built-in Product Management Built-in Order Management SaaS CRM Headless CMS or DXP Personalization Framework Built-in Product Management Open Source OMS Open Source CRM Custom PWA Storefront Headless CMS SaaS PIM SaaS OMS SaaS CRM Build differentiated shopper experiences BigCommerce APIs offer power, flexibility and choice Storefront API powered by GraphQL Use Cases
- 10. Unlocking Value ◿ Multi-site: B2C & B2B, multi-brand ◿ Multi-region & international ◿ Differentiated shopper experiences, driven by content and data ◿ Optimized conversion through PWAs, personalization, micro-sites, and more Use Cases
- 11. Enabling the JAMstack Ecosystem Beyond the Gatsby starter
- 13. PWA Storefronts Enabling the JAMstack Ecosystem: Partners & Connectors ◿ Deity recently launched DEITY Falcon, which enables merchants to easily create PWA frontends on mobile and desktop with the BigCommerce backend ◿ As Vue Storefront is platform agnostic, you can easily create an ecommerce site using both BC + Vue. ◿ A BC + Vue starter POC is available for quick start development ◿ BC + Vue are co-presenting a webinar on 11/13. Register here: http://bit.ly/vue-bc-webinar ◿ With the help of BC partner, Third and Grove, there are a number of resources to help developers quickly build a Gatsby site: ◿ Source plugin ◿ Gatsby + Netlify starter app ◿ Modular themes for cart, checkout, and other functionality are coming soon We’ve started the process of partnering with leading PWA storefronts, with the goal of making BigCommerce the preferred way to develop and manage a scalable site using each solution.
- 14. CMS Connectors Enabling the JAMstack Ecosystem: Partners & Connectors The BC for Wordpress plugin offers a robust set of out-of-the-box commerce functionality for merchants, such as order and catalog management, secure cart & checkout, and shipping, with easy extensibility for developers. With the BigCommerce for Wordpress plugin as our inaugural CMS connector and reference implementation, we’ve since launched 6 CMS integrations with the help of partners in the ecosystem. Built by top Drupal agency, Acro Media, BigCommerce for Drupal syncs the Drupal presentation layer with sophisticated ecommerce features, from multi-currency to fulfillment to abandoned cart recovery and more. Spin up a headless storefront with Bloomreach and BigCommerce in as little as 6 weeks that includes customer data management, orders management, secure checkout, and Bloomreach’s AI powered search capabilities (in addition to more!) Easily merge your content and shopping experience with the open source Acquia Commerce Framework. It combines Drupal, Acquia, and BigCommerce to provide an easy-to-use content-driven commerce experience. The Sitecore Extend app on BigCommerce enables merchants to create rich content-driven shopping experiences by syncing product and customer data between BigCommerce and Sitecore. With Adobe Experience Manager and BigCommerce, you get native cart management, users syncing, embedded checkout with 40+ payment gateways, and more, enabling powerful, differentiated shopping ecommerce experiences.
- 16. Building Custom Storefronts Developers aren’t limited to existing connectors. By building platform and API first, we’ve also enabled developers to create a custom headless storefront using the tools and frameworks of their choice with BigCommerce APIs and SDKs. Enabling the JAMstack Ecosystem: Custom Storefronts Channels & Listings Some of the foundational APIs / SDKs you’ll likely need Sites & Routes Storefront GraphQL Cart & Checkout BigCommerce API Docs: https://developer.bigcommerce.com/api-docs
- 17. Channels & Listings API Enabling the JAMstack Ecosystem: Custom Storefronts At BC, a channel is anywhere a merchant sells their products. This encompasses storefronts, including headless, marketplaces, POS, and marketing platforms. Channel listings allow you to manage catalog differences among different storefronts or marketplaces. • Pricing • Title/description Note: You will need to get catalog data via the Catalog API
- 18. Sites & Routes API Enabling the JAMstack Ecosystem: Custom Storefronts ◿ Sites and routes control the paths that make up a headless storefront ◿ Site refers to the domain associated with a channel ◿ Routes point to the URLs for key pages on the headless storefront. They define where your homepage is, where your cart page is, etc. Sites and routes are important for making sure that links point where they’re supposed to and sales are attributed correctly. For example, a shopper’s order confirmation email should link back to Storefront A, where they placed their order, not Storefront B, which they’ve never visited.
- 19. CONFIDENTIALINFORMATION Storefront GraphQL API ◿ BC’s newest API elevates all the data needed to power an ecommerce storefront, including customer attributes, product images at any resolution, and all custom fields ◿ Built using GraphQL to increase site performance and, as a result, shopper conversion ◿ Powers our own native Stencil storefront Enabling the JAMstack Ecosystem: Custom Storefronts In Open Beta
- 20. ◿ When it comes to ecommerce, providing shoppers with a fast, secure, branded checkout experience is paramount. ◿ With our various checkout options, BigCommerce makes it easy to create the checkout experience that meets everyone’s needs, from the merchant and developer to the shopper ◿ Choose which option works for you, depending on your need for customization and the security and development lift you’re able to take on. 01 02 03 Redirected Checkout Create a cart redirect URL that takes the shopper to the BigCommerce domain to check out. Allows you to use the built-in security of the native checkout page, or customize using the Checkout SDK Self-hosted Checkout Use the BigCommerce server-to-server APIs to build an in-context checkout experience that’s pixel-for-pixel what you need Embedded Checkout Keep the shopper on the remote storefront with this quick and secure option 02 03 Enabling the JAMstack Ecosystem: Custom Storefronts Checkout Options
- 22. Developer Resources Developer Enablement ◿ Headless Implementation Guide ◿ Embedded Checkout Tutorial ◿ Building Multi-Region Site on Wordpress ◿ Complete Guide to Checkout Customization ◿ Find more on our dev blog! API Client LibrariesGuides & Tutorials OSS, SDKs & Starter Apps ◿ Python ◿ PHP ◿ Ruby ◿ Node ◿ Go (coming soon!) ◿ BigCommerce for Wordpress ◿ Storefront API examples ◿ Checkout SDK ◿ Gatsby source plugin ◿ Vue PWA POC ◿ Next.js + GraphQL sample ◿ Gatsby + Netlify template ◿ Channels SDK (coming soon!) Ecommerce can be complex. Building a headless storefront shouldn’t be. While we’ve got room to grow, BigCommerce is focused on making sure developers have the tools, resources, and information they need to spin up quickly, and we’ll be investing in it even more heavily in 2020.
- 23. Thank You Find our Gatsby ecommerce starter template on Netlify: http://bit.ly/gatsby-netlify-bc Learn more about our headless integrations at BigCommerce: https://developer.bigcommerce.com/tools-resources Follow us on Twitter: @BigCommerceDevs Follow up questions or thoughts? ashley.mckemie@bigcommerce.com