Gatsby-theme-shopifystore NPM

gatsby-theme-shopifystore

Gatsby Theme Shopify Store add a simple Shopify Store to any existing Gatsby website. Uses gatsby-source-shopify plugin for pulling data into Gatsby from Shopify stores via the Shopify Storefront API.

Features

Simple to use
Several customization options
Uses gatsby-source-shopify plugin for pulling data into Gatsby from Shopify stores via the Shopify Storefront API
Supports gatsby-transformer-sharp and gatsby-image for product and article images

Install

yarn add gatsby-theme-shopifystore

npm install --save gatsby-theme-shopifystore

How to use

Add your Shopify Storefront API shop name and token as a enviroment variables

SHOP_NAME=YOUR-STORENAME

SHOPIFY_ACCESS_TOKEN=YOUR-STOREFRONT-TOKEN

// In your gatsby-config.js
plugins: [
            {
                resolve: "gatsby-theme-shopifystore",
                options: {
                    basePath: "/products",
                    productPath: "/product",
                    shopTagline: "My Shopify Store",
                    shopBtnlabel: "Learn more",
                    shopCurrency: "USD",
                    productOptions: options,
                    verbose: true,
                    }
            },
        ]

Overriding options

When adding this plugin to your gatsby-config.js, you can pass in options (via the productOptions key) to override the default config.

The default config is as follows.

const options = {
  product: {
      text     : { button: 'Add to Cart' },
      iframe   : false,
      contents : {
          img   : false,
          title : false,
          price : false,
          options: false
      },
      templates : {
          button : '<button class="button primary icon solid fa-cart-plus {{data.classes.product.button}}">{{data.buttonText}}</button>'
      },
      buttonDestination: 'cart',
      quantiyLabel: 'Quantity'
  },
  toggle: {
      contents: {
          count: true,
          icon: true,
          title: false,
      },
      styles: {
          button: {
              'background-color': '#78b657',
          }
      }
  },
  cart: {
      startOpen: false,
      contents: {
          title: true,
          lineItems: true,
          footer: true,
          note: true,
      },
      text: {
          title: 'Cart',
          empty: 'Your cart is empty.',
          button: 'Checkout',
          total: 'Total',
          currency: 'USD',
          notice: 'Shipping and discount codes are added at checkout.',
          noteDescription: 'Special instructions for seller',
      },
      styles: {
          button: {
              'background-color': '#78b657',
          }
      }
  }
}

If you like, consider a donation!

Every single donation is important. Your donation is gonna make a clear statement: My work is Valued.

Your donation is going to help me devote more time to open source. I'd love to be able to devote several hours per week to maintaining existing projects as well as creating new ones.