Gatsby Shopify starter

<p>
  Kick off your next eCommerce experience with this Gatsby starter. It is based on the default Gatsby starter to be easily modifiable. <a rel="nofollow noopener" target="_blank" href="https://gatsby-shopify-starter.alexanderhoerl.de">Demo</a><br /> Unfortunately Shopify prohibits to share access tokens in public repositories, therefore you have to to create your own Shopify Shop and put those credentials in the <code>template.env</code> file and rename it to <code>.env.development</code> as well as <code>.env.production</code>. There are two files if you want to use a different store for you development.<br /> To obtain your own credentials you need the create a custom app in the Shopify frontend and enable the Storefront as well as the Admin API.<br /> If you have questions feel free to message me on <a rel="nofollow noopener" target="_blank" href="https://twitter.com/alexanderhorl">Twitter</a> 🤙🏻<br /> Checkout <a rel="nofollow noopener" target="_blank" href="https://nureineburg.alexanderhoerl.de">nureineburg.alexanderhoerl.de</a> for a real public shop built with this starter, the code is also public.
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content--features" class="anchor" aria-hidden="true" href="#-features"></a>💎 Features
</h2>

<ul dir="auto">
  <li>
    Cart
  </li>
  <li>
    Product grid
  </li>
  <li>
    Product page
  </li>
  <li>
    Dynamic Inventory Checking
  </li>
  <li>
    Image optimization with Gatsby Image
  </li>
  <li>
    Styled Components with Emotion
  </li>
  <li>
    Google Analytics
  </li>
  <li>
    SEO
  </li>
</ul>

<h3 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content--dynamic-inventory-checking" class="anchor" aria-hidden="true" href="#-dynamic-inventory-checking"></a>📦 Dynamic Inventory Checking
</h3>

<p>
  The Shopify product inventory is being checked in realtime, therefore no rebuilding and redeploy is needed when a product goes out of stock. This avoids problems where products could still be available even though they&#8217;re out of stock due to redeploy delay.
</p>

<h3 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content--styling" class="anchor" aria-hidden="true" href="#-styling"></a>🖌 Styling
</h3>

<p>
  I&#8217;m using <a rel="nofollow noopener" target="_blank" href="https://emotion.sh/docs/introduction">Emotion</a> as styled components library, but the starter is purposely only sparsely styled so you don&#8217;t have to remove unecessary code but can instead add your own styling immediately.
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-️-common-problems" class="anchor" aria-hidden="true" href="#%EF%B8%8F-common-problems"></a>⚠️ Common problems
</h2>

<ul dir="auto">
  <li>
    You need to use the Shopify Storefront API credentials not the regular Shopify API.
  </li>
  <li>
    You need to have at least one published product on Shopify.
  </li>
</ul>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content--quick-start" class="anchor" aria-hidden="true" href="#-quick-start"></a>🚀 Quick start
</h2>

<ol dir="auto">
  <li>
    <strong>Create a Gatsby site.</strong><br /> Use the Gatsby CLI to create a new site, specifying this starter.</p> <pre># create a new Gatsby site using this starter

gatsby new my-shopify-store https://github.com/AlexanderProd/gatsby-shopify-starter

  <li>
    <strong>Start developing.</strong><br /> Navigate into your new site’s directory and start it up.</p> <pre>cd my-shopify-store/

gatsby develop

  <li>
    <strong>Open the source code and start editing!</strong><br /> Your site is now running at <code>http://localhost:8000</code>!<br /> Note: You&#8217;ll also see a second link: <code>http://localhost:8000/___graphql</code>. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the <a rel="nofollow noopener" target="_blank" href="https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql">Gatsby tutorial</a>.<br /> Open the <code>my-shopify-store</code> directory in your code editor of choice and edit <code>src/pages/index.js</code>. Save your changes and the browser will update in real time!
  </li>
  <li>
    <strong>Connect your own Shopify store.</strong><br /> Open both <code>.env</code> files located in the root directory of your page end replace the credentials with your own. Don&#8217;t forget to restart Gatsby for your store to be loaded!<br /> ⚠️ Make sure to use the Shopify storefront API credentials, not the regular Shopify API!
  </li>
</ol>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-deploy" class="anchor" aria-hidden="true" href="#deploy"></a>Deploy
</h2>

<p>
  Checkout my other open-source project JAMStackBox to continuously deploy your Gatsby site on your own server.
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content--learning-gatsby" class="anchor" aria-hidden="true" href="#-learning-gatsby"></a>🎓 Learning Gatsby
</h2>

<p>
  Looking for more guidance? Full documentation for Gatsby lives <a rel="nofollow noopener" target="_blank" href="https://www.gatsbyjs.org/">on the website</a>. Here are some places to start:
</p>

<ul dir="auto">
  <li>
    <strong>For most developers, we recommend starting with our <a rel="nofollow noopener" target="_blank" href="https://www.gatsbyjs.org/tutorial/">in-depth tutorial for creating a site with Gatsby</a>.</strong> It starts with zero assumptions about your level of ability and walks through every step of the process.
  </li>
  <li>
    <strong>To dive straight into code samples, head <a rel="nofollow noopener" target="_blank" href="https://www.gatsbyjs.org/docs/">to our documentation</a>.</strong> In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.
  </li>
</ul>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content--todo" class="anchor" aria-hidden="true" href="#-todo"></a>📌 ToDo
</h2>

<p>
  I&#8217;ll happily merge any pull request to improve the starter. 🙂
</p>

<ul class="contains-task-list">
  <li class="task-list-item">
    Convert Layout to function component.
  </li>
  <li class="task-list-item">
    Add dynamic inventory checking to avoid re-building after every purchase.
  </li>
  <li class="task-list-item">
    Add better styling.
  </li>
  <li class="task-list-item">
    Add image optimization using Gatsby sharp plugin.
  </li>
  <li class="task-list-item">
    Convert ProductForm to function component.
  </li>
</ul>

<p>
</p>