Демо-магазин
Ember & Oak — вигаданий кавовий бренд на моєму власному Shopify dev store. Тут немає макетів: каталог заповнений, додатки встановлені, замовлення існують. Відкрий, покидай у кошик, спробуй зламати.
Кожен додаток працює на власному Cloudflare Worker і встановлений у демо-магазин через managed installation Shopify. Вітринна частина живе в темі.
Основа Dawn, але buy box, галерея і drawer кошика — кастомні блоки, які живляться метаполями й метаобʼєктами, що їх мерчант заповнює в адмінці Shopify.
Фільтри колекцій, підбірники й контентні сторінки — секції теми, перенесені з клієнтських магазинів і зведені до одного бренду; кожен текст редагується в кастомайзері.
Усі кастомні секції теми, їх 53: перенесені з клієнтських магазинів і зведені до одного набору правил та одного вигляду. Кожна має свої налаштування і блоки в редакторі теми; картинка відкриває сторінку, де секція стоїть.
Смуга з таймеромСмуги над хедером, по одній на кожен відлік: свій текст, посилання, колірна схема, дата початку і кінця. Веб-компонент рахує час, і смуга зникає, коли він вийшов.
Вперше зроблено для Бренд: краса, DE, Бренд: їжа, DE, Бренд: стоматологія, 5 markets
Хедер із мега-менюЛого, меню, перемикач мови, AI-пошук і кошик. «Shop» відкриває панель із колекціями і трьома товарами; сторінка під нею затемнена й розмита.
Вперше зроблено для Бренд: тести здоровʼя, DE, Бренд: добавки, CH, Бренд: догляд за волоссям, DE, Бренд: краса, DE, Бренд: медичний догляд за шкірою, DE, Бренд: добавки для довголіття, DE, Магазин, Бренд: пухова постільна білизна, DE, Бренд: садові товари, DE, Бренд: їжа, DE, Бренд: дерев’яні різдвяні ялинки, DE, Бренд: стоматологія, 5 markets
HeroСлайдер із фото чи відео поруч із текстом або під ним: надзаголовок, заголовок, текст і дві кнопки блоками, з точками прогресу і паузою.
Вперше зроблено для Бренд: краса, DE, Бренд: їжа, DE, Бренд: добавки, CH, Клуб косметичного бренду, Бренд: медичний догляд за шкірою, DE, Бренд: добавки для довголіття, DE, Бренд: тести здоровʼя, DE, Магазин · 2, Бренд: догляд за волоссям, DE · 2, Магазин, Бренд: пухова постільна білизна, DE, Бренд: садові товари, DE, Бренд: навчання презентаціям, DE, Бренд: сіль, DE, Магазин: вживані дизайнерські меблі, DE, Бренд: стоматологія, 5 markets
Рухомий рядокНескінченний рядок коротких повідомлень, кожне — блок з опційним посиланням і картинкою; швидкість задається окремо для мобільного і десктопу.
Вперше зроблено для Бренд: тести здоровʼя, DE, Бренд: медичний догляд за шкірою, DE, Бренд: добавки для довголіття, DE, Магазин · 2, Бренд: навчання презентаціям, DE
КатегоріїКолекції фото-картками з назвою і кількістю товарів; одну картку можна зробити головною на два ряди, а промо-картка стає в сітку.
Вперше зроблено для Бренд: тести здоровʼя, DE, Бренд: краса, DE, Бренд: медичний догляд за шкірою, DE
Слайдер смаківКартки товарів із нотами смаку та шкалами обсмаження, кислотності й тіла. Список іде до краю екрана, а перша картка стоїть на краю контенту.
Вперше зроблено для Бренд: товари для сну, DE, Бренд: садові товари, DE, Бренд: краса, DE
Тизер бандлуФото, бейдж, заголовок і кнопка, що ведуть до боксу Mix & Match, на градієнті від молока до карамелі.
Вперше зроблено для Бренд: їжа, DE, Бренд: навчання презентаціям, DE
КрокиПронумеровані картки з фото чи відео, заголовком і рядком тексту; ряд на десктопі, слайдер на мобільному.
Вперше зроблено для Бренд: тести здоровʼя, DE, Бренд: медичний догляд за шкірою, DE, Бренд: садові товари, DE, Бренд: навчання презентаціям, DE, Бренд: стоматологія, 5 markets
Рядки фічРядки, де фото і текст чергуються сторонами, з кнопкою; фото на всю ширину ідуть до краю екрана на будь-якому екрані.
Вперше зроблено для Бренд: тести здоровʼя, DE, Бренд: краса, DE
FAQАкордеон поруч із заголовком. Кожен екземпляр має якір, тож сторінка допомоги веде прямо до групи запитань.
Вперше зроблено для Бренд: тести здоровʼя, DE, Бренд: добавки, CH, Бренд: медичний догляд за шкірою, DE, Бренд: добавки для довголіття, DE, Магазин · 2, Бренд: догляд за волоссям, DE · 2, Магазин, Бренд: пухова постільна білизна, DE, Бренд: навчання презентаціям, DE, Бренд: сіль, DE
РозсилкаТемна картка поверх фото з бейджем, заголовком і формою email, яка підписує через customer form Shopify.
Вперше зроблено для Бренд: їжа, DE, Бренд: добавки, CH, Бренд: стоматологія, 5 markets, Бренд: медичний догляд за шкірою, DE
ФутерКартка, що стоїть на дні сторінки: колонки меню, кнопка контакту, платіжні іконки і примітка демо з паролем вітрини.
Вперше зроблено для Бренд: тести здоровʼя, DE, Бренд: краса, DE, Бренд: добавки, CH, Бренд: добавки для довголіття, DE, Магазин · 2, Магазин, Бренд: пухова постільна білизна, DE, Бренд: садові товари, DE, Бренд: стоматологія, 5 markets
Hero колекціїХлібні крихти, кількість товарів, заголовок і опис, який показується повністю, якщо скорочення сховало б лише кілька рядків.
Вперше зроблено для Бренд: їжа, DE, Бренд: медичний догляд за шкірою, DE, Бренд: тести здоровʼя, DE, Бренд: садові товари, DE
Сітка колекціїПігулки тегів, діапазон цін, сортування і липка панель над картками товарів; у сітку можна поставити промо-плитку.
Вперше зроблено для Бренд: добавки, CH, Бренд: краса, DE, Бренд: тести здоровʼя, DE, Бренд: догляд за волоссям, DE, Бренд: стоматологія, 5 markets
Медіа з контентомФото поруч із надзаголовком, заголовком, текстом і списком із галочками; порядок сторін задається окремо для кожного брейкпоінта.
Вперше зроблено для Бренд: краса, DE, Бренд: добавки, CH, Бренд: медичний догляд за шкірою, DE, Бренд: тести здоровʼя, DE, Бренд: сіль, DE, Бренд: стоматологія, 5 markets
Профіль смакуШкали від одного до пʼяти для кислотності, тіла, солодкості й обсмаження; кожна шкала — блок, що читає значення з метаполя товару.
Таби з інформацієюТаби для походження, обсмаження і гіда із заварювання; таб бере контент із метаполя товару або з власного тексту.
Вперше зроблено для Бренд: краса, DE, Бренд: краса зсередини і ззовні, DE, Бренд: добавки для довголіття, DE, Магазин: засоби пересування, DE, Бренд: догляд за волоссям, DE
Ми і вониДві колонки, кожна у своїй колірній схемі: що робить бренд і що альтернатива, списками з галочками і хрестиками.
Вперше зроблено для Бренд: догляд за волоссям, DE, Бренд: їжа, DE, Бренд: добавки для довголіття, DE, Бренд: тести здоровʼя, DE, Бренд: аромати для дому, DE, Бренд: стоматологія, 5 markets, Бренд: сіль, DE
РутинаКолонка тексту поруч зі слайдером пронумерованих карток товарів із ціною і кнопкою додавання; слайдер виходить за зовнішній край.
Вперше зроблено для Бренд: краса, DE, Бренд: медичний догляд за шкірою, DE
Цитата і медіаЦитата з підписом і фото чи відео однією карткою, медіа впритул до цитати.
Вперше зроблено для Бренд: медичний догляд за шкірою, DE
Журнал товаруСтатті з обраних блогів на сторінці товару, разом із рецептами.
Вперше зроблено для Бренд: медичний догляд за шкірою, DE
Схожі товариРекомендації Shopify, доповнені з каталогу, щоб ряд завжди був повний.
Вперше зроблено для Бренд: краса, DE, Бренд: медичний догляд за шкірою, DE, Бренд: добавки для довголіття, DE, Магазин · 2, Магазин
Mega bundleКонструктор Mix & Match однією секцією: таби категорій, картки товарів зі степерами, панель деталей і фіксована панель зі слотами.
Вперше зроблено для Бренд: їжа, DE, Бренд: краса зсередини і ззовні, DE
Інфо навпілФото і колонка тексту навпіл: надзаголовок, заголовок, абзаци, виділений рядок і посилання.
Вперше зроблено для Бренд: догляд за волоссям, DE · 2, Бренд: медичний догляд за шкірою, DE, Бренд: добавки для довголіття, DE, Бренд: тести здоровʼя, DE, Бренд: пухова постільна білизна, DE, Бренд: садові товари, DE, Бренд: стоматологія, 5 markets, Магазин, Магазин · 2, Бренд: сіль, DE
ТаймлайнСлайдер розділів — рік, заголовок, текст і фото в кожному — з приглушеними сусідніми картками і лінією прогресу.
Вперше зроблено для Бренд: їжа, DE, Бренд: медичний догляд за шкірою, DE, Бренд: аромати для дому, DE, Бренд: догляд за волоссям, DE
ЛюдинаПортрет, список пунктів із галочками і цитата з підписом у боковій картці.
Вперше зроблено для Бренд: догляд за волоссям, DE · 2, Бренд: медичний догляд за шкірою, DE, Бренд: добавки для довголіття, DE, Бренд: тести здоровʼя, DE, Бренд: навчання презентаціям, DE, Бренд: сіль, DE
КарткиКартки з фото, надзаголовком, заголовком, текстом і посиланням; заголовок секції може стояти над сіткою або збоку.
Вперше зроблено для Бренд: догляд за волоссям, DE · 2, Бренд: краса, DE, Бренд: їжа, DE, Бренд: добавки, CH, Бренд: медичний догляд за шкірою, DE, Бренд: тести здоровʼя, DE, Магазин · 2, Магазин
ЦифриРяд чисел, кожне з підписом і приміткою, поруч із фото: тут чотири параметри заварювання.
Вперше зроблено для Бренд: догляд за волоссям, DE · 2, Бренд: краса, DE
ПеревагиСітка карток з лінійною іконкою, заголовком і текстом.
Вперше зроблено для Бренд: краса, DE, Бренд: краса зсередини і ззовні, DE, Бренд: медичний догляд за шкірою, DE, Бренд: добавки для довголіття, DE, Магазин · 2, Бренд: догляд за волоссям, DE · 2, Магазин, Бренд: пухова постільна білизна, DE
ГалереяМозаїка плиток із фото й відео різної форми, з опційними підписами.
Вперше зроблено для Бренд: краса, DE
Відкриті вакансіїАкордеон ролей із тегами команди, місця і типу зайнятості та кнопкою на кожну роль, а в кінці картка «Nothing that fits?».
Вперше зроблено для Бренд: краса, DE
ПідбірникКартки смаку, за кожною товар або колекція, із заголовком, текстом і опційним бейджем.
Вперше зроблено для Бренд: медичний догляд за шкірою, DE
Сервісний heroНадзаголовок, заголовок і рядок тексту поруч із круглим фото — для сторінок допомоги, контакту і гурту.
Вперше зроблено для Бренд: тести здоровʼя, DE
ФормаФорма, зібрана з блоків (текст, число, телефон, вибір тощо), що надсилається в контактну форму Shopify, поруч з інфо-карткою з адресою і годинами.
Вперше зроблено для Бренд: добавки для довголіття, DE, Бренд: садові товари, DE
Теми підтримкиКартки тем, що ведуть на сторінку або на якір FAQ нижче, а в кінці смуга «Still stuck?» з кнопкою контакту.
Вперше зроблено для Бренд: догляд за волоссям, DE, Бренд: добавки для довголіття, DE, Бренд: медичний догляд за шкірою, DE
Рядок довіриОдин рядок запевнень зі знаком чи лого, одразу під hero.
Вперше зроблено для Бренд: тести здоровʼя, DE, Бренд: краса, DE, Магазин, Бренд: пухова постільна білизна, DE, Бренд: навчання презентаціям, DE, Бренд: сіль, DE, Бренд: стоматологія, 5 markets
Чіткі фактиВеликий заголовок, далі надзаголовок, підзаголовок, текст і кнопка поруч із фото.
Вперше зроблено для Бренд: тести здоровʼя, DE, Бренд: медичний догляд за шкірою, DE
Медіа-слайдерКолонка тексту поруч зі слайдером фото чи відео з підписами; слайдер іде до краю екрана.
Вперше зроблено для Бренд: тести здоровʼя, DE, Бренд: краса, DE, Бренд: медичний догляд за шкірою, DE, Бренд: навчання презентаціям, DE, Бренд: аромати для дому, DE
Товар у фокусіОдин товар із перевагами, ціною, кнопкою і великим фото, під ним ряд бейджів.
Вперше зроблено для Бренд: тести здоровʼя, DE, Бренд: краса, DE, Бренд: їжа, DE, Магазин · 2, Бренд: стоматологія, 5 markets, Магазин, Клуб косметичного бренду
Текст і відеоЗаголовок, текст і кнопка по центру над відео, яке вантажиться по кліку, з постером для кожного брейкпоінта.
Вперше зроблено для Бренд: тести здоровʼя, DE, Бренд: краса, DE, Бренд: їжа, DE, Магазин · 2, Магазин, Бренд: пухова постільна білизна, DE, Бренд: аромати для дому, DE, Бренд: напої та лайфстайл, DE, Бренд: добавки, CH, Магазин: вживані дизайнерські меблі, DE, Бренд: стоматологія, 5 markets
Панель фільтрівРяд табів з іконками, які ведуть на якір або перемикають spotlight під ним.
Вперше зроблено для Бренд: догляд за волоссям, DE · 2, Магазин · 2, Магазин
SpotlightСлайдер панелей, по одному походженню на кожну: назва, теза, текст, три факти з іконками, фото і кнопка товару, з нумерованим списком збоку.
Вперше зроблено для Бренд: догляд за волоссям, DE · 2
ПроцесПронумеровані кроки з іконкою, заголовком і текстом в один ряд, поруч із заголовком секції.
Вперше зроблено для Бренд: догляд за волоссям, DE · 2, Бренд: краса, DE
ШкалаГрадуйована шкала етапів на темній смузі, кожен із назвою, тегом і текстом: тут — як оцінюють зелену каву.
Вперше зроблено для Бренд: догляд за волоссям, DE · 2
ВідгукиТри картки клієнтів із фото товару, зірками, короткою цитатою, імʼям і посиланням на товар, під заголовком із загальним рейтингом.
Вперше зроблено для Бренд: догляд за волоссям, DE, Бренд: їжа, DE, Бренд: добавки, CH, Бренд: добавки для довголіття, DE, Бренд: садові товари, DE, Бренд: навчання презентаціям, DE, Бренд: медичний догляд за шкірою, DE, Бренд: сіль, DE
Зображення зі шкаламиФото поруч із заголовком і текстом та відсоткові шкали, що заповнюються, коли потрапляють у видимість: тут — скільки дегустаторів погодились.
Вперше зроблено для Бренд: догляд за волоссям, DE, Бренд: їжа, DE, Бренд: стоматологія, 5 markets
ПорівнянняНаша кава поруч зі звичними альтернативами: по картці на кожен варіант зі списком переваг чи недоліків.
Вперше зроблено для Бренд: стоматологія, 5 markets, Бренд: навчання презентаціям, DE
Болі клієнтаКартки з фото для проблем, які клієнти знають зі звичайної кави: слайдер на мобільному і сітка на десктопі.
Вперше зроблено для Бренд: стоматологія, 5 markets, Бренд: навчання презентаціям, DE
Смуга довіриРяд доказів довіри: кожен із круглим фото, великою цифрою і коротким рядком тексту.
Вперше зроблено для Бренд: стоматологія, 5 markets, Бренд: сіль, DE
ІконкиРяд круглих іконок, що накладаються одна на одну, розсуваються при наведенні й показують підказку з підписом.
Вперше зроблено для Бренд: стоматологія, 5 markets
До / післяБанер із заголовком і текстом над слайдерами «до / після», кожен зі своїм підписом.
Вперше зроблено для Бренд: стоматологія, 5 markets
Обрані товариВручну обрані картки товарів, де кожна може мати свій заголовок, бейдж, підзаголовок і текст посилання, або показувати кожен варіант окремо.
Вперше зроблено для Бренд: стоматологія, 5 markets
Спливне вікноКартка пропозиції з кнопкою, що відкриває діалог із підпискою на email; його також можна відкривати раз за сесію після затримки.
Вперше зроблено для Бренд: стоматологія, 5 markets
Показати більше текстуКороткий текст, решта якого схована за кнопкою «Читати далі» і розгортається плавною зміною висоти.
Вперше зроблено для Бренд: стоматологія, 5 markets
РеєстрСписок рядків з іконкою, терміном і поясненням, поруч із заголовком.
Вперше зроблено для Бренд: догляд за волоссям, DE · 2, Бренд: добавки для довголіття, DE
РецептиКартки рецептів із блогу з пігулками-фільтрами, кожна пігулка — блок, що відповідає за набір товарів.
Вперше зроблено для Бренд: їжа, DE, Бренд: добавки, DE, Бренд: садові товари, DE
Текстовий heroХлібні крихти, надзаголовок, заголовок і текст із двома кнопками — для сторінок, що відкриваються без фото.
Вперше зроблено для Бренд: тести здоровʼя, DE, Бренд: медичний догляд за шкірою, DE, Бренд: стоматологія, 5 markets
Пошук магазинівПошук, список магазинів з асортиментом і мапа з мітками, прочитані з endpoint додатка Store Locator.
Вперше зроблено для Бренд: добавки, DE, Бренд: тести здоровʼя, DE
Відео-історіїГоловна історія і сітка решти; кожне відео вантажиться по кліку і веде до свого рецепта.
Вперше зроблено для Бренд: стоматологія, 5 markets, Бренд: догляд за волоссям, DE
Список блогуПеремикач між блогами, пігулки тем із тегів статей, перша стаття великою і сітка з пагінацією.
Вперше зроблено для Бренд: краса, DE, Бренд: медичний догляд за шкірою, DE, Бренд: тести здоровʼя, DE, Магазин, Бренд: пухова постільна білизна, DE
СтаттяХлібні крихти, заголовок, дата і час читання, фото, опційний зміст, кнопки поширення і товари, використані у статті.
Вперше зроблено для Бренд: краса, DE, Бренд: добавки, CH, Бренд: медичний догляд за шкірою, DE, Бренд: тести здоровʼя, DE
Схожі статтіЩе статті під постом — із того самого блогу або з інших.
Вперше зроблено для Бренд: добавки, CH, Бренд: медичний догляд за шкірою, DE, Бренд: пухова постільна білизна, DE
Результати пошукуСторінка результатів за оверлеєм: таби товарів, статей і сторінок, фільтри і сортування.
Вперше зроблено для Бренд: краса, DE
Хлібні крихти, заголовок, дата і час читання, фото, опційний зміст, кнопки поширення і товари, використані у статті.
Магазин закритий паролем. Введи 12345, щоб зайти.
Вперше зроблено для Бренд: краса, DE, Бренд: добавки, CH, Бренд: медичний догляд за шкірою, DE, Бренд: тести здоровʼя, DE
