Стильный современный fashion-стартер
от agilo
Fashion-стартер, оформленный вокруг вымышленного бренда Sofa Society. Включает страницы коллекций, дизайн-вдохновение, сетку товаров, корзину, оформление заказа и страницу «О нас».
Fashion E-commerce Starter for Medusa 2.0
Fashion E-commerce Starter это современный настраиваемый шаблон интернет-магазина на Medusa 2.0. Он построен вокруг вымышленного бренда экологичной мебели Sofa Society и показывает возможности новой версии Medusa 2.0. Sofa Society делает ставку на выразительный дизайн, экологичность и персонализацию, поэтому покупатель получает изящный опыт покупки: настраиваемые коллекции, варианты товара и короткий путь до оплаты.
Этот набор подойдёт разработчику, которому нужно быстро поднять профессиональный магазин одежды с полным набором функций. В комплекте аккуратный современный дизайн, настраиваемые коллекции, страница «Вдохновение», страница «О нас» и короткое оформление заказа. Витрина полностью адаптивна и оптимизирована для телефонов, планшетов и настольных компьютеров.
Содержание
Возможности
- Аккуратный современный дизайн: минималистичная витрина, которая точно передаёт курс Sofa Society на современную эстетику и экологичность.
- Динамические материалы и цвета: задайте для каждого товара материалы и цвета, и предложение станет богаче. Цвета показываются по своим hex-кодам, а у каждого материала может быть несколько цветов. Покупатель сначала выбирает материал, затем цвет, и цена меняется в зависимости от выбора.
- Настраиваемые коллекции: содержимое и изображения каждой коллекции легко поменять. На странице товара тоже показываются изображения и призыв к действию для его коллекции, и они настраиваются, так что магазин целиком выглядит вашим брендом.
- Готовая страница «Вдохновение»: красивая страница, готовая к использованию, помогает покупателю разобраться в трендах и стилях и показывает мебель Sofa Society в реальных интерьерах.
- Страница «О нас»: расскажите историю бренда, его ценности и позицию по экологичности на готовой странице, которая передаёт суть Sofa Society.
- Короткое оформление заказа: путь до оплаты быстрый, понятный и без лишних шагов, поэтому покупка проходит гладко от начала до конца.
- Полностью адаптивный дизайн: оптимизирован для телефонов, планшетов и настольных компьютеров, так что опыт одинаково ровный на любой платформе.
- Оплата через Stripe: подключите Stripe и принимайте платежи. Добавьте секретный ключ Stripe в , а publishable-ключ в , и можно начинать.
- Полный набор функций магазина: страницы товаров, корзина, оформление заказа и подтверждение заказа входят в комплект.
- Next.js и Tailwind CSS: стартер собран на Next.js v15 с app router и Tailwind CSS, поэтому он быстрый, настраиваемый и его легко расширять.
Планы развития
- Шаблон дизайна в Figma: позволяет подогнать дизайн витрины под ваш бренд. Открыть шаблон.
- Поиск: подключён Meilisearch для сильного поиска.
- Страница 404: своя страница 404 для лучшего опыта.
- Личный кабинет: покупатель создаёт аккаунт, смотрит историю заказов и меняет свои данные.
- Выдвижная корзина: панель корзины выезжает сбоку, в ней можно посмотреть и изменить состав.
- Шаблоны писем: настраиваемые письма о подтверждении заказа, статусе доставки и не только.
- Бесконечная прокрутка: страницы магазина и коллекций подгружают товары по мере прокрутки, так их удобнее изучать.
- Resend: подключён Resend для отправки транзакционных писем.
Скриншоты
Главная
О нас
Вдохновение
Коллекция
Магазин
Товар
Корзина
Оформление заказа
Проверка заказа
Подтверждение заказа
Admin - изменение коллекции
Admin - изменение типа товара
Admin - материалы
Admin - цвета
Admin - изменение цвета
Admin - товар
Admin - у товара не хватает цвета
Admin - добавление недостающего цвета
Требования
- Node >= 20
- Yarn >= 3.5 для Medusa, Yarn v1 для витрины
- Docker и Docker Compose
- Аккаунт Stripe (для платежей)
- httpie
Быстрый старт
Medusa
На этом шаге панель администратора Medusa должна открываться по адресу http://localhost:9000/app с созданными вами данными для входа. После входа откройте http://localhost:9000/app/settings/publishable-api-keys, скопируйте publishable-ключ и вставьте его в переменную окружения в файле .
Витрина
Витрина должна открываться по адресу http://localhost:8000.
Meilisearch
Откройте файл и вставьте полученный ключ в переменную окружения . Затем откройте файл и вставьте админский ключ в