ShopName — HTML-шаблон интернет-магазина техники и гаджетов

О продукте

Готовый шаблон интернет-магазина для продажи электроники, гаджетов и аксессуаров. Изначально задумывался как основа под WordPress-тему — вся структура, вёрстка и логика уже готовы к интеграции с любой CMS. --- Что внутри — 16 готовых страниц Основные: · Главная — hero-блок, категории, хиты продаж, преимущества, блог · Каталог — фильтры, сортировка, переключение сетка/список, пагинация · Карточка товара — галерея, выбор цвета и размера, табы, отзывы, похожие товары · Корзина — товары, промокод, расчёт итога, бесплатная доставка от 3000 руб. · Оформление заказа — 4 шага: контакты, доставка, адрес, оплата · Бренды — каталог всех брендов плюс страница отдельного бренда Личный кабинет: · Авторизация — вход и регистрация с полной валидацией · Профиль — личные данные, редактирование, аватары, настройки · Мои заказы — история с фильтрами, трекингом и модалкой деталей · Избранное — сохранённые товары с быстрым удалением Дополнительные: · Поиск — товары и статьи с фильтрами · Блог — список статей с сайдбаром · Статья — текст, рейтинг, комментарии, похожие статьи · Инфо-страница — доставка, оплата, гарантия, возврат · 404 — страница ошибки --- Что уже работает · Корзина — добавление, удаление, счётчик, промокоды (SALE10, SALE20, WELCOME), расчёт итога · Бесплатная доставка от 3000 руб. — автоматически применяется · Избранное — сохранение через localStorage · Фильтры каталога — категории, цена, бренд, наличие, скидка · Сортировка — 5 вариантов: по цене, рейтингу, новизне, популярности · Сетка/список — переключение вида каталога · Быстрый просмотр (Quick View) — модалка с товаром прямо из каталога · Галерея товара — превью с плавным переключением · Маска телефона — единая для всех форм · Валидация форм — подсветка ошибок, проверка email, пароля, телефона · Тосты — всплывающие уведомления (success, error, info) · Мобильное меню — бургер со свайпом · Модалки — для адресов, профиля, деталей заказа · Рейтинг статьи — 5 звёзд с подсветкой · Комментарии — добавление через форму --- SEO-оптимизация из коробки На каждой странице: · Оптимизированный title (60–70 символов) · Мета-описание (150–160 символов) · Мета-ключевые слова · Canonical — защита от дублей · Open Graph — корректное превью в ВКонтакте, Одноклассниках, Telegram · vk:image — отдельная картинка для VK · noindex на служебных страницах (корзина, чекаут, ЛК, 404) — чтобы не засорять поиск --- Технические характеристики · HTML5 — семантическая разметка, ARIA-атрибуты · CSS3 — переменные, Flexbox, Grid, clamp(), плавные анимации · JavaScript — нативный, без jQuery и без зависимостей · Адаптивность — брейкпоинты 1024 / 768 / 480 px, полностью рабочий мобильный вид · Шрифты — Google Fonts (Inter + Playfair Display) через CDN · Иконки — inline SVG, без внешних библиотек · Размер — около 500 КБ со всеми картинками --- Что входит в покупку · 16 HTML-файлов — все страницы шаблона · CSS — один файл style.css (около 1500 строк) · JavaScript — один файл main.js (около 900 строк) · 15 изображений товаров — демо-картинки для примера · README.md — подробная инструкция по установке и кастомизации · LICENSE.txt — лицензия для одного проекта · Поддержка 30 дней — помощь с установкой и базовыми вопросами --- Установка — 3 минуты 1. Распакуйте архив 2. Загрузите файлы на любой хостинг (Beget, Timeweb, Reg.ru, Netlify) 3. Откройте index.html в браузере — всё работает Никаких npm install. Никаких сборщиков. Никаких зависимостей. Шаблон задумывался как основа для WordPress-темы — вся структура и вёрстка готовы к интеграции. Если вы планируете переносить его на WP, вам будет достаточно подключить functions.php, single-product.php и archive-product.php. --- Кастомизация Цвета — все в CSS-переменных. Поменяйте одну переменную — обновится весь шаблон: ``` :root { --primary: #c9a227; --accent: #d6336c; --success: #10b981; } ``` Шрифты — подключены через Google Fonts. Замените на свои (Manrope, Unbounded и т.д.) — и поправьте font-family в CSS. Тёмная тема — каркас уже готов. Добавьте класс dark на html и пропишите значения переменных. Промокоды — в js/main.js, объект promoCodes. Можно добавить свои или убрать лишние. Товары — карточки с data-атрибутами. Меняйте значения — карточка обновляется. --- Кому подойдёт · Фрилансерам — быстрый старт для клиентского проекта · Малому бизнесу — интернет-магазин без сложной разработки · Разработчикам — готовая вёрстка под прикручивание бэкенда · Агентствам — база для адаптации под разные ниши · Студентам и новичкам — пример качественного HTML/CSS/JS --- Что НЕ входит Это фронтенд-шаблон без бэкенда. Он не умеет: · Реально принимать оплату · Отправлять заказы на сервер · Хранить пользователей в базе Все действия — демонстрационные и работают через localStorage. Для запуска реального магазина нужно прикрутить бэкенд (Node.js, PHP, Python) и платёжную систему (ЮKassa, Тинькофф). --- Демо Демо-версия не предоставляется публично — это защита кода от копирования. Все ключевые экраны показаны в скриншотах выше. Если нужно увидеть что-то дополнительно — напишите, пришлю видео-обзор или дополнительные снимки. · Готовая вёрстка 16 страниц — сэкономит 40+ часов работы · Корзина, фильтры, избранное — сэкономит ещё 20+ часов JS-логики · SEO-оптимизация — сэкономит 5+ часов · Адаптив под мобильные — сэкономит 10+ часов Итого: вы экономите 75+ часов разработки. При ставке фрилансера 500 руб./час это 37 500 руб. экономии.

Что входит

Отзывы появятся после первых покупок.