Website | Documentation | Forums | Community
A headless electronic eCommerce theme built with Next.js and powered by Bagisto, designed specifically for electronics and gadget retailers. This theme delivers exceptional performance, modern UI, and a seamless shopping experience tailored to tech-focused stores.
Through layered caching and optimized rendering strategies, it consistently achieves a 100/100 Core Web Vitals score, delivering lightning-fast performance and seamless shopping experiences.
Check the Documentation to quickly set up your Headless eCommerce store.
Bagisto Version: v2.4.x
Bagisto API: v1.0.3
- Ultra-fast storefront with 100/100 Core Web Vitals score.
- Layered caching for API responses and page rendering.
- Fully responsive and mobile-friendly design optimized for electronics.
- SEO optimized with meta tags, OpenGraph, and Twitter cards.
- Secure authentication via NextAuth.js.
- Powered by Bagisto GraphQL APIs for robust commerce functionality.
- Incremental Static Regeneration (ISR) with revalidation.
- Product-focused layouts tailored for electronics and gadgets.
- Advanced filtering and search for tech products.
- Support for multiple product types (simple, configurable, bundled, downloadable).
Before you begin, ensure you have the following installed:
- Node.js 18+ and npm
- Check Bagisto backend requirement detail
-
Install Bagisto
Begin by installing the Bagisto eCommerce platform on your server or local environment.
-
Install the Bagisto Headless Extension
After installing Bagisto, install the Bagisto Headless Extension to expose the required APIs for your frontend.
-
Clone the repository and install dependencies:
git clone https://github.com/bagisto/nextjs-electronic-theme.git cd nextjs-electronic-theme npm install -
Configure
.env.localin the Next.js ProjectIn your Next.js frontend project, create or update your
.env.localfile with the following variables:Variable Description Example NEXT_PUBLIC_BAGISTO_ENDPOINTEnter Your Bagisto Shop URL https://your-store.bagisto.com/NEXT_PUBLIC_BAGISTO_STOREFRONT_KEYEnter Your Bagisto Storefront Key pk_storefront_*************************NEXTAUTH_URLEnter Your Headless Shop URL https://headless-store.com/NEXTAUTH_SECRETEnter Your Headless Shop Secret Generate with openssl rand -base64 32COMPANY_NAMEEnter Your company name Electronics Store Important Notes
- Use the environment variables defined in
.env.exampleas a reference. - It's recommended to use Vercel Environment Variables, but a
.env.localfile is sufficient for local development. - Never commit your
.env.localfile to version control — it contains secrets that would allow others to control your Bagisto store.
- Use the environment variables defined in
Run the development server:
npm devAccess the store at: http://localhost:3000
Build for production:
npm build
npm startInstall the Vercel CLI:
npm i -g vercelLink your local instance with Vercel and GitHub accounts (creates the .vercel directory):
vercel linkDownload your environment variables:
vercel env pullBrowse a comprehensive range of electronic products with built-in pagination and advanced search functionality. Each product features detailed pages with multiple images, specifications, pricing, availability, customer reviews, and ratings.
Bagisto Headless Commerce APIs support multiple product types, including simple, configurable, bundled, and downloadable products, ensuring flexibility for different business needs.
Products are organized into hierarchical categories, making it easy for customers to navigate your electronics store. Each category page displays relevant product listings with filtering and sorting options for a better shopping experience.
The theme also ensures SEO-friendly category URLs with meta titles, descriptions, and breadcrumbs for improved discoverability.
The checkout process is fully functional, featuring complete cart management where customers can add, update, or remove items.
Both guest and logged-in users can proceed through checkout, selecting shipping addresses and preferred payment methods. Once the order is placed, it is instantly synchronized with the Bagisto backend for smooth order processing and management.
Registered customers get a dedicated account dashboard to manage their entire shopping experience. The panel offers a responsive layout for both desktop and mobile, with all customer data securely synchronized with the Bagisto backend.
Customers can view and update their personal details — name, email, contact information, and password — directly from the profile page, keeping their account secure and up to date.
The orders section displays a complete history of placed orders with cursor-based pagination. Customers can drill into any order to view its items, status, and download the associated invoices.
Customers can manage multiple shipping and billing addresses — adding, editing, or removing entries — which are then available for quick selection during checkout.
From the reviews section, customers can track all the product reviews and ratings they have submitted, helping them keep record of their feedback.
Customers can save their favorite products to a wishlist for later, then move items to the cart whenever they are ready to buy. Wishlist state is managed globally with Redux for a seamless experience across the store.
The compare feature lets customers place products side by side to evaluate their specifications and features, making it easier to choose the right electronics. Compare state is also managed globally with Redux for consistency across pages.
Get support and connect with the Bagisto community:
Bagisto Headless eCommerce framework that will always remain free under the MIT License.
If you believe you have found a security issue in the Electronics Theme, please do not use the issue tracker and do not post it publicly. Instead, all security issues must be sent to support@bagisto.com.