Демо-магазин

Магазин, який можна поклацати

Ember & Oak — вигаданий кавовий бренд на моєму власному Shopify dev store. Тут немає макетів: каталог заповнений, додатки встановлені, замовлення існують. Відкрий, покидай у кошик, спробуй зламати.

Відкрити демо-магазин

Магазин закритий паролем. Введи 12345, щоб зайти.

Кастомні додатки

Кожен додаток працює на власному Cloudflare Worker і встановлений у демо-магазин через managed installation Shopify. Вітринна частина живе в темі.

Mix & Match Bundles

Сторінка бандлу, де покупець обирає від 2 до 8 товарів з різних категорій, а знижка росте з кількістю: 10 % від двох, 15 % від чотирьох, 20 % від шести, плюс безкоштовна торба. Бокс продається як один товар і на чекауті стає своїми реальними складниками.

Звідки беруться дані: Метаобʼєкт «Mega bundle» на товарі (custom.mega_bundle): мінімальна й опційна кількість виборів, відсоток знижки на кожен слот, безкоштовні товари-подарунки і категорії з іконкою. Категорія містить один або кілька списків «Products bundle» (під-таби) з товарів чи окремих варіантів. Додаток лише з розширень: Cart Transform, discount function з екраном налаштувань і жодного сервера.
Як це працює: Секція теми збирає бокс і рахує ціну; дві функції тримають ту саму ціну на чекауті й показують там заощадження. Кроки нижче ведуть один бокс від сторінки до замовлення.

Відкрити в демо-магазині

Повний перелік

Магазин закритий паролем. Введи 12345, щоб зайти.

Вперше зроблено для BrekkyBowl

Сторінка Mix & Match: категорії, під-таби і панель зі слотом на кожен вибір

Шість позицій: найвищий рівень досягнуто, €17,92 замість €22,40

Деталі товару в боковій панелі з власною кількістю і кнопкою додавання

Drawer кошика: один рядок, знижка з назвою, вміст рухомою стрічкою чипів

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

В адмінці бокс — один запис метаобʼєкта: категорії, мінімум і опційні позиції, знижка за кількість, безкоштовний подарунок

Крок за кроком

Категорії і табиЛипкий ряд кнопок категорій (Drinks, Snacks, Breakfast) перемикає сітку; категорія з кількома списками має під-таби (Cold brew, Sparkling), які її фільтрують. Варіанти, яких немає в наявності, не показуються.
Вибір«Add» на картці кладе одну одиницю в бокс і перетворюється на степер −/+. Клік по фото відкриває панель деталей із галереєю, описом і власними кількістю та кнопкою додавання.
Панель унизуФіксована панель показує по слоту на кожен можливий вибір. Порожні слоти показують знижку, яку відкривають, заповнені — фото товару з кнопкою видалення. Над ними смуга прогресу і повідомлення: «Add at least 2 products!», далі «2 more for 15% off your bundle!», а на найвищому рівні «You save 20% on your set!».
ЦінаОдна ставка діє на весь бокс: відсоток останнього заповненого слота. Кожна одиниця коштує як її варіант мінус ця ставка; панель показує суму, а суму без знижки перекреслює, картки теж показують ціну зі знижкою. Нижче мінімуму кнопка каже «Choose products»; на максимумі подальші додавання відхиляються з повідомленням.
Додавання в кошикОдин запит додає товар-обгортку один раз. Бокс їде в прихованих властивостях рядка: _cb_selections (id варіантів, по одному на одиницю, безкоштовна торба перша), _cb_prices (ціна кожної одиниці зі знижкою в центах, 0 для подарунка) і _cb_compare_total (сума без знижки).
Drawer кошикаDrawer показує один рядок: бокс, перекреслену початкову суму, ціну бандлу і назву знижки «Mix & Match Bundle». Під ним вміст іде чипами — рухомою стрічкою, коли їх більше трьох, і її можна тягнути мишею чи пальцем. Кількість і видалення діють на весь бокс.
Discount functionУ кошику discount function читає ті самі властивості і знімає з рядка точну різницю між двома сумами фіксованою сумою, тож ціна сходиться до цента з тим, що показав конструктор, без похибок округлення.
ЧекаутCart Transform розгортає рядок у складники, масштабовані до суми без знижки, і позначає їх відсотком бандлу; discount function повертає їх до фінальної ціни. Покупець бачить бокс зі списком усіх позицій під ним, перекреслену початкову ціну, «Mix & Match Bundle (−€4.48)» і загальне заощадження.
ЗамовленняЗамовлення містить реальні варіанти, торбу за €0, тож залишки і фулфілмент ідуть по кожному товару. Кожен складник також несе id, назву й ціну бандлу, тож лист-підтвердження може надрукувати бокс одним блоком.

Cart Milestones

Смуга прогресу в drawer кошика і на сторінці кошика: безкоштовна доставка від €30, подарунок від €50, −30 % на аксесуар від €80. На кожному кроці покупець сам обирає винагороду.

Звідки беруться дані: Метаобʼєкт «Cart milestone step» на кожен крок: поріг, тип винагороди і товари на вибір. Адмінка додатка показує кроки та їхній стан; тема несе смугу, пікер і картки варіантів.
Як це працює: Смуга перемальовується з кожною зміною кошика через рендеринг секцій Dawn. Коли поріг досягнуто, іконка подарунка відкриває пікер; вибір додається рядком, який discount function оцінює в €0 або −30 %, і знімається, якщо кошик падає нижче порога.

Відкрити в демо-магазині

Повний перелік

Магазин закритий паролем. Введи 12345, щоб зайти.

Вперше зроблено для Health-Bar

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

Крок €50 досягнуто: зʼявляється кнопка подарунка, а смуга рахує далі до наступної винагороди

Пікер винагороди: кожен варіант за €0,00 з перекресленою ціною

Обраний подарунок окремим рядком із позначкою «Cart reward»

Адмінка додатка: вимикач і кожен крок із сумою, іконкою та текстами смуги, які перекладаються

Підписки

Віджет «підпишись і заощадь» у buy box: разово або кожні 2, 4 чи 6 тижнів зі знижкою 10 %. Чекаут стандартний Shopify, цикли виставляє додаток.

Звідки беруться дані: Групи планів в адмінці додатка: періодичність з інтервалом і знижкою, привʼязані до товарів або окремих варіантів. Додаток створює selling plans у Shopify; блок теми читає їх із товару.
Як це працює: Віджет перемикає разову покупку і підписку, тримає обрану періодичність між варіантами й оновлює ціну та кнопку. Щоденний cron Worker списує кожен цикл, що настав, повторює невдалі платежі й ставить контракт на паузу після останньої спроби.

Відкрити в демо-магазині

Магазин закритий паролем. Введи 12345, щоб зайти.

Вперше зроблено для legona

Адмінка додатка: план із частотами доставки і знижкою для кожної

AI-пошук товарів

Пошуковий оверлей, який розуміє запит на кшталт «подарунок до 15 євро»: keyword-двигун відповідає за мілісекунди, мовна модель переранжовує результати і пише відповідь над ними.

Звідки беруться дані: Заповнювати нічого: Worker читає каталог через Storefront API і працює з профілю магазину (поняття, синоніми, правила). Сторінка адмінки підключає магазин, дає тестовий пошук і показує, що шукали покупці.
Як це працює: Тема викликає GET /search на Worker із запитом і мовою. Результати, суміжні запити й відповідь кешуються на шість годин; найчастіші запитання тримаються теплими. Коли модель недоступна, відкочується до Workers AI, а потім до keyword-відповіді.

Відкрити в демо-магазині

Повний перелік

Магазин закритий паролем. Введи 12345, щоб зайти.

Вперше зроблено для Health-Bar

Оверлей відповідає на «gift under 15 euro»

Адмінка додатка: тестовий запит, на який Gemini відповів за 621 мс, — той самий запит, що надсилає вітрина

Двигуни: спершу відповідає пошук за словами, Gemini ранжує, Workers AI — запасний варіант для відповіді

Локатор магазинів

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

Звідки беруться дані: Руками нічого не заповнюється. Worker читає компанії та їхні локації із замовлень, один раз геокодує адреси й віддає публічний JSON-ендпоінт, який читає секція теми. Щоденний cron тримає дані свіжими; сайт та Instagram можна додати кожній компанії в Shopify.
Як це працює: Секція малює мапу і список із ендпоінту, з пошуком за містом. Локації зникають самі, коли компанія перестає замовляти.

Відкрити в демо-магазині

Повний перелік

Магазин закритий паролем. Введи 12345, щоб зайти.

Вперше зроблено для Health-Bar

Сторінка Stores із 20 B2B-клієнтами на мапі

Адмінка додатка: B2B-компанії, що підходять, остання синхронізація і публічний endpoint, який читає мапа

Усі локації з геокодованими координатами

Переклади магазину

Увесь магазин німецькою під /de/: товари, сторінки, блог, меню, метаполя й тексти теми, перекладені автоматично і підтримувані в актуальному стані.

Звідки беруться дані: Мови вмикаються в Shopify; у додатку мерчант веде глосарій (терміни, що лишаються як є, бажані переклади) і форму звертання (du). Адмінка показує покриття за типами контенту і те, чого бракує.
Як це працює: Щогодинний cron підбирає те, що додалось чи змінилось після останнього запуску, і записує переклади через Translations API Shopify, тож правлене руками не чіпає. Двигуни по черзі: Gemini, Workers AI, m2m100. Лише безкоштовні рівні.

Відкрити в демо-магазині

Повний перелік

Магазин закритий паролем. Введи 12345, щоб зайти.

Адмінка додатка: покриття, що потребує уваги, розклад синхронізації

Товар-конфігуратор німецькою, разом із текстами метаполів

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

Синхронізація товарів

Одностороннє дзеркало магазину в другий, лише іспанський: товари, колекції, файли, метаобʼєкти, сторінки, меню й блог, з перекладом дорогою.

Звідки беруться дані: Один додаток, встановлений в обох магазинах. Глосарій живе в конфігурації Worker; вбудована адмінка показує, у якому ви магазині, лічильники синхронізованого і останні пʼятдесят синків, і може запустити прохід по контенту.
Як це працює: Вебхуки на master ставлять кожну зміну в чергу; споживач черги записує її в репліку, перемапивши кожен id, файл і посилання на метаобʼєкт. Зміна ціни доходить до репліки за близько десять секунд. Щоденний cron покриває те, що не має вебхуків: сторінки, меню, пости.

Відкрити в демо-магазині Повний перелік

Магазин закритий паролем. Введи 12345, щоб зайти.

Адмінка додатка: master і replica, що вже синхронізовано, двигуни перекладу і глосарій

Пропозиції після оплати

Одна додаткова пропозиція одразу після оплати, залежно від купленого: до замовлення кави пропонуються фільтри зі знижкою 15 %, після відмови — дешевша альтернатива. Згода додає товар у те саме замовлення.

Звідки беруться дані: Воронки в адмінці додатка: тригер (тег або товар), товар пропозиції зі знижкою, заголовок, буліти, бейдж і таймер, опційний даунсел. Живе превʼю в редакторі показує сторінку так, як її малює чекаут.
Як це працює: Post-purchase розширення чекауту запитує у Worker пропозицію для замовлення; той самий код будує превʼю в адмінці, тож вони не розходяться. Потрібне реальне замовлення в демо-магазині, тому в демо це показано в адмінці.

Відкрити в демо-магазині

Повний перелік

Магазин закритий паролем. Введи 12345, щоб зайти.

Після оплати кави: фільтри зі знижкою 15 % і таймером, додаються в те саме замовлення одним кліком

Адмінка додатка: результати і воронки, перевіряються згори; спрацьовує перша, що підходить

Воронка з живим прев’ю сторінки пропозиції, яке рендерить той самий код, що й справжню

Коли показується пропозиція: теги товарів і винятки

Блоки чекауту

Чотири checkout UI extensions у редакторі чекауту Shopify: таймер резерву кошика, платіжні логотипи з набору іконок Shopify, ряд пунктів довіри і картка upsell в один клік.

Звідки беруться дані: Кожен блок ставиться й налаштовується в редакторі чекауту Shopify; тексти — це налаштування блока. Сервера за ним немає.
Як це працює: Блоки рендеряться всередині чекауту Shopify і наслідують його брендинг. Стандартні тексти є англійською, німецькою, французькою та іспанською й перемикаються за мовою чекауту; картка upsell бере назву, фото й ціну обраного варіанта через Storefront API і додає чи прибирає його галочкою.

Відкрити в демо-магазині

Повний перелік

Магазин закритий паролем. Введи 12345, щоб зайти.

Таймер і платіжні логотипи над контактами; картка upsell зверху підсумку

Редактор checkout у Shopify: блок Timer і його налаштування трьома мовами

Сторінка товару і кошик

Основа Dawn, але buy box, галерея і drawer кошика — кастомні блоки, які живляться метаполями й метаобʼєктами, що їх мерчант заповнює в адмінці Shopify.

Конфігуратор товару

Набір «обери N» прямо в buy box: покупець заповнює базові слоти з бокової панелі, за бажанням додає опційні з більшою знижкою, і набір іде в кошик одним рядком. На одному блоці працюють три набори: Cold Drinks Duo (2 + 2), Brew Box (3 + 3) і Breakfast Crate (4 + 4).

Звідки беруться дані: Один метаобʼєкт «Custom set» на товарі (custom.custom_set): скільки базових і опційних виборів, знижка на кожен тип (тут 10 % і 15 %), безкоштовні товари-подарунки, чи додає кнопка панелі одразу в кошик, і категорії — кожна це запис «Products bundle» зі списком товарів або окремих варіантів. Заголовки й тексти кнопок — налаштування блока, тож у кожного набору свої формулювання.
Як це працює: Додаток — лише бекенд: функція Cart Transform, без сервера. Блок теми відповідає за вибір і ціну та передає результат функції у властивостях рядка. Та сама функція обслуговує сторінку Mix & Match.

Відкрити в демо-магазині

Повний перелік

Магазин закритий паролем. Введи 12345, щоб зайти.

Вперше зроблено для BrekkyBowl

Brew Box: три базові слоти й перший опційний, кнопка чекає на вибір

Бокова панель: фільтри категорій, обрані картки зі смужкою −/+, стрічка слотів і кнопка додавання

Обрано чотири позиції: блок ціни показує €43,13, а €48,70 перекреслено

У drawer кошика: один рядок за ціною набору, вибір чипами

На чекауті набір розгорнуто в його товари, разом із безкоштовними фільтрами

Breakfast Crate, 4 + 4: чотири базові вибори в ряд і опційний пʼятий

Cold Drinks Duo, 2 + 2: дві пляшки і третя зі знижкою 15 %

Крок за кроком

Слоти в buy boxБлок малює по слоту на кожен базовий вибір і лічильник («0 of 3 picked»). У сітці стільки колонок, скільки базових виборів, тож опційні стають другим рядом. Наступний опційний слот показує свою знижку (−15 %). Поки не заповнені всі базові слоти, кнопка «в кошик» приглушена і відкриває панель.
Бокова панельБудь-який слот відкриває панель: кнопка-фільтр на кожну категорію, картки товарів і стрічка слотів унизу. Клік по картці кладе одну одиницю в наступний вільний слот; обрана картка отримує смужку −/+ з кількістю; клік по заповненому слоту прибирає його. Спершу заповнюються базові слоти, а якщо прибрати базовий вибір, опційний переходить на його місце.
Жива цінаКожен вибір коштує як його варіант мінус знижка слота: 10 % у базовому, 15 % в опційному. Сума пишеться в блок ціни самої теми як акційна, а сума без знижки стоїть перекресленою, тож buy box завжди показує, скільки набір коштує просто зараз.
Один рядок у кошикуНабір додається одним запитом як товар-обгортка, кількість 1. Вибір їде в прихованих властивостях рядка: _cb_selections містить id варіантів (подарунки першими), _cb_prices — ціну кожного зі знижкою в центах (0 для подарунка), _cb_compare_total — суму без знижки. Відмічені додатки з buy box ідуть у тому самому запиті.
Drawer кошикаDrawer показує один рядок за ціною набору, під ним вибір чипами — мініатюра й назва; безкоштовний товар має позначку «Free». Якщо чипів більше трьох, вони стають повільною рухомою стрічкою, яку можна тягнути.
ЧекаутНа чекауті Cart Transform розгортає рядок у реальні товари за цінами з _cb_prices, подарунок за €0. Тож замовлення містить справжні варіанти: залишки, фулфілмент і звіти працюють по кожному товару, а покупець бачить один набір зі списком позицій під ним.
Три набори, один блокCold Drinks Duo — 2 + 2, Brew Box — 3 + 3 з безкоштовною пачкою фільтрів, Breakfast Crate — 4 + 4, де кнопка панелі лише зберігає вибір. Усе це — дані в метаобʼєкті; три шаблони відрізняються трьома текстами.

Buy box і галерея

Картки варіантів із бейджами, рядок-обіцянка, USP, залишок і терміни доставки, додатки, що йдуть у кошик разом із товаром, липка панель «в кошик» на мобільному і галерея з мініатюрами та точками на мобільному.

Звідки беруться дані: Метаполя товару: заголовок і бейдж обіцянки, USP, термін доставки, підзаголовок, бейдж галереї, списки товарів для крос-селу й апселу. Метаполя варіанта: бейдж у пікері, бейдж ціни, підпис. Кожен блок — блок товару Dawn зі своїми налаштуваннями, тож мерчант вмикає їх у кожному шаблоні окремо.
Як це працює: Відмічені картки додатків приєднуються до запиту форми товару як додаткові позиції, тож один клік додає все. Після додавання drawer показує слайдер апселу для найновішого рядка. На мобільному липка панель зʼявляється, коли основна кнопка виходить з поля зору, і надсилає ту саму форму.

Відкрити в демо-магазині

Магазин закритий паролем. Введи 12345, щоб зайти.

Вперше зроблено для legona

Бейдж-обіцянка, ціна із заощадженням підписки, USP і картки варіантів

Додатки під кнопками з власним вибором варіанта, примітка про доставку і платіжні іконки

Drawer кошика

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

Звідки беруться дані: Товари апселу беруться з метаполя custom.upsell_products товару, доданого останнім; смуга винагород — із метаобʼєктів додатка Cart Milestones; чипи — із властивостей рядка бандлу. Затримка перед стартом стрічки чипів — налаштування теми.
Як це працює: Кожна зміна перемальовує drawer через рендеринг секцій Shopify, тож смуга, рядки й апсел лишаються узгодженими. Поки drawer відкритий, сторінка тримається без стрибка вбік: місце скролбара зберігається.

Відкрити в демо-магазині

Магазин закритий паролем. Введи 12345, щоб зайти.

Вперше зроблено для BrekkyBowl, Health-Bar

Кава в кошику: смуга винагород, картка рядка і слайдер «Goes well with»

Рядок бандлу зі знижкою і рухомою стрічкою чипів

Винагорода в кошику: рядок за €0 з позначкою «Cart reward»

Каталог і сторінки

Фільтри колекцій, підбірники й контентні сторінки — секції теми, перенесені з клієнтських магазинів і зведені до одного бренду; кожен текст редагується в кастомайзері.

Сторінка колекції

Пігулки-фільтри з тегів самої колекції, дропдаун сортування, діапазон цін і липка панель; /collections/all показує весь каталог, згрупований за категоріями, з вступною карткою на кожну групу.

Звідки беруться дані: Пігулки живляться тегами товарів; метаобʼєкт «Promo tile» на колекції (custom.promo_tile) вставляє в сітку промо-картку. Бейджі карток беруться з метаполів товару.
Як це працює: Фільтрація виконується в браузері, стан синхронізується з URL, тож відфільтрований вигляд можна поділитися; діапазон цін — слайдер із двома повзунками.

Відкрити в демо-магазині

Магазин закритий паролем. Введи 12345, щоб зайти.

Вперше зроблено для beneganic, Beautify

Колекція Coffee з пігулками тегів і сортуванням

Підбірник кави

Сторінка смаків замість фільтра: пʼять карток, по одній на манеру пити каву (фруктова й яскрава, шоколад і карамель, мʼяка щоденна, вечірня, холодна й готова), кожна веде прямо до кави, що підходить.

Звідки беруться дані: Кожна картка — блок секції: товар або колекція, куди вести, заголовок, рядок тексту, опційний бейдж і картинка; заголовок, вступ, кількість колонок і пропорції картки — налаштування секції.
Як це працює: Звичайні посилання, відрендерені на сервері, без скриптів: мерчант переписує картки в кастомайзері, коли змінюється асортимент.

Відкрити в демо-магазині

Магазин закритий паролем. Введи 12345, щоб зайти.

Вперше зроблено для DrJuliaHeinrich

Пʼять карток смаку, кожна веде до кави, що підходить

Рецепти з використаними товарами

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

Звідки беруться дані: Метаполя статті: використані товари (список товарів) і мета рецепта (час, порції, складність). Фільтри — блоки секції, кожен це підпис плюс товари, за які він відповідає.
Як це працює: Сторінка рецептів показує статті з їхньою метою і фільтрує їх за використаними товарами; стаття показує використані товари картками під текстом.

Відкрити в демо-магазині

Магазин закритий паролем. Введи 12345, щоб зайти.

Вперше зроблено для BrekkyBowl

Сторінка рецептів із фільтрами за товаром

Головна

Hero-слайдер, рухомий рядок, сітка категорій, слайдер смаків, тизер бандлу, кроки «як це працює», рядки фіч, FAQ і розсилка: девʼять кастомних секцій, кожна редагується в кастомайзері.

Звідки беруться дані: Секції та блоки з колірними схемами теми; картинки з Files магазину, товари й колекції обираються в налаштуваннях.
Як це працює: Слайдери — один спільний веб-компонент; відео вантажаться по кліку; усе рендериться на сервері в Liquid, а невеликі скрипти відповідають лише за стан.

Відкрити в демо-магазині

Магазин закритий паролем. Введи 12345, щоб зайти.

Категорії: одна головна картка на два ряди

Контентні сторінки

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

Звідки беруться дані: Кожна сторінка — JSON-шаблон із секцій; тексти, картинки й товари — налаштування блоків. Форми надсилаються в контактну форму Shopify, тож заявки потрапляють у скриньку магазину.
Як це працює: Кожна секція дотримується одного набору правил (BEM, стан через data-атрибути, без !important, mobile first), тож вони поєднуються на будь-якій сторінці без конфліктів.

Відкрити в демо-магазині

Магазин закритий паролем. Введи 12345, щоб зайти.

Секції теми

Усі кастомні секції теми, їх 53: перенесені з клієнтських магазинів і зведені до одного набору правил та одного вигляду. Кожна має свої налаштування і блоки в редакторі теми; картинка відкриває сторінку, де секція стоїть.

Смуга з таймером

Смуги над хедером, по одній на кожен відлік: свій текст, посилання, колірна схема, дата початку і кінця. Веб-компонент рахує час, і смуга зникає, коли він вийшов.

Хедер із мега-меню

Лого, меню, перемикач мови, AI-пошук і кошик. «Shop» відкриває панель із колекціями і трьома товарами; сторінка під нею затемнена й розмита.

Вперше зроблено для HomeVital, beneganic

Hero

Слайдер із фото чи відео поруч із текстом або під ним: надзаголовок, заголовок, текст і дві кнопки блоками, з точками прогресу і паузою.

Рухомий рядок

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

Вперше зроблено для HomeVital

Категорії

Колекції фото-картками з назвою і кількістю товарів; одну картку можна зробити головною на два ряди, а промо-картка стає в сітку.

Вперше зроблено для HomeVital

Слайдер смаків

Картки товарів із нотами смаку та шкалами обсмаження, кислотності й тіла. Список іде до краю екрана, а перша картка стоїть на краю контенту.

Вперше зроблено для Calmont2.0

Тизер бандлу

Фото, бейдж, заголовок і кнопка, що ведуть до боксу Mix & Match, на градієнті від молока до карамелі.

Вперше зроблено для BrekkyBowl

Кроки

Пронумеровані картки з фото чи відео, заголовком і рядком тексту; ряд на десктопі, слайдер на мобільному.

Вперше зроблено для HomeVital

Рядки фіч

Рядки, де фото і текст чергуються сторонами, з кнопкою; фото на всю ширину ідуть до краю екрана на будь-якому екрані.

Вперше зроблено для HomeVital

FAQ

Акордеон поруч із заголовком. Кожен екземпляр має якір, тож сторінка допомоги веде прямо до групи запитань.

Вперше зроблено для HomeVital

Футер

Картка, що стоїть на дні сторінки: колонки меню, кнопка контакту, платіжні іконки і примітка демо з паролем вітрини.

Вперше зроблено для HomeVital

Hero колекції

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

Сітка колекції

Пігулки тегів, діапазон цін, сортування і липка панель над картками товарів; у сітку можна поставити промо-плитку.

Вперше зроблено для beneganic, Beautify

Медіа з контентом

Фото поруч із надзаголовком, заголовком, текстом і списком із галочками; порядок сторін задається окремо для кожного брейкпоінта.

Профіль смаку

Шкали від одного до пʼяти для кислотності, тіла, солодкості й обсмаження; кожна шкала — блок, що читає значення з метаполя товару.

Таби з інформацією

Таби для походження, обсмаження і гіда із заварювання; таб бере контент із метаполя товару або з власного тексту.

Ми і вони

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

Рутина

Колонка тексту поруч зі слайдером пронумерованих карток товарів із ціною і кнопкою додавання; слайдер виходить за зовнішній край.

Цитата і медіа

Цитата з підписом і фото чи відео однією карткою, медіа впритул до цитати.

Журнал товару

Статті з обраних блогів на сторінці товару, разом із рецептами.

Вперше зроблено для DrJuliaHeinrich

Mega bundle

Конструктор Mix & Match однією секцією: таби категорій, картки товарів зі степерами, панель деталей і фіксована панель зі слотами.

Вперше зроблено для BrekkyBowl

Інфо навпіл

Фото і колонка тексту навпіл: надзаголовок, заголовок, абзаци, виділений рядок і посилання.

Вперше зроблено для Dr.Balwi2.0

Таймлайн

Слайдер розділів — рік, заголовок, текст і фото в кожному — з приглушеними сусідніми картками і лінією прогресу.

Вперше зроблено для BrekkyBowl

Людина

Портрет, список пунктів із галочками і цитата з підписом у боковій картці.

Вперше зроблено для Dr.Balwi2.0

Картки

Картки з фото, надзаголовком, заголовком, текстом і посиланням; заголовок секції може стояти над сіткою або збоку.

Вперше зроблено для Dr.Balwi2.0

Цифри

Ряд чисел, кожне з підписом і приміткою, поруч із фото: тут чотири параметри заварювання.

Вперше зроблено для Dr.Balwi2.0

Переваги

Сітка карток з лінійною іконкою, заголовком і текстом.

Вперше зроблено для Beautify

Галерея

Мозаїка плиток із фото й відео різної форми, з опційними підписами.

Вперше зроблено для Beautify

Відкриті вакансії

Акордеон ролей із тегами команди, місця і типу зайнятості та кнопкою на кожну роль, а в кінці картка «Nothing that fits?».

Вперше зроблено для Beautify

Підбірник

Картки смаку, за кожною товар або колекція, із заголовком, текстом і опційним бейджем.

Вперше зроблено для DrJuliaHeinrich

Сервісний hero

Надзаголовок, заголовок і рядок тексту поруч із круглим фото — для сторінок допомоги, контакту і гурту.

Вперше зроблено для HomeVital

Форма

Форма, зібрана з блоків (текст, число, телефон, вибір тощо), що надсилається в контактну форму Shopify, поруч з інфо-карткою з адресою і годинами.

Вперше зроблено для Eternal-Vitality2.0

Теми підтримки

Картки тем, що ведуть на сторінку або на якір FAQ нижче, а в кінці смуга «Still stuck?» з кнопкою контакту.

Вперше зроблено для Dr.Balwi

Рядок довіри

Один рядок запевнень зі знаком чи лого, одразу під hero.

Вперше зроблено для HomeVital

Чіткі факти

Великий заголовок, далі надзаголовок, підзаголовок, текст і кнопка поруч із фото.

Вперше зроблено для HomeVital

Медіа-слайдер

Колонка тексту поруч зі слайдером фото чи відео з підписами; слайдер іде до краю екрана.

Вперше зроблено для HomeVital

Товар у фокусі

Один товар із перевагами, ціною, кнопкою і великим фото, під ним ряд бейджів.

Вперше зроблено для HomeVital

Текст і відео

Заголовок, текст і кнопка по центру над відео, яке вантажиться по кліку, з постером для кожного брейкпоінта.

Вперше зроблено для HomeVital

Панель фільтрів

Ряд табів з іконками, які ведуть на якір або перемикають spotlight під ним.

Вперше зроблено для Dr.Balwi2.0

Spotlight

Слайдер панелей, по одному походженню на кожну: назва, теза, текст, три факти з іконками, фото і кнопка товару, з нумерованим списком збоку.

Вперше зроблено для Dr.Balwi2.0

Процес

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

Вперше зроблено для Dr.Balwi2.0

Шкала

Градуйована шкала етапів на темній смузі, кожен із назвою, тегом і текстом: тут — як оцінюють зелену каву.

Вперше зроблено для Dr.Balwi2.0

Реєстр

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

Вперше зроблено для Dr.Balwi2.0

Рецепти

Картки рецептів із блогу з пігулками-фільтрами, кожна пігулка — блок, що відповідає за набір товарів.

Вперше зроблено для BrekkyBowl

Текстовий hero

Хлібні крихти, надзаголовок, заголовок і текст із двома кнопками — для сторінок, що відкриваються без фото.

Вперше зроблено для HomeVital

Пошук магазинів

Пошук, список магазинів з асортиментом і мапа з мітками, прочитані з endpoint додатка Store Locator.

Вперше зроблено для Health-Bar

Відео-історії

Головна історія і сітка решти; кожне відео вантажиться по кліку і веде до свого рецепта.

Вперше зроблено для Veneera2.0, Dr.Balwi

Список блогу

Перемикач між блогами, пігулки тем із тегів статей, перша стаття великою і сітка з пагінацією.

Вперше зроблено для Beautify, DrJuliaHeinrich

Стаття

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

Результати пошуку

Сторінка результатів за оверлеєм: таби товарів, статей і сторінок, фільтри і сортування.

Вперше зроблено для Beautify

Хочеш щось подібне у своєму магазині?

Написати мені me@taras-slovak.com