![\"Logo\"](\"https://gatsbystorefront-static.now.sh/gatsbystorefront_readme_logo.png\"/){kind=logo}
\r \r \r
\r \r
\r \r
\r \r
\r \r
\r\n\r\n
\r\n ![](\"https://gatsbystorefront-static.now.sh/gatsbystorefront-demogif-low.webp\")
\r\n
\r\n Exceptional Lighthouse audit results:\r\n
\r\n\r\n ![](\"https://gatsbystorefront-static.now.sh/gatsbystorefront-lighthouse-test-low.gif\")
\r\n
![](\"https://img.youtube.com/vi/B7CXzx9jQeM/maxresdefault.jpg\")
](https://youtu.be/B7CXzx9jQeM)\r\n\r\nThe tests are made with [puppeteer](https://github.com/puppeteer/puppeteer) based test script that emulates a customer journey and counts time necessary to load the pages: [https://github.com/GatsbyStorefront/speedtests](https://github.com/GatsbyStorefront/speedtests).\r\n\r\n## Setup guide\r\n\r\n### Install CLI\r\n\r\nInstall the Gatsby CLI:\r\n\r\n```\r\nnpm install -g gatsby-cli\r\n```\r\n\r\n### Create store site\r\n\r\nCreate new gatsby site for your web store:\r\n\r\n```sh\r\ngatsby new store\r\n```\r\n\r\n### Install Gatsby Storefront\r\n\r\nInstall Gatsby Storefront NPM package:\r\n\r\n```sh\r\nnpm install @gatsbystorefront/gatsby-theme-storefront-shopify\r\n```\r\n\r\n### Create `.env` file\r\n\r\nCreate `.env` file in your store's root directory with your Shopify storename (**storename**.myshopify.com) and [access token](https://help.shopify.com/en/api/getting-started/authentication/private-authentication#generate-credentials-from-the-shopify-admin) (your token must have full permissions on Storefront API).\r\n\r\n```\r\nGATSBY_SHOP_NAME=your_shopify_store_name\r\nGATSBY_SHOPIFY_ACCESS_TOKEN=your_shopify_access_token\r\n```\r\n\r\n### Enable theme\r\n\r\nEnable `gatsbystorefront/gatsby-theme-storefront-shopify` plugin in your `gatsby-config.js`:\r\n\r\n```js\r\nrequire(\"dotenv\").config({ path: `.env` })\r\nconst flattenMenu = require(\"@gatsbystorefront/gatsby-theme-storefront-shopify/src/utils/flattenMenu\")\r\n\r\nmodule.exports = {\r\n plugins: [\r\n {\r\n resolve: '@gatsbystorefront/gatsby-theme-storefront-shopify',\r\n options: {\r\n shopName: process.env.GATSBY_SHOP_NAME,\r\n accessToken: process.env.GATSBY_SHOPIFY_ACCESS_TOKEN,\r\n basePath: '/',\r\n shopifyLite: false, // default 'false'\r\n enableWebp: true, // default 'true'\r\n imageQuality: '95', // default '95', better to decrease but always check your result images quality\r\n gatsbyImageProps: { // See: https://www.gatsbyjs.com/plugins/gatsby-image/#gatsby-image-props\r\n loading: 'eager', // Using 'eager' currently improves Lighthouse 6 metrics. See: https://github.com/gatsbyjs/gatsby/issues/24332#issuecomment-650760081\r\n fadeIn: false,\r\n durationFadeIn: 500,\r\n }\r\n manifest: { // web app manifest options to be passed to 'gatsby-plugin-manifest' installed inside theme\r\n name: 'Gatsby Storefront Demo Store',\r\n short_name: 'Gatsby Storefront',\r\n start_url: '/',\r\n background_color: '#fff',\r\n theme_color: '#333',\r\n display: 'standalone',\r\n icon: 'src/images/shopping_bag.svg',\r\n icon_options: {\r\n purpose: 'any maskable',\r\n },\r\n cache_busting_mode: 'none',\r\n },\r\n },\r\n },\r\n ],\r\n siteMetadata: {\r\n siteUrl: 'https://demo.gatsbystorefront.com',\r\n gatsbyStorefrontConfig: {\r\n // Your Gatsby Storefront configuration\r\n // Copy exmaple from the starter:\r\n // https://github.com/GatsbyStorefront/gatsby-starter-storefront-shopify/blob/master/gatsby-config.js\r\n\r\n }\r\n};\r\n```\r\n\r\n### Shopify content requirement\r\n\r\nPlease make sure that your Shopify web store has at least one [Collection](https://help.shopify.com/en/manual/products/collections), one [Product](https://help.shopify.com/en/manual/products/add-update-products) (associated with Collection), [Blog post](https://help.shopify.com/en/manual/sell-online/online-store/blogs/writing-blogs), [Page](https://help.shopify.com/en/manual/sell-online/online-store/pages) and [store Policies](https://help.shopify.com/en/manual/checkout-settings/refund-privacy-tos) added before runing your Gatsby Storefront, as it is neccesary for correct API exposure.\r\n\r\n### A setup for Shopify Lite plan\r\n\r\nIf you are using Shopify Lite plan. Please set `shopifyLite` property to `true` in `@gatsbystorefront/gatsby-theme-storefront-shopify` plugin `options` in `gatsby-config.js`. This will disable generation of pages for Blog and Pages as they are not avalible in \"Lite\" plan.\r\n\r\n### Starter\r\n\r\nYou can also use the starter package for fatster setup process.\r\n\r\n```sh\r\ngatsby new store gatsbystorefront/gatsby-starter-storefront-shopify\r\n```\r\n\r\nThis downloads the files and initializes the site by running npm install.\r\n\r\n## Configuration\r\n\r\n### Configuration file\r\n\r\nMain theme configuration options are located in `gatsbyStorefrontConfig` object in `gatsby-config.js` file. Use it to:\r\n\r\n- Configure main store parameters.\r\n- Set up main menu and footer links.\r\n\r\n### Theme shadowing\r\n\r\n- Use [shadowing](https://www.gatsbyjs.org/docs/themes/shadowing/) for making necessary changes in `@gatsbystorefront/gatsby-theme-storefront-shopify` theme.\r\n- 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](https://theme-ui.com/theme-spec).\r\n\r\nFor code example please see our [shadowing exmaple repo](https://github.com/GatsbyStorefront/theme-shadowing-example).\r\n\r\nNote: In order to work in shadowed components GrapshQL queries have to be renamed.\r\n\r\n### Development\r\n\r\n```sh\r\ngatsby develop\r\n```\r\n\r\nWill start a hot-reloading development environment accessible by default at localhost:8000.\r\n\r\n### Build\r\n\r\n```sh\r\ngatsby build\r\n```\r\n\r\nWill perform an optimized production build for your site, generating static HTML and per-route JavaScript code bundles.\r\n\r\n### Serve\r\n\r\n```sh\r\ngatsby serve\r\n```\r\n\r\nStarts a local HTML server for testing your built site. Remember to build your site using `gatsby build` before using this command.\r\n\r\n### Publish\r\n\r\nAfter making a build, upload `public/` directory to your web host. See additional instructions [here](https://www.gatsbyjs.org/docs/deploying-and-hosting/).\r\n\r\n## Thank you!\r\n\r\nThank you! And we would love to hear your [feedback [😍😜😮😐😤]](https://pavel905961.typeform.com/to/Iv44IK).\r\n\r\n\r\n\r\n## Contributors\r\n\r\n\r\n\r\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\r\n\r\n\r\n\r\n\r\n![\"\"/](\"https://avatars3.githubusercontent.com/u/202422?v=4\") Pavel 💻 🎨 📖 💡 🤔 📆 👀 | \r\n ![\"\"/](\"https://avatars2.githubusercontent.com/u/2718783?v=4\") mimibar 🐛 💻 | \r\n ![\"\"/](\"https://avatars3.githubusercontent.com/u/22243890?v=4\") Adam Chilton 🐛 | \r\n