gatsbystorefront/gatsby-theme-storefront-shopify

Create a Shopify store with Gatsby JS 🛍️ 🛒

Create a Shopify store with Gatsby JS

Gatsby JS theme to create a Shopify headless eCommerce PWA store.

Please see our demo, speed test video and create a Gatsby JS based Shopify store with us.

If you like Gatsby Storefront please give us a star on GitHub ⭐ 👍 😀

• Demo
• How fast is Gatsby Storefront?
• Starter
• Setup guide
  • Install CLI
  • Create store site
  • Install Gatsby Storefront
  • Create .env file
  • Enable theme
  • Shopify content requirement
• Configuration
  • Configuration file
  • Theme shadowing
  • Development
  • Build
  • Serve
  • Publish
• Thank you!
• Contributors ✨

Demo

Exceptional Lighthouse audit results:

Please, see the demo here: https://demo.gatsbystorefront.com.

How fast is Gatsby Storefront?

Please, see our speed test video: https://youtu.be/B7CXzx9jQeM.

The tests are made with puppeteer based test script that emulates a customer journey and counts time necessary to load the pages: https://github.com/GatsbyStorefront/speedtests.

Starter

You can use the starter package for fatster setup process.

gatsby new store gatsbystorefront/gatsby-starter-storefront-shopify

This downloads the files and initializes the site by running npm install.

Setup guide

Install CLI

Install the Gatsby CLI:

npm install -g gatsby-cli

Create store site

Create new gatsby site for your web store:

gatsby new store

Install Gatsby Storefront

Install Gatsby Storefront NPM package:

npm install @gatsbystorefront/gatsby-theme-storefront-shopify

Create .env file

Create .env file in your store's root directory with your Shopify storename (storename.myshopify.com) and access token (your token must have full permissions on Storefront API).

GATSBY_SHOPIFY_SHOP_NAME=your_shopify_store_name
GATSBY_SHOPIFY_ACCESS_TOKEN=your_shopify_access_token

In case you are using Gatsby Storefront API to enable connections with external data sources (Contentful, Yotpo), please add additional configuration variables to your .env file:

GATSBYSTOREFRONT_API_URL=your_api_url.gatsbystorefront.com
GATSBYSTOREFRONT_ACCESS_TOKEN=your_gatsbystorefrontApi_access_token

Enable theme

Enable gatsbystorefront/gatsby-theme-storefront-shopify plugin in your gatsby-config.js:

require("dotenv").config({ path: `.env` })
const flattenMenu = require("@gatsbystorefront/gatsby-theme-storefront-shopify/src/utils/flattenMenu")

module.exports = {
  plugins: [
    {
      resolve: '@gatsbystorefront/gatsby-theme-storefront-shopify',
      options: {
        shopify: {
          shopName: process.env.GATSBY_SHOPIFY_SHOP_NAME,
          accessToken: process.env.GATSBY_SHOPIFY_ACCESS_TOKEN,
        },
        gatsbyStorefrontApi: {
          apiUrl: process.env.GATSBYSTOREFRONT_API_URL,
          accessToken: process.env.GATSBYSTOREFRONT_ACCESS_TOKEN,
        },
        useGatsbyStorefrontApi: false, // Set to 'true' in case you are using Gatsby Storefront API to enable connections with external data sources
        basePath: '/',
        productImagesCarouselProps: {
          // See: https://github.com/express-labs/pure-react-carousel#carouselprovider-
          naturalSlideWidth: 500,
          naturalSlideHeight: 500,
        },
        product: {
          maxDescriptionSectionsNumber: 10,
        },
        manifest: { // web app manifest options to be passed to 'gatsby-plugin-manifest' installed inside theme
          name: 'Gatsby Storefront Demo Store',
          short_name: 'Gatsby Storefront',
          start_url: '/',
          background_color: '#fff',
          theme_color: '#333',
          display: 'standalone',
          icon: 'src/images/shopping_bag.svg',
          icon_options: {
            purpose: 'any maskable',
          },
          cache_busting_mode: 'none',
        },
      },
    },
  ],
  siteMetadata: {
    siteUrl: 'https://demo.gatsbystorefront.com',
    gatsbyStorefrontConfig: {
      // Your Gatsby Storefront configuration
      // Copy exmaple from the starter:
      // https://github.com/GatsbyStorefront/gatsby-starter-storefront-shopify/blob/master/gatsby-config.js

    }
};

Shopify content requirement

Please make sure that your Shopify web store has at least one Collection, one Product (associated with Collection) and store Policies added before runing your Gatsby Storefront, as it is neccesary for correct API exposure.

Configuration

Configuration file

Main theme configuration options are located in gatsbyStorefrontConfig object in gatsby-config.js file. Use it to:

• Configure main store parameters.
• Set up main menu and footer links.

Theme shadowing

• Use shadowing for making necessary changes in @gatsbystorefront/gatsby-theme-storefront-shopify theme.
• Use shadowing of @gatsbystorefront/gatsby-theme-storefront-shopify/src/gatsby-plugin-theme-ui/index.js to change theme colors in accordance with theme-ui specification.

For code example please see our shadowing exmaple repo.

Note: In order to work in shadowed components GrapshQL queries have to be renamed.

Development

gatsby develop

Will start a hot-reloading development environment accessible by default at localhost:8000.

Build

gatsby build

Will perform an optimized production build for your site, generating static HTML and per-route JavaScript code bundles.

Serve

gatsby serve

Starts a local HTML server for testing your built site. Remember to build your site using gatsby build before using this command.

Publish

After making a build, upload public/ directory to your web host. See additional instructions here.

Thank you!

Thank you! And we would love to hear your feedback [😍😜😮😐😤].

Contributors

Thanks goes to these wonderful people (emoji key):

Pavel 💻 🎨 📖 💡 🤔 📆 👀

mimibar 🐛 💻

Adam Chilton 🐛

This project follows the all-contributors specification. Contributions of any kind welcome!

gatsby-theme-storefront-shopify's Issues

add breadcrumps

Describe the feature you'd like:

when i am in a deep subcategory i can go only back with the "hamburger menu" to the topmost category

Suggested implementation:

add a breadcrump element or a link to the next higher category, that the user can navigate better.

Describe alternatives you've considered:

Teachability, Documentation, Adoption, Migration Strategy:

Add to cart not working

Hi,

Just testing https://demo.gatsbystorefront.com/ and tried to add any product to the cart. It didn't seem to do anything. I clicked on shopping cart and it was empty as well.

Anyway if you can fix the demo?

Thanks.

Proper way to update gatsbystorefront-config.js ?

I'm new to gatsby. Seems awesome. Themes seem awesome. Shadowing seems awesome.

However, It seems like gatsbystorefront-config.js is a critical file to this application. As most of the configurations one would want to make are in this file. But, I'd have to edit this stuff inside my root directory/node_modules/@gatsbystorefront/gatsby-theme-storefront-shopify/gatsbystorefront-config.js ? Why would this be a desired method to update?

I can't shadow this file since it's not in the src folder. Any particular reason it was designed this way? Am I missing something? What if I wanted to update the theme if an update ever came about? Seems like I lose all my changes? Can/should I sync this with another directory or something?

Seems a bit crazy to a newcomer.

broken queries on initial build

I've followed the install and everything seems to go okay. I see the connection to Shopify worked and it imported products, etc... but at the last section, it throws errors:

Cannot query field "image" on type "ShopifyCollection".

Cannot query field "altText" on type "ShopifyProductImages".

Cannot query field "compareAtPrice" on type "ShopifyProductVariant".

Doesn't seem to be working with Gatsby 3.1.1

Any help would be great.
I also tried to install it with the --force flag but nothing compile

npm install @gatsbystorefront/gatsby-theme-storefront-shopify npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/gatsby npm ERR! gatsby@"^3.1.1" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer gatsby@"^2.13.38" from @gatsbystorefront/[email protected] npm ERR! node_modules/@gatsbystorefront/gatsby-theme-storefront-shopify npm ERR! @gatsbystorefront/gatsby-theme-storefront-shopify@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps

Shadowing templates folder.results in multiple query errors.

I am having difficulty shadowing the templates folder.
The error is related to duplication of queries. I have not the same problem with other themes.

To duplicate the error just shadow the template folder.

I think it's related to issue.

gatsbyjs/gatsby#17681
"the documents for createPage tells you to use an absolute path to the component. So, the theme author didn't do anything wrong. (per docs) The component will always have an extension, so the algorithm resolving the shadowed component will not allow extension overriding."

Add "Order Special Instructions" to Cart

It would be nice to add the theme customizer option of "Order Special Instructions" to the cart page

Trying to create a new custom page

What happened:

I am trying to create a custom page for my E-commerce. To do that, I created the/pages folder and inside that the Thanks.jsx file to define the page component (like making "shadowing" of the pages folder but I am not sure that this is "shadowing"). However, when I run the project, the page doesn't exist and it shows me this error in the console:

Reproduction:

You can check our code here:
https://github.com/davidpaley/gatsby-ecommerce/pull/4/files

This is the PR for the change in our public repo.

If there is any workaround, please let me know.

Can't build project properly

Hey guys,

When I follow the instructions to setup the project I keep running into this error:
Cannot query field "allShopifyShopPolicy" on type "Query"

I also don't see any layout or theme files, are the setup instructions outdated?

Here's the steps I took:
gatsby new store gatsbystorefront/gatsby-starter-storefront-shopify
cd store
npm install @gatsbystorefront/gatsby-theme-storefront-shopify
Setup the env config.
Made sure the theme was enabled in the plugins.

However when I run gatsby develop it fails with that error message, and also I don't see any theme files?

Make article/blog and pages optional

Describe the feature you'd like:
The gatsby-theme-storefront-shopify is not compatible with the Shopify Lite plan. The Shopify Lite plan does not provide an online store, therefore no blog posts or store policies can be created.

Suggested implementation:
Verify that allShopifyArticle and allShopifyBlog exist before querying it.

If there is any workaround, please let me know.