Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

Gatsby Theme for BrikL Storefronts

A Gatsby theme for building eCommerce storefronts powered by BrikL

A live demo can be found here

It includes:

  • the theme itself (located in theme/)
  • a demo site (located in demo/) that installs the theme
  • a Yarn workspaces configuration so the theme and demo can be worked on simultaneously
  • a bunch of generated eCommerce pages to get you started
  • multi language support

To use this theme in your Gatsby sites, follow these instructions:

  1. Install the theme

    yarn add @brikl/gatsby-theme-brikl-store
    npm install --save @brikl/gatsby-theme-brikl-store
  2. Add the theme to your gatsby-config.js:

    module.exports = {
      plugins: [
          resolve: `@brikl/gatsby-theme-brikl-store`,
          options: {
            clientId: process.env.GATSBY_BRIKL_CLIENT_ID,
            shopId: process.env.GATSBY_BRIKL_SHOP_ID,
            userId: process.env.GATSBY_BRIKL_USER_ID
  3. Create a .env file in the theme or demo folder or pass environment variables to the build like below:

  4. Start developing your site or editing the theme

    gatsby develop

    The demo will start at http://localhost:8000

Component Shadowing

You can use Gatsby component shadowing to change the behaviour/appearance of components.

If you wanted to change the look of the products in /products page, you could create the following file inside your Gatsby project.

// src/@brikl/gatsby-theme-brikl-store/components/Product.js

import React from "react";
import { getTextFromLanguage } from "@brikl/gatsby-theme-brikl-store/src/utils/utils";
import { Link } from "gatsby";
import { Grid } from "@material-ui/core";

const NewProduct = ({ product, langCode, urlPrefix }) => {
  return (
    <Grid item xs={12} sm={6} md={4} lg={3} xl={3} key={product.id}>
      <h1>{getTextFromLanguage(product.title.text, langCode)}</h1>
      <h5>{getTextFromLanguage(product.description.text, langCode)}</h5>
        price: ${product.price.value} {product.price.currency}
          `${urlPrefix}/products/` +
          getTextFromLanguage(product.slugs, langCode)

export default NewProduct;

For more examples, check out the /demo-shadowed folder. You can also see a demo website of the shadowed examples here


Next steps:

  • NPM & sem-ver workflow
  • Brikl design studio integration
  • Tests
  • Add to cart mutation
  • Checkout & payment
  • Provide sample userId and clientId for demo purposes
  • Contribution guidelines
© 2023 Gatsby, Inc.