Nikde neovplyvňuje dizajn vašej webovej stránky a používateľská skúsenosť viac predaj ako na vašich produktových stránkach. Sú to digitálne „vitríny“, ktoré predstavujú vaše produkty v tom najlepšom svetle a motivujú nakupujúcich, aby stlačili tlačidlo „Pridať do košíka“. Efektívne produktové stránky sú krásne, informatívne a prehľadné. Vyjadrujú tiež vašu jedinečnú značku.
Nie je dôvod znovu objavovať koleso, pokiaľ ide o (pre)dizajn vašich produktových stránok WooCommerce. Namiesto toho získajte dizajnovú inšpiráciu od majiteľov obchodov s výnimočnými stratégiami. Potom využite možnosť prispôsobenia produktových stránok WooCommerce. Tu je päť inšpiratívnych, prispôsobených produktových stránok WooCommerce spolu s doplnkami, nástrojmi a tipmi, ako začať ešte dnes.
Vylepšite obrázky svojich produktov
Vaša kópia produktu môže byť na mieste, ale ak sú vaše obrázky vypnuté, predaj utrpí. Obrázky vašich produktov sa predávajú viac, ako by ste kedy dokázali s kvetnatou prózou. Vynaložte dostatok zdrojov na získanie snímok najvyššej kvality, čo si môže vyžadovať najatie profesionálneho fotografa.
Jednou zo stránok WooCommerce, ktorá správne zobrazuje obrázky, je veľkoformátová tlačiareň Gorilla Printing. Produktové stránky spoločnosti prezentujú svoje nápisy, obrazovky a bannery z rôznych uhlov a kontextov. Čím viac spôsobov môže zákazník zobraziť produkt, tým istejšie sa bude cítiť pri nákupe.
Gorilla Printing používa štandard navigácia miniatúr produktu bočný panel, ktorý sa štandardne dodáva so šablónami WooCommerce, ako sú Výkladňa. Hoci bočný panel nie je prispôsobený, ich dizajnéri vyberajú dobré sekundárne obrázky, ktoré zobrazujú viaceré pohľady na produkty, hardvérové príslušenstvo, možnosti umiestnenia a zavesenia.
Obrázok swap pluginy môže zobraziť sekundárny obrázok produktu, keď používateľ umiestni kurzor myši na váš produkt na stránke kategórie alebo inej taxonómie (napríklad zobrazenie zadnej časti trička, keď používateľ umiestni kurzor myši na obrázok). Ak sa chcete vzdať doplnkov a prijať viac prispôsobený prístup, existuje aj vlastné kódovanie pre výmenu obrázkov pri prechode.
Uistite sa, že zachytávate obrázky s dostatočným rozlíšením na zobrazenie podrobností o vašom produkte. Ale pamätajte: Obrázky s vysokým rozlíšením sú veľké súbory. Môžu spomaliť rýchlosť načítania stránky. Vyhnite sa tomu optimalizácia obrázkov na stránke produktu.
Vylepšite popis produktu
Ak máte radi jemne vyrobené kokteilové toniká a rovnako účinné popisy produktov, nehľadajte ďalej Jack Rudy Cocktail Co.
Efektívne popisy produktov obsahujú krátku a dlhú časť. Krátka reklama slúži na rýchle skenovanie stránok, zatiaľ čo dlhšia časť ide viac do hĺbky. Jack Rudy Malá šarža Grenadíny Produktová stránka je dobrým príkladom tohto dvojdielneho prístupu.
Krátky popis poskytuje užitočné a relevantné informácie: „Naša malá šarža grenadíny je náš druhý produkt“. Záver ďalej pridáva nádych značky – „prácu lásky“ – naznačujúci vášeň a remeselnú zručnosť spoločnosti.
Nasleduje dlhšia časť, ktorá poskytuje relevantné fakty o výrobe produktu a pridáva lákavý popis chuťového profilu ich grenadíny – s použitím silného, evokujúceho jazyka ako „plná chuť“, „svetlý“ a „tropický záver“.
V popisoch produktov povedzte príbeh o svojom produkte, ktorý presahuje jeho základné vlastnosti. Popisy produktov Jacka Rudyho ilustrujú, ako sprostredkovať značku na stránke vášho produktu – ako prispôsobiť svoju spoločnosť, aby sa nakupujúci cítili pohodlnejšie pri nákupe od vás. Vyvolanie pozitívnych pocitov v mieste predaja je účinný spôsob, ako zvýšiť predaj.
Otestujte svoje cenové umiestnenie
Prvé dva kroky pri vyhľadávaní nakupujúceho na stránke produktu zvyčajne prebiehajú takto: „Je toto to, čo hľadám?“ a potom “Môžem si to dovoliť?” Ak ceny vašich produktov u nakupujúcich nevyskočia, na začiatku ich frustrujete. Kladiete zbytočnú prekážku v ich misii kúpiť. Nestrácajte predaje kvôli tejto jednoduchej dizajnovej chybe.
Mnoho tém WooCommerce umiestňuje cenu vedľa názvu produktu, v hornej časti stránky a na pravej strane – miesto, ktoré najlepšie zodpovedá ako vlastne skenujeme webovú stránku—a vyzerá porovnateľne s väčšinou iných webových stránok elektronického obchodu.
Príklad ceny z podradenej témy Lekárne pre výklad
Osvedčené postupy tiež hovoria, že ak chcete používateľovi uľahčiť rýchle pochopenie ceny, môžete prispôsobiť produktové stránky WooCommerce tak, aby:
- Cena je zobrazená väčším písmom
- Text je tučný
- Farba písma je dobre viditeľná
Všetky tri sú relatívne jednoduché zmeny CSS na väčšine webových stránok.
Niektorí online predajcovia však radi Osana urobili ďalší krok pri formátovaní svojich cien. Osana – spoločnosť, ktorá predáva mydlo odpudzujúce komáre – používa škatule na mieru, ktoré používateľom pomáhajú okamžite zistiť, ako im nákup 4 balenia mydla v porovnaní so štvrťročným predplatným šetrí peniaze. Väčšina predvolených tém by používala rozbaľovací volič na zmenu jednotiek, boxov atď. a prinútila zákazníka, aby túto rozbaľovaciu ponuku preskúmal, aby porozumel cenovým možnostiam. Tu je už uvedená každá dostupná možnosť a jej zodpovedajúca cena.
Aby Osana ešte viac pomohla zákazníkovi, pridáva do cenového balíka ikonu. Ikona v spojení s názvom produktu rýchlo oznamuje, ktorý produkt je vybraný. Akoby to nestačilo, obsahujú aj prepínače a funkciu žltého zvýraznenia, ktoré ukazujú, ktorý produkt je momentálne pripravený na pridanie do košíka.
Firme, ktorá zarába lepšie celoživotné hodnoty zákazníkov z hromadných objednávok a odberov, venovanie času testovaniu a navrhovaniu vlastných rozložení pomôže zvýšiť mieru konverzie.
Predávajte svoje produkty online bez starostí
Náš hosting, oficiálne odporúčaný spoločnosťou WooCommerce, je určený pre online podniky, ako je ten váš
Venujte viac času odporúčaniam súvisiacich produktov
Dizajnérka a autorka Zakiyya Rosebelle je zakladateľkou Šťastný Rosy Day, online dodávateľ papiernictva a časopisov so sídlom v San Franciscu. Majitelia inteligentných obchodov, ako je Rosebelle, používajú na svojich produktových stránkach funkciu „Súvisiace produkty“ na predaj alebo krížový predaj zákazníkom. Stratégiu upsellingu „kupujú aj ľudia“ ovládajú megaspoločnosti ako Amazon, no rovnako efektívne ich dokážu nasadiť aj menšie obchody ako Happy Rosy Day.
Happy Rosy Day má minimalistický prístup k dizajnu stránky. Stránky majú čisté biele pozadie, minimum textu a jednoduché rozloženie súvisiaceho produktu. „Zistila som, že najefektívnejšia je čistá, jednoduchá a citlivá stránka produktu,“ hovorí Rosebelle. „Svoje produktové stránky navrhujem tak, aby boli veľmi jednoduché a ľahko použiteľné, no zároveň sú krásne značkové a optimalizované.“
Rosebelle sa rozhodla uviesť tri súvisiace produkty na svojej prispôsobenej produktovej stránke WooCommerce, čo je dobrý počet na skenovanie stránky vodorovne (stolný počítač) alebo zvisle (mobil). Obrázky sú krásne a súvisia s hlavným produktom. Neobťažujte nakupujúcich produktmi, ktoré nesúvisia s ich históriou vyhľadávania. Taktiež pri rozhodovaní o počet produktov, ktoré sa objavianedávajte zákazníkom príliš veľa možností.
Niektoré šablóny stránok produktu automaticky stiahnu produkty s podobnými značkami alebo kategóriami do sekcie súvisiacich produktov. Pridaním konkrétnych produktov do kategórií alebo pridelením značiek môžete ovplyvniť, aké súvisiace položky sa zobrazia.
Môžete tiež manuálne spájať položky ako up-sell alebo cross-sell. Up-sells sú podobné položky – vyššej kvality a ceny – ktoré môžete odporučiť zákazníkom na stránke vášho produktu. Krížové predaje sú bezplatné položky, o ktoré môže mať kupujúci záujem po zakúpení produktu. Keď si napríklad zákazník pridá do nákupného košíka na stránke so športovými potrebami horský bicykel, dostane ponuky krížového predaja na cyklistickú prilbu, jazdecké rukavice a zámok na bicykel.
Nastavenia up-sell aj cross-sell vám dávajú viac energie na to, aby ste naviedli nakupujúceho k nákupu. Zvážte ich použitie, keď nastavenie súvisiacich produktov na WooCommerce.
Skontrolujte rozloženie stránky
Dobrý rozloženie stránky produktu má prvky, ktoré fungujú ako celok, nie sú náhodne umiestnené tam, kde je miesto. Stránky majú dve základné sekcie: obsah „nad záhybom stránky“ – čo je viditeľné pri načítaní stránky – a obsah „pod záhybom stránky“ – čo musí kupujúci posunúť nadol, aby ho videl.
Obsah nad záhybom stránky robí predaj, zatiaľ čo obsah pod záhybom stránky je doplnkový a pridáva hodnotu, napríklad sociálne dôkazy alebo navrhované produkty. Nad záhybom stránky uveďte všetky informácie, ktoré kupujúci potrebuje na okamžitý nákup, ako napríklad:
- Obrázok produktu
- Názov produktu
- Popis
- tlačidlo „Pridať do košíka“.
- Výber veľkosti, farby a množstva
Miesto starostlivosti o pleť ScrubzBody športové rozloženie stránky produktu, ktoré je ideálne pre akúkoľvek stránku elektronického obchodu. Zakladateľka Roberta Perry vysvetľuje, ako ich výskum ovplyvnil dizajn stránky:
„Najskôr sme urobili zákaznícke prieskumy. Potom sme urobili tepelné mapy. Najväčšia vec, ktorú sme zmenili, boli menu. Mali sme rozbaľovaciu a potom bočnú ponuku typu. Navrchu som mal príliš veľa podnadpisov. Išli sme do a Nastavenie Mega Menu a upravené tak, aby veci boli na miestach, kde ich ľudia hľadali… použili sme Hymna Detská téma pre Divi s WooCommerce ako s naším elektronickým obchodom. Milujem flexibilitu a môžem ľahko vykonávať zmeny a doplnky.“
Rozloženie ScrubzBody nad záhybom obsahuje názov produktu v hornej časti. Neďaleko je cena jasne viditeľná. Sekcie s popisom a prísadami sú samostatné časti, ktoré pomáhajú nakupujúcim nájsť informácie, ktoré potrebujú. A tlačidlo „Pridať do košíka“ sa vyníma vo fialovej farbe značky vedľa obrázka produktu.
Perryho stránka obsahuje aj a efekt priblíženia myšou poskytnúť zákazníkom podrobnejší pohľad na produkty. Tradičné funkcie rýchleho zobrazenia „lightbox“. vyžadujú otvorenie kontextového okna na bližšiu kontrolu.
Niektorí zákazníci nemusia rozumieť požadovanému rozhraniu zväčšenia kliknutím. Priblíženie po prejdení myšou však vyzýva zákazníkov, aby preskúmali vaše produkty jednoduchým pohybom ukazovateľa.
Pod záhybom obsahuje Perry a sekcia vlastná karta produktu s ďalšími informáciami o produkte, inštruktážnym videom a recenziami zákazníkov. Oblasti obsahu s kartami, ako sú tieto, ponúkajú zákazníkom cenné informácie v kompaktnej forme – pri používaní mobilnej verzie webu nie je potrebné nekonečné posúvanie.
Rozloženie stránky produktu ScrubzBody funguje dobre, pretože jeho dizajnéri využívajú užitočné doplnky WooCommerce, dodržiavajú najlepšie postupy pri navrhovaní webových stránok a poskytujú zákazníkom dostatok informácií, aby sa pri nákupe cítili sebavedomo.
Skôr ako začnete písať nový kód
Skôr ako začnete meniť veci na stránke svojho produktu, venujte chvíľu zhromaždeniu užitočných údajov, ktoré vám pomôžu pri výbere dizajnu. Nie je potrebné meniť veci, ktoré fungujú.
Tepelné mapy
Nástroje spätnej väzby na web, napr Hotjar vám poskytne údaje o tom, ako návštevníci interagujú s vašou stránkou. Budete môcť vidieť, na ktoré konkrétne prvky stránky kupujúci klikajú najviac a na ktoré najmenej. Možno zistíte, že klikajú na slovo alebo obrázok a očakávajú odkaz, keď žiadny neexistuje.
Pozrite si, čo robí Amazon
Online predajcovia ako Amazon, Walmart a Kohl’s nastavili štandard pre online nakupovanie a navrhli každý digitálny palec svojich webových stránok pre maximálny efekt. Výsledkom je, že ich zákazníci očakávajú špecifické rozloženia, prvky a skúsenosti zo stránky produktu. Napodobňujte vzhľad a dojem týchto maloobchodných gigantov. Zahrňte bežné funkcie, ako napr vzorkovníky variácií aby zákazníci mohli vidieť vaše produkty v rôznych farbách, vzoroch a materiáloch.
Zálohujte a otestujte svoje stránky
Nestrácajte čas a peniaze. Pred vykonaním zmien na vašich produktových stránkach si zálohujte priečinok wp-content a databázu WordPress. Ak sa niečo pokazí, môžete sa vrátiť aspoň k predchádzajúcim verziám. Tiež nechcete plytvať zmenami dizajnu, pretože sú v rozpore s aktualizáciami WordPress alebo doplnkov. Vytvorte skúšobnú kópiu svojej webovej lokality a otestujte jej funkčnosť pred jej zverejnením.
Obrázky produktov, popisy a umiestnenie cien môžu byť pri správe vášho internetového obchodu často posunuté nadol v rebríčku priorít. Ale „malé“ dizajnové prvky, ako sú tieto, majú veľký vplyv na predaj. Tým, že si nájdete čas na doladenie svojej stránky elektronického obchodu, ukážete svojim zákazníkom, že robíte ďalší krok, aby boli ich nákupné skúsenosti výnimočné. Odmenia vás väčším predajom. Neprestaňte však len s týmito návrhmi dizajnu. Existuje množstvo ďalších dizajnových prvkov na optimalizáciu pre vašu stránku WooCommerce.
Ste pripravení posunúť svoj obchod na novú úroveň?
Vybudovali sme vysokovýkonnú platformu, ktorá dokáže radikálne pomôcť pri nakladaní vášho obchodu a zároveň ľahko zvládnuť veľkú dopravnú záťaž. Naša platforma je štandardne vybavená Jilttakže môžete okamžite začať obnovovať opustené vozíky a získať späť stratené tržby.
Získajte viac informácií o našich plánoch spravovaného WooCommerce.
