Розробникам · Теми
Компоненти ядра
Що тема ставить тегом {% component %}: ціна, кнопка «У кошик», галерея, кошик, оформлення, шапка й підвал — де кожен дозволений і які має параметри.
Компонент ядра — робоча частина вітрини: ціна, кнопка «У кошик», вибір варіанта, рядки кошика, поля оформлення. Тема не пише їх сама, а ставить тегом {% component %} у свою розмітку. Компонент малює ядро: він працює з кошиком і оплатою, а виглядає так, як його оформлює дизайн магазину в тому місці, де він стоїть природно (галерея — як фото товару, кнопка в картці — як кнопка картки).
{% component 'product.price' %}
{% component 'commerce.add-to-cart', variant: p.variant_id %}
{% component 'header.menu', menu: 'main', display: 'mega' %}
{% component 'product.gallery', style: 'square' %}Правила
- Параметри — налаштування компонента, як у редакторі. Вони перевіряються так само: невідомий параметр або хибне значення — компонент не рендериться зовсім.
- Порожнє значення (nil, порожній рядок, порожній список) пропускається — лишається налаштування за замовчуванням. Тому без вибраної категорії не ламає компонент.
- обирає один з іменованих стилів компонента в дизайні магазину; без нього — стиль місця, де компонент стоїть.
- дає компонентам шапки вигляд для мобільної панелі.
- Компонент, не дозволений у цьому місці, не рендериться: компонент шапки в підвалі, кошика — у секції головної.
- Обовʼязкова частина сторінки (кнопка «Оформити» в кошику, поля оформлення, результати каталогу) додається після розмітки теми, якщо тема її не поставила.
Скрізь
Дозволені в будь-якій секції й будь-якому сніпеті сторінки. Компоненти товару без товару на сторінці нічого не показують.
| Компонент | Що | Параметри |
|---|---|---|
| product.title | Назва товару. | — |
| product.price | Ціна зі старою ціною. | — |
| product.availability | Наявність. | — |
| product.gallery | Галерея фото товару. | — |
| product.short-description | Короткий опис. | — |
| product.badges | Бейджі товару. | — |
| product.tags | Мітки товару. | — |
| product.extension-attributes | Характеристики із застосунків. | — |
| commerce.add-to-cart | Кнопка «У кошик». Без variant — вибраний варіант товару сторінки; з variant — цей варіант (для власних циклів по картках). | variant (id варіанта) |
| collection.products | Добірка карток магазину: новинки, у наявності, категорія, вибрані вручну або «З цим купують». | eyebrow (рядок); title (рядок); source (newest, in_stock, collection, manual, related); collection (код категорії); product_ids (список id товарів); limit (ціле 1–24); columns (2, 3, 4, 5); layout (grid, row); link_label (рядок); link_url (рядок) |
| product.card | Картка магазину для одного товару (сніпет product-card, якщо він є в темі). | product (id товару) |
| catalog.menu | Відкрите меню каталогу з мегапанелями — поруч з банером головної. | menu (handle меню); item_icons (так/ні) |
| module.forms.form | Форма з «Контент → Форми»; лише коли в магазині ввімкнено модуль форм. Свій захист від ботів. | form (код форми) |
Картка товару
У сніпеті snippets/product-card.liquid, крім компонентів «Скрізь»:
| Компонент | Що | Параметри |
|---|---|---|
| product.media | Фото картки так, як їх налаштовано в дизайні (пропорції, друге фото при наведенні). | — |
| product.swatches | Кольори товару (наведення показує фото кольору, клік відкриває його) і розміри. Кольори — з варіантів або групи «Кольори моделі»; показуються, коли їх більше одного. | sizes (так/ні); limit (ціле 2–12) |
product.title, product.price, product.availability, product.badges і commerce.add-to-cart у картці беруть дані цієї картки.
Сторінка товару
У сніпеті product-page (і product-page--<шаблон>). Кожен — один раз на сторінку.
| Компонент | Що | Параметри |
|---|---|---|
| product.variant-picker | Вибір варіанта; вигляд — swatches, buttons або dropdown — задає стиль дизайну. | — |
| product.brand | Бренд з посиланням на його сторінку. | show_logo (так/ні) |
| product.video | Відео з поля товару з посиланням. | field (простір.ключ поля товару); title (рядок) |
| product.highlights | Переваги й умови: пункти, поріг безкоштовної доставки. | title (рядок); items (масив); free_shipping (так/ні) |
| product.wishlist | Кнопка «В обране». | — |
| product.description | Опис. | collapsed (так/ні) |
| product.specifications | Таблиця характеристик з розділами. | — |
| product.bundle-members | Склад набору. | — |
| product.reviews | Відгуки. | — |
Плюс компоненти товару зі списку «Скрізь». Купівля, варіанти й галерея працюють лише через ці компоненти — не робіть власних кнопок і форм.
Каталог
У сніпеті collection-page (каталог, категорія, бренд, SEO-сторінка фільтра).
| Компонент | Що | Параметри |
|---|---|---|
| collection.header | Заголовок каталогу. | — |
| collection.subcategories | Підкатегорії. | — |
| collection.intro | Вступ категорії. | — |
| catalog.results | Фільтри, сортування, сітка карток і сторінки одним компонентом. Обовʼязковий. | — |
| collection.description | Опис категорії під товарами. | — |
Кошик і мінікошик
У сніпетах mini-cart і cart-page.
| Компонент | Що | Параметри |
|---|---|---|
| cart.lines | Рядки кошика з фото, кількістю й видаленням. | — |
| cart.summary | Сума товарів, знижка й разом. | — |
| cart.coupon | Поле промокоду; лише коли в магазині є коди. | — |
| cart.free-shipping | Скільки лишилось до безкоштовної доставки. | — |
| cart.checkout-button | Перехід до оформлення. Обовʼязковий. | label (рядок) |
| cart.page-link | З мінікошика на сторінку кошика, коли вона ввімкнена. | label (рядок) |
| cart.upsell | Картки «З цим купують» (сторінка кошика). | — |
| cart.close | Кнопка, що закриває мінікошик. | label (рядок) |
Оформлення замовлення
У сніпеті checkout. Поля, перевірки й оплата лишаються магазину; тема обирає порядок, колонки, кроки й тексти навколо. Скрипти теми тут не виконуються ніколи.
| Компонент | Що | Обовʼязковий |
|---|---|---|
| checkout.information | Текст для покупця з налаштувань оформлення. | ні |
| checkout.mode | Новий чи зареєстрований покупець і вхід. | ні |
| checkout.contact | Імʼя, пошта, телефон і згода на розсилку. | так |
| checkout.delivery | Спосіб доставки, місто, відділення чи адреса. | так |
| checkout.comment | Коментар покупця. | ні |
| checkout.app-fields | Поля, які додають застосунки. | так |
| checkout.payment | Спосіб оплати. | так |
| checkout.lines | Товари з кількістю й ціною. | ні |
| checkout.coupon | Промокод; лише коли в магазині є коди. | ні |
| checkout.totals | Товари, знижка, доставка й разом до оплати. | ні |
| checkout.submit | Помилки й кнопка, що оформлює замовлення. | так |
Обовʼязкові, яких тема не поставила, додаються після її розмітки в порядку: контакти, доставка, поля застосунків, оплата, кнопка. Компоненти оформлення параметрів не мають.
Інші сторінки
| Сніпет | Компоненти | Обовʼязковий |
|---|---|---|
| blog-page | blog.header, blog.posts | blog.posts |
| article-page | article.header, article.content (блоки статті), article.comments, record.breadcrumbs | article.content |
| search-page | search.header, search.pages (знайдені сторінки), search.results (знайдені товари) | search.results |
| entry-page | entry.title, entry.fields, entry.field, entry.list, record.breadcrumbs, record.custom-field | — |
| entry-list-page | entry.list | entry.list |
| account-page | account.content (форми й списки розділу), account.navigation, account.logout | account.content |
| auth-page | auth.form (вхід, реєстрація, паролі) | auth.form |
| order-page | order.payment-details (реквізити, коли покупець обрав оплату на рахунок) | order.payment-details |
| not-found-page | лише компоненти «Скрізь» | — |
| Компонент | Що | Параметри |
|---|---|---|
| entry.field | Одне поле запису. | field (ключ поля); label (так/ні); size (xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl); weight (regular, medium, semibold, bold, extrabold); case (normal, upper); lines (1, 2, 3, 4, none); align (start, center, end) |
| record.custom-field | Власне поле запису. | field (ключ поля); label (так/ні); size (xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl); weight (regular, medium, semibold, bold, extrabold); case (normal, upper); lines (1, 2, 3, 4, none); align (start, center, end) |
| entry.list | Список записів типу контенту; вигляд cards або list — стилем дизайну. | type (handle типу контенту); title (рядок); limit (ціле 1–48); sort (newest, oldest, title, manual); columns (2, 3, 4) |
Решта компонентів сторінок параметрів не мають.
Шапка
У секції зі схемою "enabled_on": {"groups": ["header"]}. Секція шапки не бачить product, а request.page_type там завжди page.
| Компонент | Що | Параметри |
|---|---|---|
| header.logo | Логотип магазину. | — |
| header.menu | Меню; display: mega відкриває мегапанелі, які власник зібрав у «Меню». | menu (handle меню); display (dropdown, mega); panel_width (container, screen); open_on (hover, click) |
| header.catalog | Кнопка «Каталог» зі списком або шухлядою. | menu (handle меню); style (dropdown, drawer); open_on (hover, click); item_icons (так/ні); display (icon, text, icon_text); icon (bars, grid, bars-short); icon_svg (рядок); icon_image (id з медіатеки); icon_color (text, original); icon_size (sm, md, lg, xl); label (рядок); size (xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl); weight (regular, medium, semibold, bold, extrabold); case (normal, upper) |
| header.search | Пошук. | — |
| header.language | Перемикач мови. | — |
| header.account | Кнопка кабінету. | display (icon, text, icon_text); icon (user, user-circle); icon_svg (рядок); icon_image (id з медіатеки); icon_color (text, original); icon_size (sm, md, lg, xl); label (рядок); size (xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl); weight (regular, medium, semibold, bold, extrabold); case (normal, upper) |
| header.cart | Кнопка кошика з лічильником і мінікошиком. | display (icon, text, icon_text); icon (bag, cart, basket); icon_svg (рядок); icon_image (id з медіатеки); icon_color (text, original); icon_size (sm, md, lg, xl); label (рядок); count (badge, inline, none); size (xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl); weight (regular, medium, semibold, bold, extrabold); case (normal, upper) |
| header.menu-toggle | Кнопка мобільного меню. | display (icon, text, icon_text); icon (bars, bars-short, dots); icon_svg (рядок); icon_image (id з медіатеки); icon_color (text, original); icon_size (sm, md, lg, xl); label (рядок); size (xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl); weight (regular, medium, semibold, bold, extrabold); case (normal, upper) |
| header.text | Текст або посилання. | text (рядок); url (рядок) |
| header.announcement | Смуга оголошень з ротацією. | messages (масив); interval (ціле 3–15); dismissible (так/ні) |
| header.button | Кнопка-посилання. | label (рядок); url (рядок); variant (primary, outline) |
| header.contacts | Телефон, пошта, графік, Telegram з налаштувань магазину. | show (phone, email, both); hours (так/ні); telegram (так/ні) |
| header.social | Соцмережі магазину. | — |
Параметри кнопок-дій (header.account, header.cart, header.menu-toggle, header.catalog): display — icon, text або icon_text; icon — вбудована іконка; icon_svg — власний SVG-код; icon_image — картинка з медіатеки; icon_color — text (силует кольором тексту) або original; icon_size — sm–xl; label — текст кнопки; count — badge, inline («(3)») або none; size, weight, case — вигляд тексту.
Підвал
У секції зі схемою "enabled_on": {"groups": ["footer"]}.
| Компонент | Що | Параметри |
|---|---|---|
| footer.logo | Логотип. | — |
| footer.contacts | Контакти магазину. | — |
| footer.menu | Меню з заголовком. | menu (handle меню); title (рядок) |
| footer.payment-icons | Іконки платіжних систем. | — |
| footer.social | Соцмережі. | — |
| footer.newsletter | Підписка на новини зі згодою й захистом від ботів. | — |
| footer.text | Текст. | text (рядок) |
| footer.copyright | Копірайт. | — |
| footer.note | Нижній підпис. | — |
| footer.collections | Список категорій. | title (рядок); collections (список кодів категорій) |
| footer.banner | Банер з картинкою, текстом і кнопкою. | image_id (id з медіатеки); title (рядок); text (рядок); button (рядок); url (рядок) |
| footer.button | Кнопка-посилання. | label (рядок); url (рядок); variant (primary, outline) |
| footer.language | Перемикач мови. | — |
| footer.image | Зображення з посиланням. | image_id (id з медіатеки); url (рядок); width (ціле 40–480) |
Мегаменю
Панелі мегаменю (header.mega-panel і блоки mega.links, mega.collections, mega.products, mega.entries, mega.banner, mega.text) належать меню, а не темі: власник збирає їх у редакторі «Меню». Тема лише відкриває їх — {% component 'header.menu', menu: 'main', display: 'mega' %}, {% component 'header.catalog' %} або {% component 'catalog.menu' %} — і стилізує частини data-sf-part (див. /docs/theme-behaviours-and-styles).