Документація
RU UK
Особистий кабінет

Власна тема з нуля

Порядок роботи від копії базової теми до готового оформлення: з чого почати, що робити в якому порядку.

На цій сторінці

Свою тему майже ніколи не пишуть з порожнього місця. Тут — два шляхи і порядок роботи для кожного.

Який шлях обрати

Копія готової теми. «Дизайн» → тема → «Зробити копію». Копія повністю незалежна: правки в ній не чіпають вихідну, але й оновлення вихідної в копію не приходять.

Беріть цей шлях, якщо робите магазин під клієнта і результат потрібен сьогодні: усі сторінки, кошик, оформлення і кабінет вже зібрані, вам залишається оформлення.

З нуля. Папка, theme.json, templates/home.html, далі за переліком сторінок.

Беріть, якщо тема піде в маркетплейс або розмітку задумано зовсім інакше: копія базової теми тягне за собою її структуру класів, і переробляти її дорожче, ніж написати своє.

Завести нову тему з панелі не можна — тільки копією наявної або папкою на диску.

Мінімум, за якого магазин бачить тему

themes/my-theme/
    theme.json
    templates/
        home.html

{
    "id": "my-theme",
    "name": "Моя тема",
    "version": "1.0.0",
    "requires": { "core": "2.0.0" }
}

<!doctype html>
<html lang="{$storefront.locale}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{$storefront.name}</title>
    {assets_head}
</head>
<body>
    <h1>{$storefront.name}</h1>
    {assets_footer}
</body>
</html>

Окремого переліку тем немає — папка на диску і є переліком. Скопіювали папку — тема одразу з'явилася у виборі оформлення.

Заведіть заразом три файли, які магазин просить на кожній сторінці, хоча б порожніми: assets/css/theme.css, assets/js/theme.js, assets/vendor/fontawesome/all.min.css. Інакше в консолі будуть три помилки 404.

Як переключити вітрину на свою тему

«Вітрини і контент» → «Вітрини», поле «Оформлення», потім «Зберегти».

Розділ «Дизайн» тему вітрини не змінює — там обирають, яку тему ви правите. Це плутає під час першого знайомства.

Тема належить вітрині: за кількох вітрин у кожної може бути своя.

Порядок роботи

1. Каркас

templates/layout.html. Готовий зразок з усім обов'язковим — на сторінці Каркас сторінки. Обов'язкове там: мета-тег з ключем захисту, {assets_head} і {assets_footer}, блок page_assets до {assets_head}.

Тут же зручно вивести кольори з налаштувань теми змінними CSS — далі все оформлення спирається на них.

2. Шапка

partials/header.html. Що в неї покласти, щоб працювали можливості магазину:

  • лічильник кошика — [data-badge="cart"], сума — [data-cart-total-header];
  • живий пошук — форма [data-live-search] з [data-search-input] і порожнім місцем [data-search-results];
  • меню категорій — {$shop->categories(null, 2)};
  • перемикач мови — {$shop->locales()};
  • вхід і кабінет — за {if $customer};
  • контакти — $contacts з готовим phone_link.

3. Підвал

partials/footer.html. Меню інформаційних сторінок — {$shop->pages()}. Обов'язково точки {hook name="footer.start"} і {hook name="footer.end"}. Копірайт зручно винести налаштуванням теми.

4. Головна

home.html. Даних їй не передають зовсім — усе береться через $shop:

{extends file="layout.html"}
{block name="content"}
    {include file="blocks/product-list.html" products=$shop->products('new-arrivals', null, 12)}
    {include file="blocks/product-list.html" products=$shop->products(null, 'discount', 8)}
{/block}

5. Лістинг — один раз на чотири сторінки

Категорія, пошук, бренд і мітка отримують однаковий набір даних. Зберіть список товарів, фільтри і посторінкову навігацію окремими шматками і увімкніть у всі чотири — інакше будете правити одне й те саме чотири рази.

Фільтри малюйте списком за даними: набір характеристик у кожного магазину свій, і хардкод «колір, розмір, бренд» на чужому магазині покаже порожнечу.

6. Картка товару

product.html — найбільша сторінка. Три блоки обслуговує магазин, тема дає тільки місце: комплекти ([data-accessories]), упаковки ([data-pack]), позначка «вже в кошику» ([data-in-cart]).

Свій лічильник кількості над блоком упаковок не заводьте — він битиметься з магазинним.

Гілку «товар без фото» пишіть одразу: магазин без фотографій — звична річ.

7. Кошик

checkout/cart.html. Кількості дробові — виводьте через {qty}. Позиції з ознакою locked (подарунки, призи) показуйте без лічильника і без кнопки видалення. Порожній кошик — окремий блок, а не порожня таблиця.

Підсумки загортайте в {if $items}: у порожнього кошика частина ключів не приходить.

8. Оформлення

checkout/layout.html. Свого скрипта тут писати не треба. Перерахунок, способи доставки і оплати, карта відділень, промокод, бали — усе це магазин підключає сам до будь-якої теми.

Ваша частина — розмітка з обумовленими атрибутами і свій checkout.css. Повний перелік атрибутів — на сторінці Атрибути data-*.

Не забудьте checkout/success.html, checkout/error.html, checkout/pay.html, checkout/pay-error.html — на дві останні покупець потрапляє за посиланням з листа.

9. Кабінет

Десять шаблонів у account/. Свій account/layout.html з бічним меню економить час. Капчу вставляйте тегом {captcha form="…"} — він сам розбереться, чи потрібна вона. Форми звичайного POST зобов'язані нести {csrf_field}.

10. Дрібні, але обов'язкові

404.html — інакше покупець побачить стандартну сторінку без вашої шапки. maintenance.html — заглушка закритого магазину.

Правлю — бачу: як працювати без несподіванок

Шаблони оновлюються одразу

Правку .html видно негайно — магазин сам помічає, що файл змінився.

Сторінки вітрини кешуються на добу

Це головна причина «я поправив, а нічого не змінилося».

Робочий прийом: правте тему, залишаючись у панелі в сусідній вкладці. Співробітник магазину і пише повз кеш, і читає повз нього — ви завжди бачите свіжу сторінку.

Не кешуються ніколи: кошик, оформлення, замовлення, кабінет, обране, порівняння, підказки пошуку, а також будь-яка сторінка для покупця, який увійшов.

⚠️ Збереження файлу теми в редакторі кеш не скидає — файл пишеться повз базу. Збереження налаштувань теми скидає.

Кнопки скидання

«Система» → «Обслуговування», група «Кеш і сторінки»:

Кнопка Коли тиснути
Скинути сторінки вітрини «показує стару верстку або старі ціни»
Перезібрати шаблони теми «правка теми не видна»
Скинути весь кеш коли не допомогло ні те, ні інше

Шаблони перезбираються самі під час увімкнення і вимкнення доповнення, під час установлення або оновлення теми, під час відновлення з копії та під час оновлення магазину.

Файли стилів і скриптів

Підключені через {asset_css} і {asset_js} отримують позначку версії — браузер бере свіжий файл. Написані вручну через {$theme.assets} позначки не отримують і залипають у покупця на місяць. Стилі і скрипти підключайте тільки тегами.

Подивитися, що прийшло

{dump}                 що взагалі доступно цьому шаблону
{dump var=$product}    одне значення
{dumpc var=$product}   те саме в консоль браузера

Бачить тільки співробітник магазину. Це найшвидший спосіб зрозуміти, що приходить на сторінку, — і він завжди актуальніший за будь-яку таблицю в довіднику.

Правила, які не можна порушувати

Поведінка вітрини живе в магазині, а не в темі. Переписали оформлення замовлення своїм скриптом — ваша тема відстане на першому ж оновленні: новий перевізник, новий спосіб оплати і нове поле з'являться в усіх тем, окрім вашої.

Своїм скриптом тема робить те, що стосується її розмітки: висувне меню, галерею, вкладки, додавання в кошик і в обране.

Тема не ходить у базу даних. Усе запитується в $shop. Звернення до класів магазину із шаблону заборонено і дає помилку, а не дані.

Тема нічого не рахує в грошах. Числа приходять готовими, {money} тільки форматує.

Бібліотеки кладуться файлами, а не підключаються з чужого сайту.

Налаштування зобов'язане щось робити. Поле, яке зберігається і ні на що не впливає, — обман власника магазину.

Оновлено 25 серпня 2026