Overview

The Netlify StatusShopify PWA starter for Gridsome is a boilerplate starter that is optimized to achieve the highest scores on Google Lighthouse. It aims to showcase the seamless integration of Gridsome and Shopify, resulting in an exceptionally fast shopping experience for consumers.

Features

• 4 x 100% Highest Scores on Google Lighthouse!: The starter is optimized to achieve the highest possible scores on Google Lighthouse tests.
• Full SSR (Server Side Rendering) Static Site: The site is fully rendered on the server side, ensuring fast and efficient page loading.
• Progressive Web App (PWA) with “Add to Home Screen” button: The starter is designed as a Progressive Web App and includes an “Add to Home Screen” button for a seamless mobile experience.
• Connected to Shopify backend: The starter is seamlessly connected to a Shopify backend, allowing for easy integration and management of products.
• Home Page showing Featured Products: The starter includes a home page that showcases featured products, attracting customer attention.
• Product Search: Customers can utilize a product search functionality to quickly find specific products they are looking for.
• Product Page: Each product has a dedicated page where customers can view detailed information and make a purchase.
• Collection Search: Customers can search for specific product collections, making it easier to browse and find products within specific categories.
• All Collections Page: The starter includes a page that displays all available collections, allowing customers to explore a wide range of products.
• TailwindCSS with PurgeCSS to remove unused css: The starter utilizes TailwindCSS with PurgeCSS to ensure optimized and efficient CSS usage.
• SEO optimized: The starter is optimized for search engines, ensuring better visibility and discoverability.
• Sitemap: The starter includes a sitemap, making it easier for search engines to crawl and index the site.

Installation

To install the Gridsome Shopify PWA starter, follow these steps:

1. Create a private app in Shopify and give it access to the Storefront API (default permissions should be sufficient).
2. Note down the Storefront API key and your store name.
3. Install the Gridsome CLI.
4. You can either download the repository directly or use the Gridsome CLI to download and install dependencies.
5. Before running the starter, add your Storefront API shop name (https://<shop-name>.myshopify.com) and token to an environment file.
6. If desired, add some collections in Shopify to showcase the starter’s capabilities.
7. Enter the site folder and run gridsome develop to start a local development server.

Happy coding!

Summary

The Netlify StatusShopify PWA starter for Gridsome is a highly optimized boilerplate starter that demonstrates the seamless integration of Gridsome and Shopify. With its exceptional scores on Google Lighthouse and a range of features such as full SSR, PWA support, and seamless Shopify backend connection, this starter provides an incredibly fast and efficient shopping experience for consumers. Its search functionalities, collection pages, and various optimization techniques ensure a smooth and enjoyable shopping experience.