As I continue working on a Drupal Commerce demo with GatsbyJS, I have moved on towards using GatsbyJS themes. GatsbyJS themes are composable, meaning you can use more than one within a single GatsbyJS application. However, it seems like you really piece together different themes to build out sections of your site.

But! You can allow themes to extend other themes. In my use case, I would like to have a Gatsby theme which sources product data from a Drupal Commerce API server and generates product pages. There is then another Gatsby theme which provides layouts and styling. Finally, the Gatsby site uses the layout theme.

Luckily, we have a test case for this already. Two years ago Centarro developed a demonstration theme for Drupal Commerce called Belgrade. You can see it in action on our demo site: http://demo.commercekickstart.com/. I also implemented it in Gatsby for a demo at Decoupled Days 2018: https://gatsbyjs.demo.centarro.io/. 

That demo using Gatsby was created before themes existed. The Gatsby build contains the logic to source products, template them, and styling them all in one big project. Which is fine. But that doesn't scale and it is hard to share. Thank you Gatsby team for making themes, and solving this problem 🥳.

Yesterday I got the initial theme working and generating product pages. Using shadowing, React components can be overridden from themes. I remember there were discussions about this problem and how to solve it in the Admin UI initiative. Which is pretty cool. Like really cool. I recommend you read Gatsby's What is Component Shadowing? blog post

Here is an example of the default product template. It just adds some fields, and the proper add to cart form for single or multiple variations.

The add to cart button is also its own component. This is important, as we can shadow it. Here is the product page with the product template and add to cart button shadowed to meet the Belgrade theme design.

The best part? my storefront-us Gatsby app only contains the following in its gatsby-config.js

module.exports = {
    siteMetadata: {
        title: `Storefront (US)`,
        description: `United States storefront.`,
    },
    plugins: [
        {
            resolve: 'gatsby-theme-belgrade',
            options: {
              baseUrl: 'http://127.0.0.1:8080',
              basicAuth: {
                username: 'admin',
                password: 'admin',
              }
            }
          }
    ]
};

🎉that is pretty rad.