Односторінковий сайт для продажу товару від а до я

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

Перш за все, давайте завантажити безкоштовно html шаблон одностранічнік, з якого ми і зробимо наш сайт.

Безкоштовний шаблон односторінкового сайту для товарів

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

Головні відмінні риси цього Лендінзі під продаж товарів:

Є місце для великої картинки товару на головному екрані;
Є міні-каталог, щоб ви там розмістили кілька варіантів вашого товару;
Є окремі спливаючі вікна з описом товару і кнопкою «купити»;
Вбудована і налаштована форма зворотного зв'язку (в тому числі «замовити дзвінок»);
Є блок під акцію з налаштованим «вічним» таймером зворотного відліку;
Універсальний дизайн шаблону дозволяє використовувати його для будь-якого товару;
Він безкоштовний =)

Якщо ви завантажили шаблон, то давайте перейдемо до його редагування. І почнемо з найважливішого - першого екрану.

Як оформити головний екран одностранічнік

Як я вже писав раніше в статті «Що Продає структура Лендінзі з 9 блоків». найважливіша частина вашого односторінкового сайту - це перший екран. Тобто це той екран, який відвідувачі бачать при завантаженні сайту.

Цей екран повинен відразу дати відповіді на головні питання:

Що ми продаємо?
Чому це треба купувати саме у нас?
Зв'язок з нами для того, щоб це купити.

У нашого шаблону є достатньо місця для того, щоб відповісти на всі ці питання. Ось, що нам треба поміняти

Давайте все це і зробимо.

Тема з описом товару

Щоб змінити заголовок з описом товару - відкриваємо файл index.html в папці з шаблоном. Відкривати його найкраще за допомогою програми Notepad ++.

Фразу «доставка по Україні безкоштовно» можна залишити (якщо ви дійсно приносите безкоштовно). Якщо ж доставка у вас платна, то зробіть акцент на іншому конкурентну перевагу. Наприклад - «Доставка по Україні за 48 годин».

Тепер переходимо до редагування зображення товару.

Картинка із зображенням товару

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

Тому постарайтеся зробити так, щоб картинка з вашим товаром була:

А. Зрозуміла
Б. Красива

Оскільки ми продаємо якийсь товар, то тут зображення підібрати не так складно, як для будь-якої послуги. Тому не полінуйтеся це зробити. Міняємо зображення ми в папці «images / header». Там воно лежить під назвою «cam.png», і має розмір 451х341 пікселів.

Щоб зайвого не лазити в код - знайдіть зображення такого ж розміру (або ображати своє зображення до такого розміру), і назвіть його точно так же. Потім просто замініть старе зображення на нове. Після цього картинка на головному екрані Лендінзі зміниться на те, що вам потрібно.

Ключові конкурентні переваги (КПП)

Але ось все інше треба обов'язково замінити. Тільки, будь ласка, не пишіть «Швидко - Якісно - Недорого». Вам треба написати такі переваги, щоб вони виділяли вас на тлі конкурентів. А про «швидко - якісно» пишуть усі, кому не лінь.

Ось для прикладу будь ККП можна написати:

Доставка по Україні протягом 48 годин
100% повернення грошей, якщо товар не підійшов
1500 моделей автомобілів в наявність
Продаж безпосередньо від виробника
Сертифікат якості ISO
Поставляємо товар Кремлю і в Букінгемський палац
25 років на ринку
Державна ліцензія номер ...

Всі ці пункти відповідають на питання «чому треба купувати саме у нас». Тобто ми показуємо свої незаперечні переваги перед конкурентами. І робити це треба теж чітко, коротко і переконливо. Ніякі «непереборні можливості», звичайно, не переконають відвідувачів в нашій унікальності.

Форма замовлення

Радує, що в даному шаблоні всі форми заявки по всьому Лендінзі налаштовуються в одному місці. Тобто вам не треба буде повторювати всі ці дії і для «зворотного дзвінка» і для «замовлення по акції». Просто один раз редагуєте «sendMessage.php».

Блок «Акція» і таймер

Ми розібралися з головним екраном, і тепер переходимо до редагування інших елементів. Другий екран - це блок з акцією. Акція покликана мотивувати людей робити замовлення прямо зараз, а не відкладати це на невизначений час.

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

На мій погляд, це не найвдаліший варіант акції. По-перше, мало кому сподобається ідея продавати ваші товари своїм друзям за гроші. А по-друге, немає того, заради чого все затівалося - мотивації оформити замовлення прямо зараз.

До речі, на рахунок таймера. Його можна залишити так, як він є. Тут задано час 24 години. Сумніваюся, що хтось буде сидіти у вас на Лендінзі цілу добу і чекати, що станеться, коли закінчиться час (а після закінчення часу таймер просто оновиться і звіт піде знову).

Але якщо дуже захочеться відредагувати параметри таймера - робиться це в файлі «js / jquery.countdown.js».

Повертаючись до варіантів акції - ось, що можна використовувати:

Подарунок за оформлення замовлення прямо зараз
спеціальна знижка
Спеціальні умови (безкоштовна доставка, розширена гарантія)
2 за ціною 1
та інше

Текст блоку «акція» редагується в тому ж index.html, ось тут (рядки 181 - 194):

А після блоку акції переходимо до міні-каталогу товарів.

Міні-каталог товарів

Одностранічнік для продажу товару відрізняється тим, що там має бути спеціальне місце для опису асортименту. Адже, як правило, товар у нас не один, а в декількох комплектаціях.

Добре, що в нашому шаблоні одностранічнік місце для каталогу якраз передбачено. І зроблено це досить елегантно. Детальний опис товару спливає після натискання кнопки «більше», в окремому вікні. А значить опис не займатиме дорогоцінний місце на Лендінзі.

Крім того, є місце для великої картинки. Його можна використовувати для того, щоб поставити велику і привабливе зображення, або додати УТП до кожної окремої позиції товару. Зверніть увагу, наприклад, на напис в червоній рамці «Вибір програми Квартирне питання».

Зображення товарів редагуються в папці «images / goods».

Як і у випадку з зображенням на головній сторінці - підбирайте картинки такого ж розміру, і давайте їм такі ж назви, а потім замінюйте оригінальні зображення в папці. Це позбавить від зайвого копання в коді html.

Детальні описи товарів редагуються ось тут, під написом «Модальні вікна докладніше» (починаючи з рядка 409):

І так, ви можете видалити або додати позиції товарів. якщо їх у вас більше або менше, ніж в нашому шаблоні. Головне - спочатку збережіть кудись резервну копію документа, щоб швидко все відновити, якщо випадково що-небудь «поламаєте».

Розділ «Чому обирають нас»

Це ще один блок одностранічнік, в якому ми додатково дотискати тих, хто ще не оформив замовлення. Складається він з двох блоків. Перший - це «з якими проблемами стикаються 95% покупців». Другий - це дзеркальний блок «Чому обирають нас».

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

Друге - це простота мови. Це зустрічається дуже рідко, але тут вже в шаблоні написано дуже добре. Наприклад - «80% пропозицій на ринку - посередники. І посередники посередників. Роблять націнку 200-300% ... »Постарайтеся писати так само просто і ємко, як ніби ви просто розмовляєте зі своїм добрим знайомим.

Що стосується технічної частини, то редагуються ці розділи в тому ж самому index.html, ось тут (починаючи з рядка 306):

Інші розділи одностранічнік

Тепер у нас залишилися тільки розділи з сертифікатами та відгуками. На місце сертифікатів можна вставити просто скани ваших статутних документів (свідоцтва про Державну реєстрацію, ІНН). Навіть якщо у вас немає ніяких спеціальних сертифікатів і ліцензій - офіційні документи викличуть додаткове довіру.

З відгуками ви можете чинити так, як вам вели совість. В абсолютній більшості випадків у тих, хто торгує товарами через одностранічнікі, ніяких відгуків немає і бути не може. Люди просто замовляють, а ви просто приносите. Ніяка зворотний зв'язок не збирається. І вже точно ніхто не надсилає вам свої фотографії з розгорнутими відгуками.

Але знову-таки майже на всіх односторінкових сайтах є відгуки зі щасливими обличчями клієнтів. Якби одні й ті ж особи не повторювалися так часто на різних Лендінзі, то ще півбіди.

Але останнім часом я почав помічати, що відгуки працюють в зворотну сторону. Люди не вірять відгуками. І якщо вони бачать фальшиві відгуки, але починають підозрювати, що і все інше, що написано на одностранічнік - неправда (хоча все інше як раз може бути чистою правдою).