gatsby-theme-shopifystore
v1.1.14
Published
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`.
Downloads
112
Maintainers
Readme
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 intoGatsby
fromShopify
stores via theShopify Storefront API
- Supports
gatsby-transformer-sharp
andgatsby-image
for product and article images
Install
yarn add gatsby-theme-shopifystore
OR
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.