Fashion E-commerce Starter for Medusa 2.0

storefront-video.mp4

The Fashion E-commerce Starter is a modern, customizable e-commerce template built with Medusa 2.0. Designed around the concept of the sustainable furniture brand Sofa Society, this starter showcases the power of new Medusa 2.0 version. With its focus on cutting-edge design, sustainability, and personalization, Sofa Society offers users an elegant shopping experience where they can explore customizable collections, product options, and a streamlined checkout flow.

This starter kit is an ideal solution for developers who need to set up a professional, feature-rich fashion e-commerce store quickly. It comes with a sleek and modern design, customizable collections, an Inspiration page, an About page, and a streamlined checkout process. The storefront is fully responsive and optimized for mobile, tablet, and desktop devices.

Table of Contents

• Features
• Roadmap
• Screenshots
• Prerequisites
• Quickstart
  • Medusa
  • Storefront

Features

• Sleek, Modern Design: The storefront boasts a minimalist, contemporary design that perfectly reflects Sofa Society's commitment to modern aesthetics and sustainability.
• Dynamic Materials and Colors: Add richness to your product offerings by defining materials and colors for each product. Colors will be displayed using their corresponding hex codes, and each material can have multiple color options. Customers first select a material, then a color, with dynamic pricing based on their choices.
• Customizable Collections: Easily customize the content and images for each collection. Each product page also features images and a CTA for the collection it belongs to, which can be personalized as well, creating a fully branded shopping experience.
• Premade Inspiration Page: A beautiful, ready-to-use inspiration page helps customers explore the latest trends and styles, showcasing Sofa Society's furniture in real-world settings.
• About Page: Share your brand’s story, values, and commitment to sustainability with a pre-built about page that captures the essence of Sofa Society.
• Streamlined Checkout Flow: The checkout process is designed to be fast, intuitive, and frictionless, providing a seamless shopping experience for your customers from start to finish.
• Fully Responsive Design: Optimized for mobile, tablet, and desktop devices, ensuring a smooth, consistent experience across all platforms.
• Stripe Integration for Payments: Accept payments effortlessly by integrating Stripe. Simply add your Stripe API key to medusa/.env and the publishable key to storefront/.env to get started.
• Full E-commerce Functionality: The starter includes all the essential e-commerce features you need, including product pages, a shopping cart, a checkout process, and order confirmation.
• Next.js and Tailwind CSS: Built with Next.js v15 app router and Tailwind CSS, the starter is highly performant, customizable, and easy to extend with additional features.

Roadmap

• Figma Design Templates: This will enable you to easily customize the design of the storefront to match your brand.
• Search: Integration with Meilisearch for a powerful search experience.
• 404 Page: Custom 404 page for a better user experience.
• Account Management: Allow customers to create accounts, view order history, and manage their personal information.
• Cart Drawer: Cart drawer that slides in from the side where customers can view and edit their cart items.
• Email Templates: Customizable email templates for order confirmation, shipping updates, and more.
• Infinite Scroll Pagination: Improve the product discovery experience with infinite scroll pagination on store and collection pages.
• Resend Integration: Integration with Resend for sending transactional emails.

Screenshots

Home

About

Inspiration

Collection

Store

Product

Cart

Checkout

Checkout Review

Order Confirmation

Admin - Edit Collection

Admin - Edit Product Type

Admin - Materials

Admin - Colors

Admin - Edit Color

Admin - Product

Admin - Product Missing Color

Admin - Product Add Missing Color

Prerequisites

• Node >= 20
• Yarn >= 3.5
• Docker and Docker Compose
• Stripe account (for payments)

Quickstart

git clone [email protected]:Agilo/fashion-starter.git

Medusa

cd medusa

# Create the .env file
cp .env.template .env

# Install dependencies
yarn

# Spin up the database and Redis
docker-compose up -d

# Build the project
yarn build

# Run the migrations
yarn medusa db:migrate

# Seed the database
yarn seed

# Create an user
yarn medusa user -e "[email protected]" -p "supersecret"

# Start the development server
yarn dev

At this point, you should be able to access the Medusa admin at http://localhost:9000/app with the credentials you just created. After logging in, you should go to http://localhost:9000/app/settings/publishable-api-keys, copy the publishable key, and paste it into the NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY env variable in the storefront/.env.local file.

Storefront

cd storefront

# Create the .env.local file
cp .env.template .env.local

# Install dependencies
yarn

# Start the development server
yarn dev

You should now be able to access the storefront at http://localhost:8000.