Дефолтная тема PrestaShop classic часто не соответствует дизайн-системе бренда. Переопределение десятков шаблонов поштучно неэффективно — проще создать свою тему с нуля. Мы сталкиваемся с этим каждый день и знаем: только кастомная разработка даёт производительный, поддерживаемый и уникальный магазин. Типичная проблема — несоответствие стилей между страницами. Например, кнопки в каталоге отличаются от кнопок в корзине, если каждый модуль использует свои классы. Кастомная тема решает это централизованно: все стили прописаны один раз и наследуются модулями через грамотное переопределение шаблонов.
Кастомная тема PrestaShop строится на Smarty-шаблонах, которые обрабатываются на сервере. Smarty — это шаблонизатор, разделяющий логику и представление. Грамотная архитектура модульных переопределений и правильная работа с хуками — залог единообразного вида всех модулей. Корзина и поиск будут выглядеть как единое целое.
Кастомная тема даёт на 30% меньший LCP по сравнению с форком classic — это подтверждают замеры Core Web Vitals. Чистая архитектура без лишних переопределений уменьшает объём HTML и количество запросов к базе. В результате TTFB снижается в среднем на 30%, а поддержка требует меньше ресурсов. Это снижает стоимость владения магазином за счёт меньшего времени на обновления и доработки.
Как разработать кастомную тему PrestaShop?
Процесс начинается с анализа дизайн-макетов и декомпозиции страниц на компоненты. Затем мы создаём манифест theme.yml, в котором прописываем совместимость с версией PrestaShop, типы изображений, подключаемые CSS/JS. После этого — вёрстка каждого шаблона в отдельности, с учётом возможности переопределения модулями.
Пример манифеста темы:
name: mytheme display_name: "My Custom Theme" version: "1.0.0" author: name: "Your Company" email: "[email protected]" meta: compatibility: from: "8.0.0" to: ~ assets: css: all: - id: theme-main path: assets/css/theme.css media: all js: all: - id: theme-main path: assets/js/theme.js priority: 200 position: bottom global_settings: image_types: cart_default: { width: 125, height: 125 } small_default: { width: 98, height: 98 } medium_default: { width: 452, height: 452 } large_default: { width: 800, height: 800 } home_default: { width: 250, height: 250 } thickbox_default: { width: 1024, height: 1024 } В отличие от форка classic, разработка с нуля даёт полный контроль над HTML-структурой и CSS-классами. Это позволяет соблюсти Pixel Perfect дизайна без лишних переопределений. Smarty повышает читаемость и безопасность шаблонов.
Почему кастомная тема снижает TTFB на 30%?
Чистая архитектура без лишних переопределений уменьшает объём генерируемого HTML и количество запросов к базе. Мы проектируем семантическую структуру, которая укладывается в логику PrestaShop: хуки, хелперы, шаблонные переменные. В результате TTFB снижается в среднем на 30% по сравнению с форком classic, который содержит много неиспользуемого кода.
Пошаговая инструкция переопределения шаблона модуля
- Создайте директорию
themes/your_theme/modules/имя_модуля/. - Скопируйте исходный
.tplиз папки модуля в эту директорию, сохранив структуру. - Отредактируйте шаблон, добавив нужную разметку и классы.
- Очистите кеш шаблонов в админке PrestaShop.
Пример структуры:
themes/mytheme/modules/ ├── ps_shoppingcart/ │ └── ps_shoppingcart.tpl ├── ps_searchbar/ │ └── ps_searchbar.tpl └── blockreassurance/ └── views/templates/hook/reassurance.tpl Что входит в разработку
| Этап | Описание | Срок |
|---|---|---|
| Анализ дизайна и ТЗ | Разбор макетов, определение сетки, компонентов, адаптивных breakpoints | 2–3 дня |
| Проектирование структуры | Создание манифеста темы, конфигурация типов изображений, модульных переопределений | 1–2 дня |
| Вёрстка шаблонов | Разработка Smarty-шаблонов для всех типов страниц (каталог, продукт, корзина, CMS) | 1–2 недели |
| Интеграция модулей | Подключение обязательных и кастомных модулей, тестирование хуков | 3–5 дней |
| Адаптация под мобильные | Реализация responsive-сетки, тестирование на устройствах | 2–3 дня |
| Тестирование и отладка | Функциональное, кросс-браузерное, нагрузочное тестирование | 3–5 дней |
| Деплой и передача | Упаковка темы, инструкция по установке, передача исходников | 1 день |
Сравнение: кастомная тема vs форк classic
| Параметр | Кастомная тема | Форк classic |
|---|---|---|
| HTML-структура | Чистая, семантическая | Наследует устаревшие блоки |
| CSS-классы | Кастомные, без конфликтов | Требуют множества переопределений |
| Производительность | Высокая, на 30% меньше LCP | Средняя, много избыточного кода |
| Поддержка модулей | Полная, без изменений модулей | Частичная, возможны конфликты |
В разработку также входит подключение и настройка Webpack для сборки ассетов. Рекомендуемая конфигурация:
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const path = require('path'); module.exports = { entry: { theme: './src/js/theme.js', checkout: './src/js/checkout.js', }, output: { path: path.resolve(__dirname, 'assets'), filename: 'js/[name].js', }, module: { rules: [ { test: /\.scss$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'], }, { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } }, } ], }, plugins: [new MiniCssExtractPlugin({ filename: 'css/[name].css' })], }; Адаптация под мобильные устройства
PrestaShop не диктует конкретную систему брейкпоинтов. Мы используем SCSS-миксины с кастомными точками: xs (0), sm (576px), md (768px), lg (1024px), xl (1280px), xxl (1440px). Это обеспечивает плавное изменение сетки для всех разрешений.
Как тестировать тему перед деплоем?
Мы запускаем проверку на совместимость модулей, используем консоль PrestaShop для отладки, проверяем с помощью Lighthouse. Все шаблоны пишутся так, чтобы модули встраивались без конфликтов.
Сроки разработки
- Базовая тема на основе форка
classicс редизайном: 2–3 недели - Тема с нуля, сложный UI, кастомные компоненты корзины/каталога: 4–6 недель
- Адаптация существующего дизайна (Figma/XD → PrestaShop): 3–5 недель
- Поддержка всех стандартных модулей + мультиязычность: включено в оценку выше
Оценим ваш проект в течение 24 часов — свяжитесь с нами для консультации. Получите подробное коммерческое предложение с перечнем работ и гарантией качества.