A Custom Built Next.JS Shopify Headless Ecommerce Store

This project was both engaging and rewarding. The task involved building an e-commerce website for selling Swedish nicotine pouches, similar to Zyn. The primary objective was to create a visually appealing, modern e-commerce store within a limited timeframe. One critical requirement was that the website could not resemble a generic Shopify template; it needed to be unique and custom-built.

To achieve this, I decided to code the site entirely from scratch. This approach ensured maximum customization, as every detail could be tailored to suit the project’s requirements. Starting from the ground up also meant the final product would stand apart from anything else available on the web.

Choosing the Tech Stack

Selecting the right technology stack was an essential first step. An e-commerce platform was necessary for managing products, updating images, tracking inventory, and more. Shopify initially seemed like an obvious choice due to its popularity and robust features. However, its standard templates and limited customization options did not align with the project’s goals.

This led to the idea of creating a headless Shopify e-commerce store. With this setup, Shopify handled backend functionalities like inventory and product management, while a separate, fully custom-coded website acted as the frontend. Communication between the frontend and Shopify was facilitated using Shopify’s GraphQL API. This approach worked seamlessly, although there was one limitation: the checkout process had to be hosted on Shopify’s domain. To address this, I configured the Shopify checkout page to use a subdomain, checkout.swelip.com, ensuring a more cohesive experience for customers.

Development Process

The development process was extensive, as nearly every aspect of a fully functional e-commerce website needed to be built from scratch. This included core features such as a shopping cart, product pages, FAQ sections, and more. The homepage featured a hero section that highlighted a “flavor of the month,” followed by a grid of all available products. This layout was chosen because the initial product catalog was relatively small, making it easy for customers to view all items directly from the homepage.

For the product page, I adopted a clean and functional design. The left side of the screen displayed the product image, while the right side showcased details such as the name, price, and an “Add to Cart” button. Additionally, I incorporated custom metadata fields within Shopify to store extra product details, such as nicotine content per pouch, nicotine content per gram, and more. This data was dynamically fetched using Shopify’s API and displayed on the product page in an accordion-style layout.

Technical Details

The entire website was built using Next.js and hosted on Vercel. This combination allowed for a modern, fast, and scalable web application. While there were several technical challenges, such as ensuring seamless API integration and configuring the checkout process, the result was a website that I was genuinely proud of.

Reflections and Lessons Learned

Unfortunately, the website is no longer live, as Shopify’s platform requires a $40/month subscription fee. In hindsight, I believe Medusa.js, an open-source e-commerce platform, would have been a better choice. Medusa.js would have eliminated the subscription cost while offering even greater customization options, including the ability to customize the checkout process.

Overall, this project was a valuable learning experience and a testament to the possibilities of headless e-commerce architecture. While this summary only scratches the surface of what was developed, it highlights the basics without delving into the many details that went into creating a comprehensive and fully functional e-commerce store.