Gatsby Woocommerce Themes

Theme by Imranhsayed

|

Updated: 31 May 2022

|

612 Stars

A Gatsby Theme for WooCommerce E-commerce site Gatsby WooCommerce WordPress

Categories

Overview

Gatsby WooCommerce themes - Electra is an active project that provides a Gatsby theme for WooCommerce, utilizing a Decoupled Architecture. The front end is built with React and the backend is powered by WordPress. This theme comes with a range of features and is designed to be fast, optimized, and user-friendly.

Features

• Uses React with Gatsby for a blazing-fast website.
• Progressive Web App (PWA) functionality allows the website to work offline.
• Image Optimization includes a blur effect for enhanced visual aesthetics.
• GraphQL integration with wp-graphql on WordPress for efficient data retrieval.
• Custom Widgets, Menus, and Social elements for a personalized experience.
• WooCommerce store integration for seamless e-commerce functionality.
• Google Analytics feature for detailed website analytics.
• Yoast SEO supported, including Open Graph (og) tags optimization.
• Product Search with pagination for easy navigation, even when offline.
• Product pagination and Archive pages for organized content access.
• Secure authentication using JWT (JSON Web Token).
• My Account page with Login and Registration options for personalized user experiences.
• Create an account on checkout for convenient customer account creation.
• Social share functionality for easy content sharing across social media platforms.
• Product Carousel feature to display products in an interactive manner.
• Add to wishlist option, even when offline, for convenient product bookmarking.

Installation

To set up the Gatsby WooCommerce theme - Electra, follow these steps:

1. Fork/clone the repository to your local machine.
2. Install the required dependencies by running yarn install.
3. Set up Gatsby by configuring the server-side environment variables. Create a file called ‘.env’ in the site directory and add the following variables:
   • WORDPRESS_SITE_URL - Replace ‘https://example.com’ with your WordPress site URL.
   • GATSBY_SITE_URL - Replace ‘https://example.com’ with your Gatsby site URL.
   • GOOGLE_TAGMANAGER_ID - Add your Google Tag Manager ID.
   • FB_APP_ID - Add your Facebook App ID.
4. Create two more files called ‘.env.development’ and ‘.env.production’ in the ‘site’ directory. Add your WordPress site URL links to these files. The environment variables from these files will be consumed by Apollo client on the client-side.
5. Set up WordPress by downloading and activating the required plugins from the ‘wordpress/plugins’ folder of the repository:
   • Headless CMS
   • WooCommerce
   • wp-graphql (tested on v1.0.0)
   • wp-graphql-woocommerce
   • wp-gatsby
   • Yoast SEO
   • wp-graphql-yoast-seo
   • wp-graphql-jwt-authentication
6. Configure the Header and Footer menus in your WordPress site. Set the ‘HCMS Header Menu’ for the header and ‘HCMS Footer Menu’ for the footer.
7. Optionally, you can add text widgets in ‘#HCMS Footer #1’ and ‘#HCMS Footer #2’ under ‘Appearance > Widgets’ in WordPress.
8. Create a Home Page if one doesn’t already exist and ensure that the Location rule is set to the Home page.
9. Set up WooCommerce by making sure the WooCommerce plugin is active in WordPress and configuring the payment modes in its settings. You can also import default WooCommerce products for development purposes if needed.

Summary

The Gatsby WooCommerce theme - Electra provides a seamless integration of the Gatsby framework with WooCommerce, offering a fast and optimized website experience. With features like PWA functionality, image optimization, GraphQL integration, and customizability options, this theme offers an efficient and user-friendly way to build an e-commerce website with WordPress and Gatsby.