Today we’re excited to announce two releases that make building a custom, headless e-commerce experience with Gatsby easier than ever:
- An upgraded Gatsby/Shopify integration
- The new Gatsby Shopify Starter
With the introduction of these features, businesses can give their development teams the control and speed they need to ship world-class retail experiences.
Headless e-commerce has taken the online retail space by storm, not only benefiting end users with improved speed, scalability and security, but also benefiting internal development and business teams, giving them access to the latest cutting-edge technologies that make development, operations, and collaboration simpler and more intuitive.
Headless solutions consist of decoupling the frontend of websites and applications from their backend services. By using Gatsby as the frontend of their website and Shopify as the backend e-commerce platform, users will get the best of both worlds – powerful tools to sell products online and a blazing fast, secure website.
The upgraded Gatsby + Shopify integration makes it incredibly simple to pull products from a Shopify catalog into your Gatsby website, alongside other content and services. This integration had previously been maintained by the community as the gatsby-source-shopify package; with v5 (beta) the Gatsby team took stewardship of the package and added several important updates, such as leveraging Shopify’s bulk API and upgrading reliability. As a result, v5 (beta) is scalable to tens of thousands of SKUs and variants.
This means, developers and product teams can spend less time building out custom data fetching logic and integrations with the Shopify API, and more time building creative, rich shopping experiences.
And that’s where the Gatsby Shopify Starter comes in. The Gatsby Shopify Starter is a proof-of-concept in a box, with 10k products and 30k variants to help you get to proof-of-concept in minutes, rather than days.
The clonable, tweakable, deployable demo site is intentionally designed to be fully-featured, but minimally opinionated so that you can customize to your heart’s content, make it yours, and deploy your e-commerce experience to Gatsby Cloud. It includes category pages, faceted search by category, price, and brand, a cart and checkout flow, all with a clean, simple UI. The code behind the Gatsby Shopify Starter is available as the gatsby-starter-shopify package.
Home page, Category page, faceted search page
Deploy the Gatsby Shopify Starter to Gatsby Cloud for free to put it to the test, start customizing, and hook up your own Shopify store data in minutes.
Teams who migrate from a monolithic Shopify setup to a Gatsby + Shopify setup have reported:
- Higher conversions from optimized shopping experiences that let them easily include review systems, location data platforms, and other third-party systems without a performance hit
- More revenue from increased search traffic as top-performing sites are now ranking more highly with search engines.
- Faster development cycles using Gatsby’s abstracted Shopify API as well as easily reusable design and layout elements.
- An extra layer of security for customer data, as their frontend is served as a static asset with no open connection to a database.
When Trevor Heath and Novvum migrated Jaxxon.com from a monolithic Shopify stack to Shopify + Gatsby, they doubled their conversion rate, while reducing bounce rate from 40% to 12%. And with the upgraded Gatsby/Shopify integration and new Gatsby Shopify Starter, that experience is easier than ever.
To get you quickly building your next e-commerce project using these new releases, we’ll be hosting a livestream today, at 10am PT, 1pm ET, 5pm UTC. Click here to join us live on Twitch, and we’ll walk you through getting started.
Then, on Thursday, May 20th, join our webinar “Driving More Revenue with Headless Shopify and Gatsby,” where our team will demonstrate how to make a significant impact on your business by adopting headless e-commerce.
Happy building, and happy selling!
UPDATE – June 29th, 2021: Checkout Gatsby Cloud on the Shopify App Store and get all the details here.