Overview:

The Netlify StatusShopify PWA starter for Gridsome is a boilerplate starter that is optimized to achieve high scores on Google Lighthouse. It demonstrates how Gridsome and Shopify can work together to create a fast shopping experience for consumers.

Features:

• 4 x 100% Highest Scores on Google Lighthouse!: The starter is optimized to achieve the highest scores on Google Lighthouse.
• Full SSR (Server Side Rendering) Static Site: The starter utilizes server-side rendering to generate static pages, resulting in improved performance.
• Progressive Web App (PWA) with “Add to Home Screen” button: The starter includes PWA functionality, allowing users to add the website to their home screen for easy access.
• Connected to Shopify backend: The starter is connected to the Shopify backend, allowing seamless integration with Shopify for product management and data retrieval.
• Home Page showing Featured Products: The starter includes a home page that showcases featured products, attracting the attention of consumers.
• Product Search: Users can search for specific products using the included search functionality.
• Product Page: Each product has its own dedicated page, providing detailed information and allowing users to make a purchase.
• Collection Search: Users can search for specific collections of products, making it easier to find what they are looking for.
• All Collections Page: The starter includes a page that displays all available collections, making it convenient for users to explore different product categories.
• TailwindCSS with PurgeCSS to remove unused css: The starter utilizes TailwindCSS and PurgeCSS to remove any unused CSS, resulting in a leaner and more optimized website.
• SEO optimized: The starter is optimized for search engines, making it easier for the website to rank higher in search results.
• Sitemap: The starter automatically generates a sitemap, improving search engine discoverability and crawling.

Installation:

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

1. Create a private app in Shopify and grant it access to the Storefront API, ensuring that the default permissions are sufficient for this starter.
2. Make note of the Storefront API key and your store name.
3. Install the Gridsome CLI.
4. Download this repository or use the Gridsome CLI to download and install dependencies automatically.
5. Add your Storefront API shop name (https://<shop-name>.myshopify.com) and token to an environment file.
6. Optionally, add some collections in Shopify to showcase the capabilities of this starter.
7. Navigate to the site folder and run gridsome develop to start a local development server.
8. Start coding!

Summary:

The Netlify StatusShopify PWA starter for Gridsome is a highly optimized boilerplate starter that demonstrates the powerful combination of Gridsome and Shopify. By utilizing server-side rendering, PWA functionality, and seamless integration with Shopify, this starter provides an exceptional shopping experience for consumers. With features such as product search, dedicated product pages, collection search, and an SEO-optimized website, this starter is a solid foundation for building an efficient and visually appealing online store.