Готові теми з маркетплейсу OpenCart часто перевантажені невикористовуваним кодом: десятки опцій, слайдерів та шрифтів, які не потрібні конкретному магазину. Це призводить до низької швидкості завантаження та поганих показників Core Web Vitals — LCP > 3 с, TTFB > 500 мс. Кастомна тема вирішує проблему кардинально: ми пишемо лише той код, який реально потрібен вашому магазину. За кілька років ми розробили понад 30 унікальних тем для OpenCart 3.x та 4.x, і кожна з них проходить аудит продуктивності перед деплоєм.
Наш підхід — інженерний, без маркетингових обіцянок. Ми використовуємо актуальний стек: Twig (шаблонізатор OpenCart 4), CSS-препроцесори та збірку через Vite для production-оптимізації. В результаті — тема, яка ідеально відповідає дизайну, швидко завантажується та легко підтримується. Отримайте консультацію щодо вашого проєкту.
Чому кастомна тема OpenCart швидша за готову?
Готові теми містять безліч опцій (кольорові схеми, перемикачі розкладки, слайдери), які часто не використовуються, але завантажуються в пам'ять. Це збільшує розмір CSS/JS та кількість запитів.
Кастомна тема включає лише потрібні стилі та скрипти. Ми контролюємо кожен байт: мініфікуємо, об'єднуємо файли, додаємо кешування. Результат — LCP < 1.5 с та TTFB < 300 мс на типовому хостингу.
Крім того, ми закладаємо правильну семантику та мікророзмітку (schema.org, JSON-LD), що позитивно впливає на SEO.
Що входить у розробку кастомної теми?
| Етап | Результат | Час |
|---|---|---|
| Аналіз ТЗ та дизайн-макету | Прототип структури сторінок | 1-2 дні |
| Верстка базових шаблонів (header, footer, навігація) | Адаптивні Twig-шаблони | 2-3 дні |
| Інтеграція каталогу та картки товару | Шаблони з опціями, галереєю, фільтрами | 2-3 дні |
| Кошик та оформлення замовлення | Користувацький потік без помилок | 2-3 дні |
| Адаптація під мобільні та планшети | Mobile-first верстка з srcset |
1-2 дні |
| Тестування та правки | Кросбраузерна сумісність | 2-3 дні |
| Документація та передача | Інструкція з встановлення та налаштування | 0,5 дня |
Після кожного етапу ми демонструємо проміжний результат на staging-сервері.
Як ми будуємо архітектуру теми?
OpenCart 4 використовує Twig — гнучкий шаблонізатор з успадкуванням блоків. Ми створюємо незалежну тему, яка може перевизначати лише потрібні файли, решта береться з default-теми.
catalog/view/theme/{theme_name}/ ├── template/ │ ├── common/ │ │ ├── header.twig │ │ ├── footer.twig │ ├── product/ │ │ ├── category.twig │ │ ├── product.twig │ ├── checkout/ │ │ ├── cart.twig │ │ ├── checkout.twig └── stylesheet/ Ресурси підключаються через контролер теми за допомогою $this->document->addStyle() та addScript(). Для продакшену — збірка npm run build, яка генерує хешовані файли для cache-busting.
Як ми забезпечуємо високу продуктивність?
Ми застосовуємо кілька технік: tree-shaking для CSS/JS, bundle splitting для сторінок каталогу та кошика, а також Edge Functions для динамічного кешування. В результаті — мінімальний розмір бандлу та миттєвий відгук.
Порівняння кастомної та готової теми
| Параметр | Кастомна тема | Готова тема |
|---|---|---|
| Розмір CSS/JS | ~50 Kb | ~200-500 Kb |
| Кількість запитів | 10-15 | 30-50 |
| LCP (типовий) | < 1.5 с | > 3 с |
| Адаптивність | Mobile-first | Часто погано |
| Мікророзмітка | Так | Не завжди |
| Підтримка | 30 днів | Немає |
Типові помилки при розробці тем OpenCart (та як їх уникнути)
- Ігнорування кешування Twig. Без кешування кожен запит компілює шаблони — навантаження на CPU зростає. Ми вмикаємо кешування в production.
-
Неправильна робота з опціями товару. Використовуємо типи
selectіradioз оновленням ціни через JavaScript без перезавантаження сторінки. -
Відсутність lazy loading для зображень. Галерея будується на
srcsetтаloading="lazy", перше зображення — зfetchpriority="high".
Гарантія та підтримка
Ми надаємо 30-денну гарантію на приховані дефекти верстки та інтеграції. Якщо після запуску ви виявили помилку у відображенні на якомусь пристрої — виправимо безкоштовно. Також доступний пост-релізний супровід за запитом.
Наш досвід: багаторічна робота з OpenCart, участь у комерційних проєктах з високим навантаженням, знання всіх версій платформи. Ми використовуємо найкращі практики — від Repository pattern для роботи з БД до Suspense для складних інтерфейсів.
Якщо вам потрібна аналогічна тема, замовте розробку — зв'яжіться з нами. Ми оцінимо проєкт і запропонуємо оптимальне рішення.
Приклад шаблону картки товару
Ключові змінні в product.twig:
{{ product_id }}, {{ name }}, {{ description }}, {{ model }} {{ price }}, {{ special }}, {{ tax }} {{ rating }}, {{ reviews }} {{ manufacturer }}, {{ manufacturer_href }} {{ thumb }}, {{ images }} {{ options }} {{ meta_title }}, {{ meta_description }} {{ canonical }} Для варіантів товару ми використовуємо типи select і radio з оновленням ціни через JavaScript. Галерея зображень будується на srcset та loading="lazy", а перше зображення — з fetchpriority="high".
Повний код шаблону та JavaScript для додавання в кошик доступні при замовленні послуги.