Типова проблема з дефолтною темою 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 годин — зв'яжіться з нами для консультації. Отримайте детальну комерційну пропозицію з переліком робіт та гарантією якості.