Шаблони інтернет-магазинів: живі демо з каталогом, кошиком і оформленням
Магазин не можна оцінити з картинки: у ньому важливо, як шукається товар, скільки кроків до кошика й що видно на сторінці оформлення. Тому кожен шаблон у цій категорії розгорнутий у справжній магазин із шести сторінок — головна, каталог, картка товару, кошик, оформлення, контакти. Фільтри працюють, товар додається, промокод рахується, поля у формі перевіряються.
40 шаблонів у категорії «Інтернет-магазини»
Кожен відкривається як справжній сайт — з компʼютера й з телефона. Натисніть картку, щоб прочитати опис шаблона, або код мови під нею, щоб одразу відкрити демо потрібною мовою.
Показано 20 з 40 шаблонів категорії.
Інтернет-магазини: що враховано в цих шаблонах
Інтернет-магазин відрізняється від сайту послуг однією річчю: людина має самостійно дійти від «цікаво» до «оплачено», і кожен зайвий крок на цьому шляху коштує замовлення. Тому в цих шаблонах ми проєктували не красу першого екрана, а маршрут: як звузити каталог до трьох потрібних позицій, як показати ціну й наявність, як не загубити кошик при переході між сторінками.
Ніші тут різні навмисно — від магазину одягу до оптового постачальника пакування, — і кожна вимагає свого. Магазину шин потрібен підбір за авто, магазину кави — підписка, магазину комп'ютерів — конфігуратор із перевіркою сумісності, оптовику — ціна від кількості й мінімальна партія. Оберіть той шаблон, де вже вирішене ваше головне питання: решту ми доробимо під ваш асортимент.
Що має бути в інтернет-магазині, який продає
Це не список модних блоків, а мінімум, без якого магазин змушує людину думати замість того, щоб купувати. Усе перелічене вже зроблено в демо — відкрийте будь-яке й перевірте самі.
- Каталог із фільтрами, а не сторінка «наш асортимент». Коли позицій більше двадцяти, людина не гортає — вона фільтрує. Розмір, ціна, бренд, наявність, сумісність із її моделлю.
- Картка товару, яка відповідає на питання до кліку «купити». Фото з кількох ракурсів, характеристики, наявність, строк доставки, повернення. Питання, на яке не відповіла картка, стає дзвінком — або відмовою.
- Кошик, який не зникає. Товар лишається в кошику після переходу на іншу сторінку й після повернення наступного дня. У демо це працює на справжньому сховищі браузера.
- Оформлення без реєстрації. Ім'я, телефон, спосіб доставки й оплати. Обов'язкова реєстрація перед покупкою — найдорожча звичка магазинів, які «зроблені на майбутнє».
- Чесна ціна й доставка до кнопки оплати. Сума, яку людина побачить у кінці, має збігатися з тією, що вона бачила на початку.
- Адаптив під телефон. Більшість переглядів магазину — з телефона в дорозі. Фільтри мають відкриватись пальцем, а кнопка «купити» — бути в зоні великого пальця.
- Адмінка, у якій ви самі міняєте товари й ціни. Магазин, за кожною правкою якого треба писати програмісту, помирає за півроку.
Усі шаблони категорії списком
Якщо зручніше читати, а не гортати картинки: назва, тип сайту й головна ідея кожного макета.
| Шаблон | Тип сайту | Головна ідея |
|---|---|---|
| Вітрина — магазин одягу | Інтернет-магазин | Смуга категорій, що прокручується пальцем, і швидкий перегляд картки без переходу |
| Лукбук — магазин взуття | Інтернет-магазин | Точки-мітки на фото: тап по кадру відкриває картку взуття з цього образу |
| Маркетплейс — магазин електроніки | Інтернет-магазин | Живі фільтри й порівняння товарів — обидва працюють на сторінці без перезавантаження |
| Один товар — магазин одного гаджета | Інтернет-магазин | Перемикач комплектацій, що на місці змінює ціну й склад набору |
| Журнал — магазин косметики | Інтернет-магазин | Добірки товарів прямо всередині статей і підбір догляду за типом шкіри |
| Преміум — ювелірний магазин | Інтернет-магазин | Картки-експонати з підсвіткою й розділ про камені та проби металу |
| Неон — магазин геймерських аксесуарів | Інтернет-магазин | Відлік до кінця дропу і збірки товарів «під що граєш» |
| Підбір — зоомагазин | Інтернет-магазин | Підбір корму за трьома питаннями просто на першому екрані |
| Пошук за моделлю — запчастини до побутової техніки | Інтернет-магазин | Три селекти пошуку за моделлю й підказка, де знайти номер деталі на техніці |
| Сезон — магазин квітів і подарунків | Інтернет-магазин | Вибір дати й часового вікна доставки прямо на першому екрані |
| Скандинавський — меблевий магазин | Інтернет-магазин | Перемикач «у інтер'єрі / на білому» на картках і розрахунок доставки з підйомом |
| Бенто — товари для дому | Інтернет-магазин | Мозаїка з плиток різного розміру — уся головна вміщується в один погляд |
| Горизонт — спортивні товари | Інтернет-магазин | Горизонтальна прокрутка на комп'ютері, що на телефоні стає звичайною вертикальною |
| Каталог перший — книгарня | Інтернет-магазин | Жанрові вкладки й дерево розділів замість декоративного першого екрана |
| Конфігуратор — магазин комп'ютерів | Інтернет-магазин | Живий конфігуратор із підрахунком ціни й перевіркою сумісності |
| Підписка — магазин кави | Інтернет-магазин | Три тарифи підписки з частотою доставки й можливістю поставити на паузу |
| Опт — оптовий магазин пакування | Інтернет-магазин | Таблиця оптових цін від обсягу й окремий вхід для дилерів |
| Локальний — магазин фермерських продуктів | Інтернет-магазин | Вибір району й точки самовивозу з наявністю на сьогодні |
| Кіно — магазин велосипедів | Інтернет-магазин | Рухома сцена на першому екрані й підбір за зростом і стилем їзди |
| Застосунок — магазин дитячих товарів | Інтернет-магазин | Нижня панель навігації й категорії-сторіз — головна працює як застосунок |
| Підбір під ціль — магазин спортивного харчування | Інтернет-магазин | Вибір цілі на першому екрані перебудовує добірку товарів і підказує дозування |
| Купити або орендувати — магазин електроінструменту | Інтернет-магазин | Перемикач «купити / орендувати» перебудовує ціни в усьому каталозі |
| Комплект — магазин домашнього текстилю | Інтернет-магазин | Вибір розміру комплекту одразу міняє склад набору й ціну без переходу на іншу сторінку |
| Скільки треба — магазин фарб і будматеріалів | Інтернет-магазин | Калькулятор витрати рахує кількість банок і суму за площею й кількістю шарів |
| Форма обличчя — магазин окулярів і оптики | Інтернет-магазин | Вибір форми обличчя фільтрує оправи, а не просто показує пораду текстом |
| Вітрина під склом — магазин годинників | Інтернет-магазин | Перемикання ремінців на першому екрані міняє вигляд моделі одразу |
| Скільки вас за столом — магазин настільних ігор | Інтернет-магазин | Три повзунки — гравці, вік, час партії — підбирають гру замість продавця |
| Послухати — магазин музичних інструментів | Інтернет-магазин | Прослуховування звучання прямо в картці каталогу |
| За авто — магазин шин і дисків | Інтернет-магазин | Два шляхи підбору — за маркуванням і за маркою авто — на одному екрані |
| Збери набір — магазин посуду | Інтернет-магазин | Конструктор набору: предмети додаються плитками, сума й знижка рахуються на льоту |
| Спробувати — магазин чаю | Інтернет-магазин | Вибір смакового напрямку й пробні набори як перший крок замість повної упаковки |
| Сирна тарілка — магазин сирів і делікатесів | Інтернет-магазин | Конструктор сирної тарілки з вагою, сумою й підказкою, чого бракує |
| Сезон — магазин товарів для рибалки й туризму | Інтернет-магазин | Чекліст спорядження на вихід, який складається в кошик однією кнопкою |
| Календар робіт — магазин товарів для саду й городу | Інтернет-магазин | Календар робіт на поточний місяць підбирає товари під сезон |
| Опт по школах і офісах — оптовий магазин канцтоварів | Інтернет-магазин | Три цінові пороги в картці з перерахунком суми від кількості |
| З упаковкою — магазин подарунків | Інтернет-магазин | Вибір упаковки й листівки прямо в картці з прозорою сумою |
| Свій розмір — магазин білизни | Інтернет-магазин | Визначення розміру за двома мірками фільтрує каталог до наявного |
| Сценарії — магазин розумного дому | Інтернет-магазин | Готові сценарії, що розкриваються переліком пристроїв із загальною сумою |
| За віком — магазин дитячого харчування | Інтернет-магазин | Стрічка віку в місяцях фільтрує весь каталог під дитину |
| Один примірник — магазин вінтажу й речей у єдиному екземплярі | Інтернет-магазин | Стан речі за шкалою й реальні заміри замість умовного розміру |
Коли магазин потрібен, а коли ні
Магазин виправданий, коли у вас є асортимент, який людина вибирає сама, і ви готові вести залишки. Якщо позицій десять і кожне замовлення все одно узгоджується голосом — дешевший і швидший шлях це корпоративний сайт із каталогом-вітриною та формою заявки: він коштує від €290 і запускається за 7–10 днів проти від €490 і чотирьох тижнів у магазина.
Зворотний випадок теж буває: справа виглядає як послуга, а поводиться як магазин. Так працюють підписки на каву, готові набори, оренда інструменту погодинно. Якщо у вас саме так — беріть шаблон магазину, у нас у категорії є демо з підпискою, орендою й набором «збери сам».
Скільки коштує запуск
Ціна залежить не від категорії, а від типу сайту: візитка й корпоративний сайт коштують однаково, магазин дорожчий, бо в ньому є каталог, кошик, оплата й адмінка.
| Тип сайту | Ціна | Строк | Що входить у запуск |
|---|---|---|---|
| Інтернет-магазин | від €490 | від 4 тижнів | Магазин за цим шаблоном: каталог, кошик, оплата, доставка, адмінка |
Складні модулі — конфігуратор, підписка, оптовий кабінет, інтеграція з обліковою системою — рахуємо окремо після брифу. Повний прайс студії лежить на сторінці цін.
Питання та відповіді
Що з цих шаблонів магазину працює по-справжньому, а що показове?
Працює вся механіка вітрини: фільтри, сортування, картка товару, кошик, промокод, підрахунок суми, перевірка полів у формі оформлення. Показові — назви магазинів, товари, фото й ціни: вони потрібні, щоб макет виглядав закінченим. Оплата в демо не підключена, заявка нікуди не йде.
Скільки товарів витримає такий магазин?
Шаблон не обмежує кількість: обмежує рушій, який ми ставимо під ваш обсяг. До кількох тисяч позицій це звичайна CMS із каталогом, більше — потрібен окремий пошук і вивантаження від постачальника. Скажіть кількість позицій і звідки береться прайс — на брифі порахуємо.
Чи можна підключити оплату карткою й доставку Новою поштою?
Так, це стандартна частина запуску: онлайн-оплата, розрахунок доставки й номер накладної в замовленні. Для цього потрібні ваші реквізити й договір із платіжним сервісом — самі документи оформлюєте ви, підключення й перевірку робимо ми.
Чи можна взяти вигляд одного шаблона, а каталог з іншого?
Так. Блоки в наших макетах сумісні: перший екран з одного, фільтри з другого, картка товару з третього — звична річ. У боті напишіть, що саме сподобалось у кожному.
Інші категорії шаблонів
Якщо ваша справа лежить на межі двох ніш — подивіться сусідні добірки: блоки в наших макетах сумісні, і зібрати сайт із двох шаблонів звична річ.
Уся галерея шаблонів — 100 макетів в одному місці з фільтрами за типом, темою й мовою демо.
Не обрали шаблон — опишіть справу
Розкажіть у двох реченнях, чим займаєтесь і хто ваші клієнти. Ми скажемо, який макет із категорії «Інтернет-магазини» підійде і що в ньому доведеться змінити під вас. Це безкоштовно й ні до чого не зобовʼязує.
Запитати про шаблон усі контакти студії