All Projects โ†’ GatsbyStorefront โ†’ Gatsby Theme Storefront Shopify

GatsbyStorefront / Gatsby Theme Storefront Shopify

Licence: mpl-2.0
Create a Shopify store with Gatsby JS ๐Ÿ›๏ธ ๐Ÿ›’

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Gatsby Theme Storefront Shopify

Vue Storefront
The open-source frontend for any eCommerce. Built with a PWA and headless approach, using a modern JS stack. We have custom integrations with Magento, commercetools, Shopware and Shopify and total coverage is just a matter of time. The API approach also allows you to merge VSF with any third-party tool like CMS, payment gateways or analytics. Neโ€ฆ
Stars: โœญ 9,111 (+5106.29%)
Mutual labels:  storefront, shopify, pwa
Saleor
A modular, high performance, headless e-commerce platform built with Python, GraphQL, Django, and React.
Stars: โœญ 14,720 (+8311.43%)
Mutual labels:  commerce, storefront, pwa
Gatsby Advanced Starter
A high performance skeleton starter for GatsbyJS that focuses on SEO/Social features/development environment.
Stars: โœญ 1,224 (+599.43%)
Mutual labels:  gatsbyjs, pwa
Builder
Drag and drop page building using your code components
Stars: โœญ 1,281 (+632%)
Mutual labels:  shopify, pwa
Gatsby Shopify Theme
๐Ÿ›’ Simple theme to build a blazing simple and fast store with Gatsby and Shopify.
Stars: โœญ 95 (-45.71%)
Mutual labels:  shopify, gatsbyjs
Gatsby Starter Storefront Shopify
Starter package for faster setup process of Gatsby Storefront.
Stars: โœญ 41 (-76.57%)
Mutual labels:  shopify, pwa
Next Storefront
๐Ÿ›๏ธ A dazzlingly fast E-Commerce solution built with Typescript and NextJS.
Stars: โœญ 72 (-58.86%)
Mutual labels:  storefront, shopify
Gatsby Demo Store
Elastic Path + Gatsby powered online store
Stars: โœญ 91 (-48%)
Mutual labels:  storefront, gatsbyjs
Example Storefront
Example Storefront is Reaction Commerceโ€™s headless ecommerce storefront - Next.js, GraphQL, React. Built using Apollo Client and the commerce-focused React UI components provided in the Storefront Component Library (reactioncommerce/reaction-component-library). It connects with Reaction backend with the GraphQL API.
Stars: โœญ 471 (+169.14%)
Mutual labels:  commerce, storefront
Vc Storefront
VirtoCommerce Storefront for ASP.NET Core 3.1 repository
Stars: โœญ 122 (-30.29%)
Mutual labels:  commerce, storefront
Commerce.js
Open source, JS eCommerce SDK for building headless, Jamstack applications. Build custom storefronts, carts, and checkouts in any frontend framework, platform, or device. Integrates with Stripe, Square, PayPal, Paymill and Razorpay with support for 135+ currencies.
Stars: โœญ 112 (-36%)
Mutual labels:  commerce, storefront
Storefront Ui
Customization-first, performance-oriented and elegant UI framework for eCommerce (and not only) based on Vue.js and Google Retail UX Playbook. Made with ๐Ÿ’š by Vue Storefront team and contributors.
Stars: โœญ 1,827 (+944%)
Mutual labels:  storefront, pwa
Ever
Everยฎ - Open-Source Commerce Platform for On-Demand Economy and Digital Marketplaces
Stars: โœญ 980 (+460%)
Mutual labels:  commerce, storefront
Jet
Jet is an e-commerce framework for Amber / Crystal
Stars: โœญ 18 (-89.71%)
Mutual labels:  commerce, storefront
Gatsby Starter Hero Blog
A ready to use, easy to customize, fully equipped GatsbyJS starter with a 'Hero' section on the home page.
Stars: โœญ 500 (+185.71%)
Mutual labels:  gatsbyjs, css-in-js
Ryosuke Gatsby Blog
Static PWA React-powered portfolio and blog built with GatsbyJS
Stars: โœญ 90 (-48.57%)
Mutual labels:  gatsbyjs, pwa
Next Shopify Storefront
๐Ÿ› A real-world Shopping Cart built with TypeScript, NextJS, React, Redux, Apollo Client, Shopify Storefront GraphQL API, ... and Material UI.
Stars: โœญ 317 (+81.14%)
Mutual labels:  shopify, css-in-js
Gatsby Shopify Starter
๐Ÿ› Simple starter to build a blazing fast Shopify store with Gatsby.
Stars: โœญ 356 (+103.43%)
Mutual labels:  shopify, gatsbyjs
Aaronvandenberg.nl
โš›๏ธ Web Developers portfolio build with Gatsby.js & React.js
Stars: โœญ 98 (-44%)
Mutual labels:  gatsbyjs, pwa
Grandnode
Open source, headless, multi-tenant eCommerce platform built with .NET Core, MongoDB, AWS DocumentDB, Azure CosmosDB, Vue.js.
Stars: โœญ 1,768 (+910.29%)
Mutual labels:  commerce, storefront

Logo

Create a Shopify store with Gatsby JS

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

GitHub package.json version GitHub

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

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 [๐Ÿ˜๐Ÿ˜œ๐Ÿ˜ฎ๐Ÿ˜๐Ÿ˜ค].

Expolore Gatsby Storefront

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!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].