Публикувано:
Когато при нас дойде съществуващ онлайн магазин, първото, което правим, не е да гледаме дизайна. Отваряме продукт от телефона и се опитваме да го купим. Натискаме „Добави в количката“, минаваме към плащането, попълваме адрес. Твърде често някъде по пътя нещо спира: продуктът не остава в количката или поръчката не минава.
Това е проблемът, който виждаме най-често: количката и стъпката за плащане не работят както трябва, а собственикът не знае, защото сам не пазарува в собствения си сайт. Затова краткият отговор на въпроса „какво трябва да има продуктовата страница“ започва оттам. Тя трябва да има бутон, който наистина добавя продукта и води до завършена поръчка. След това идват снимките, ясната цена с доставката, текстът и доверието.
Тук минаваме през всеки елемент на страницата на продукта в реда, в който бихме го проверили на ваш магазин. Ако тепърва правите магазина, вижте и как се прави сайт за онлайн продажби и какво е важно за WooCommerce в България. В екипа на CreateWeb правим и поддържаме онлайн магазини и повечето неща по-долу са излезли от реални проблеми на реални сайтове.
Бързото правило
Добрата продуктова страница отговаря на въпросите на купувача, преди той да ги зададе. Ако някой въпрос остане без отговор, човекът затваря страницата и отива при конкурента. Ето кой елемент на кой въпрос отговаря:
| Въпросът на купувача | Какво на страницата отговаря |
|---|---|
| Работи ли изобщо? | Бутонът, количката и стъпката за плащане |
| Как изглежда наистина? | Снимки от няколко ъгъла, мащаб, увеличение |
| Това ли ми трябва? | Заглавие и описание, писани за човек |
| Колко ще платя общо и кога идва? | Цена, доставка, срок, наложен платеж |
| Мога ли да го върна? | Условията за връщане до бутона |
| Мога ли да им вярвам? | Истински ревюта и данни за фирмата |
Първо проверете дали бутонът работи
Звучи като шега, но не е. Най-скъпата продуктова страница е красивата, на която никой не може да купи.
Причините рядко са сложни. Най-честата при WordPress и WooCommerce е кешът. Плъгинът за бързина запазва готово копие на страниците, за да се зареждат бързо, и ако количката и стъпката за плащане не са изключени от това кеширане, всеки посетител вижда чуждо или празно съдържание. Втората е плъгин за сигурност, който блокира заявките, с които новият блоков checkout изпраща поръчката. Страницата изглежда наред, полетата се попълват, а поръчката не минава. Третата е обновяване на плъгин или тема, след което никой не е пробвал да купи нещо.
Нито едно от тези неща не се вижда в админ панела. Вижда се само с тестова поръчка. Нашият съвет е прост: след всяко обновяване, смяна на хостинг или нов плъгин направете поръчка от телефона си, като обикновен клиент. Добавете продукт, сменете количеството, стигнете до плащането и завършете с наложен платеж. После изтрийте поръчката. Отнема пет минути.
Ако това ви звучи като работа, която не искате да помните всеки месец, тя е част от поддръжката на сайта, която правим за клиентите си.
Снимки: да види продукта, който не може да пипне
В магазин човекът взема продукта, обръща го, пробва го. Онлайн има само снимките. Затова една снимка на бял фон рядко стига.
Какво работи на практика:
- няколко ъгъла и поне един близък кадър на материала, шева, повърхността;
- снимка в мащаб, до ръка, в стая, на човек, за да се разбере колко е голям продуктът;
- увеличение при докосване на телефона, защото там се пазарува най-много;
- собствени снимки, когато е възможно. Снимката от сайта на производителя я имат още двадесет магазина.
Внимавайте с размера на файловете. Снимка от 4 MB прави страницата бавна на мобилен интернет и така губите човека още преди да е видял продукта. Как да ги намалите без видима загуба на качество, обясняваме в статията за оптимизация на изображенията.
Видео има смисъл при по-скъпи или по-сложни продукти: как се сглобява, как се сгъва, как стои на човек. Не е нужно да е професионално. Двадесет секунди от телефона, които показват продукта в ръка, често вършат повече работа от студийния клип.
Заглавие и описание, писани за човек
Заглавието на продукта трябва да казва какво е, за кого е и най-важната разлика. „Дамско зимно яке, водоустойчиво, с качулка“ казва повече от кода на модела. Ако хората търсят продукта по модел или марка, сложете ги също. Така ви намират и в Google, и в търсачката на сайта.
Описанието е мястото, където повечето магазини губят. Най-честата картина: текстът е копиран от производителя или от вносителя. Същият текст стои на още десетки сайтове, Google няма причина да предпочете вашия, а купувачът не научава нищо ново.
Доброто описание започва с две-три изречения за това какво решава продуктът, после дава фактите: размери, материал, съвместимост, какво има в кутията. Фактите са по-лесни за четене като кратък списък. Историята и ползата са по-лесни като обикновен текст. Същата логика стои и зад добрата лендинг страница: първо защо ми трябва, после подробностите.
Цена, доставка и връщане на едно място
Никой не обича изненади на последната стъпка. Ако купувачът разбере колко струва доставката едва когато въвежда адреса, част от хората просто затварят страницата.
Затова до цената покажете и:
- цената на доставката или прага за безплатна доставка, например „безплатна доставка над 50 €“;
- срока: „доставка до 1–2 работни дни“ е по-добре от „бърза доставка“;
- куриерите и начините на плащане, включително наложен платеж, който в България още е много използван;
- условията за връщане, поне в едно изречение и с линк към пълните условия.
Цените показвайте в евро. Ако продавате един продукт в различни разфасовки, цената за килограм или литър помага на хората да сравнят, без да вадят калкулатор. При намаление покажете и старата цена, но само ако е истинска. Законът изисква предишната цена да е най-ниската от последните 30 дни, а купувачите отдавна разпознават „намалението“, което е вечно.
За връщането: при покупка онлайн клиентът има законовите 14 дни за отказ. Не е нужно да го криете в общите условия. Когато е написано ясно до бутона, то успокоява, вместо да плаши.
Бутонът и изборът на вариант
Бутонът „Добави в количката“ трябва да е най-видимото нещо на страницата. Един цвят, който не се ползва за нищо друго, ясен текст и размер, който се натиска лесно с палец. Указанията за достъпност на W3C поставят долна граница за размера на елементите, които се натискат, и препоръчват по-голяма зона за основните бутони. Подробностите са в насоките на W3C за размера на целта. На практика: ако се налага да уцелвате бутона, той е малък.
На телефона помага бутон, който остава видим долу на екрана, докато човекът скролва към описанието и ревютата. Така не се налага да се връща нагоре, когато реши да купи.
При продукти с размери и цветове използвайте бутони, а не падащо меню. В падащото меню не се вижда кое е налично, докато не го отворите. С бутоните всичко е пред очите, а изчерпаните варианти може да стоят видими, но зачеркнати, с опция „Уведоми ме, когато е наличен“. Повече за текста и мястото на бутоните има в статията какво е CTA.
Наличност и свързани продукти
Покажете ясно дали продуктът е наличен и кога ще тръгне. „Наличен, изпращаме днес до 16:00“ казва много повече от зелена отметка. Ако продуктът се доставя от склад на доставчик за три дни, напишете го. Човекът, който знае отрано, не се ядосва. Човекът, който разбира след поръчката, пише лошо ревю.
Под описанието има място за няколко свързани продукта: калъф към телефона, батерии към играчката, резервни филтри. Два-три добре подбрани са полезни, защото спестяват търсене. Цял ред „може да харесате още“ точно до бутона за покупка обикновено разсейва човека в момента, в който е решил да купи.
Ревюта и доверие
Купувачът, който не ви познава, търси доказателство, че други вече са купили и са доволни. Звездите и броят на ревютата близо до заглавието вършат тази работа още в първия екран. Самите отзиви стоят по-надолу, открити, не скрити в раздел, който трябва да се отвори.
Три неща, които съветваме клиентите си:
- отговаряйте и на лошите ревюта. Спокоен отговор на оплакване казва на следващия купувач повече от пет отлични оценки;
- не пишете измислени отзиви. Разпознават се лесно и ако се хванат, щетата е голяма;
- покажете фирмата. Име, адрес, телефон, ЕИК, линк към контакти. За малък магазин това често е по-важно от всякакви значки.
Колкото до значките „сигурно плащане“ и „гаранция“: една-две истински, до бутона, са полезни. Ред от осем лога изглежда като реклама. Сигурното плащане започва от валидния SSL сертификат, не от картинката.
Техническата част, която купувачът не вижда
Две неща не са видими, но влияят и на продажбите, и на Google.
Първото е скоростта на мобилен телефон. Страница с десет големи снимки, три скрипта за чат и няколко плъгина за „увеличаване на продажбите“ се зарежда бавно и човекът си тръгва. Как се мери и какво се оправя, има в статията за Core Web Vitals в WordPress.
Второто са структурираните данни за продукта. Това е невидим код, който казва на Google името, цената, наличността и оценката на продукта, за да ги покаже в резултатите от търсенето. Изискванията на Google са описани в документацията на Google Search Central. WooCommerce и плъгините за SEO ги генерират сами, но си струва да проверите дали цената е в евро и дали наличността е вярна. Същите данни използва и Google Merchant Center, ако показвате продуктите си в Google Пазаруване. Това е част от техническото SEO на магазина, което правим при изработката.
Чести грешки
Първата е да се плати за нов дизайн, преди някой да е направил тестова поръчка от телефон. Втората е описание, копирано от производителя, което стои еднакво на още двадесет сайта. Третата е доставката, която се появява чак на последната стъпка. Четвъртата са снимки, качени директно от фотоапарата, по няколко мегабайта всяка. Петата е кешът, който кешира и количката. Шестата са фалшиви „намаления“ и измислени ревюта, които подкопават доверието към целия магазин.
Често задавани въпроси
Какво трябва да има задължително на продуктовата страница?
Заглавие, което казва какво е продуктът, няколко добри снимки, цена в евро, наличност, бутон за добавяне в количката, цена и срок на доставка, условия за връщане и описание с размерите и материала. Ревютата са силно препоръчителни. Ако някое от тези неща липсва, купувачът трябва да го търси другаде и често не се връща.
Колко снимки да има един продукт?
Няма магическо число. Трябват достатъчно снимки, за да се види продуктът отвсякъде, в мащаб и отблизо. За повечето продукти това са поне четири-пет. При дрехи добавете снимка на човек, при мебели снимка в стая.
Мога ли да копирам описанието от сайта на производителя?
Можете, но губите. Същият текст стои на много други сайтове и Google няма причина да покаже точно вашия. Използвайте фактите от производителя, но напишете началото сами: за кого е продуктът и какво решава.
Трябва ли да показвам цената на доставката на продуктовата страница?
Да. Цената или прагът за безплатна доставка, срокът и куриерите трябва да се виждат до цената на продукта. Изненадата на последната стъпка е една от най-честите причини хората да не завършат поръчката.
Какво да правя, ако още нямам ревюта?
Помолете първите клиенти за отзив няколко дни след доставката, с имейл или съобщение. Дотогава покажете други сигнали за доверие: данни за фирмата, ясни условия за връщане, телефон за връзка. Не пишете отзиви сами.
Бутони или падащо меню за избор на размер?
Бутони. В падащото меню наличните размери се виждат чак след като го отворите, а на телефона това е още едно действие повече. Изчерпаните размери оставете видими и зачеркнати.
Как да разбера дали моята продуктова страница работи добре?
Започнете с тестова поръчка от телефона. После погледнете в Google Analytics колко от хората, които отварят продукта, го добавят в количката и колко от тях завършват поръчката. Голям спад между двете стъпки обикновено сочи доставката, плащането или технически проблем. Когато имате достатъчно посещения, промените може да се сравнят и с A/B тест, но само след като основното работи. Ако искате някой отвън да погледне, това прави нашият анализ на уебсайт.
Заключение: първо поръчка, после дизайн
Когато магазинът не продава, първото желание е нов дизайн. Понякога е нужен. Но в нашия опит по-честият проблем е по-скучен: количка, която не запазва продукта, стъпка за плащане, която не приема поръчката, доставка, която се появява изневиделица. Тези неща не се оправят с нови цветове.
Нашето мнение е, че най-добрата инвестиция в продуктовата страница е петминутна тестова поръчка от телефона, направена редовно. Ако тя минава гладко, тогава имат смисъл по-добрите снимки, по-добрите текстове и новият дизайн. Ако не минава, всичко останало е украса.
Ако искате да погледнем вашия магазин или да направим нов, пишете ни. Можете да видите и проекти от нашето портфолио.
За свързани ресурси вижте още: изработка на онлайн магазин, оптимизация за конверсии, CRO ръководство, UI и UX дизайн, изработка на уебсайт и поддръжка на уебсайт за магазини.
