Problem
I wanted to familiarize myself with the Shopify environment. Shopify makes it easy to build custom, headless storefronts while keeping Shopify as a backend/CMS.
Solution
The project was built with Next.js and Tailwind CSS with Shopify as the CMS. I chose this because it is my goto stack and there are a lot of existing support documents and examples of headless Shopify storefronts built in Next.js.
As for the product to "sell", I decided to design everything myself. I could have used stock photos or AI-generated content, but I thought it'd be fun to challenge myself creatively. I chose to build a fictional coffee company because of my extended experience working in the industry. The can labels, branding, mockups, and copy were all designed by me.
Key Features
- Customized branding
- Cart Management
- Shopify Storefront API integration
Outcomes
This project gave me insights into what it takes to build a practical e-commerce website. There are many details that most people don't notice such as the layout of the product page or being able to edit your cart. I had a lot of fun being artistic and avant-garde in the design and copy.
Future Improvements
- More animations
- Refined type scale
- Product variety to showcase product page filtering