Gridsome Shopify Starter Theme

This is a boilerplate starter, optimized to reach the highest scores on Google Lighthouse, aiming to showcase how Gridsome and Shopify can work together, to create an amazingly fast shopping experience for consumers.

Check Live Preview: View Demo

Features

• ✅ 4 x 100% Highest Scores on Google Lighthouse!
• ✅ Full SSR (Server Side Rendering) Static Site
• ✅ Progressive Web App (PWA) with "Add to Home Screen" button.
• ✅ Connected to Shopify backend
• ✅ Home Page showing Featured Products
• ✅ Product Search
• ✅ Product Page
• ✅ Collection Search
• ✅ All Collections Page
• ✅ TailwindCSS with PurgeCSS to remove unused css.
• ✅ SEO optimized
• ✅ Sitemap

Installation Steps:

• ✅ Click on Download button.
• ✅ A modal asking for email address appears,please enter your email address, and click Download Now.
• ✅ Extract the zip files.
• ✅ You will need to create a private app in Shopify, and give it access to the Storefront API. Make sure to note the Storefront API key, and your store name.
• ✅ Install necessary dependencies, along with gridsome cli

npm install -g @gridsome/cliyarn global add @gridsome/cli

• ✅ You will need to add your Storefront API shop name (https://'shop-name'.myshopify.com) & token to an env file before running this starter.

GRIDSOME_SHOPIFY_STOREFRONT= 'shop name'GRIDSOME_SHOPIFY_STOREFRONT_TOKEN='storefront token'

• Or you can manually edit the Shopify Source Plugin's configurations in gridsome.config.js.
• ✅ Enter the site folder, and run following command to start a local development server.

  gridsome develop