Kaip sukurti lookbook'ą PrestaShop parduotuvėje: prekių sąrašas, filtrai ir keli kambariai

Lookbook'as – tai stilizuotų nuotraukų rinkinys, kuriame prekės parodytos taip, kaip žmonės jas naudos. Daugumoje PrestaShop parduotuvių jis virsta paprasta nuotraukų galerija: malonu pavartyti, bet nieko nenupirksi.

Šiame gide lookbook'ą paverčiame veikiančiu pardavimų puslapiu iš trijų dalių: prekių sąrašo, kuris yra šalia nuotraukos ir sinchronizuotas su ja, filtrų, kurie atrenka prekes pagal tipą, ir scenų, kurios sudeda kelis kambarius ar derinius į vieną žemėlapį. Gidas tęsia „shop the look“ gidą, tad jei nuotraukoje dar nesate pažymėję prekių, pradėkite nuo jo.

Prekių sąrašas: lookbook'as šalia nuotraukos#

Prekių sąrašas parodo visas žemėlapyje susietas prekes sąrašu šalia paveikslėlio. Jis sinchronizuotas į abi puses: užveskite pelę ant prekės sąraše, ir nuotraukoje užsidegs jos taškas; užveskite ant taško, ir sąraše išsiskirs jo prekė.

Įjunkite jį skiltyje Styles → Card (Tooltip) Style → Lookbook (synced product list):

• Show a product list beside the map: įjungta.
• List side: dešinėje arba kairėje.
• List width: numatytasis 320 px.
• Mobile items shown: kiek prekių telefonuose matyti iki rodyklių, numatytasis 3.

Paspaudus prekę sąraše, atsidaro ir prisitvirtina jos kortelė, tad kaina, variantai ir mygtukas Į krepšelį čia pat. Sąrašą galima slinkti jo paties rodyklėmis, braukiant pirštu jutikliniame ekrane arba tempiant pele.

Siauruose puslapiuose, pavyzdžiui, kategorijos aprašyme šalia filtrų šoninės juostos, arba telefone sąrašas persikelia po nuotrauka, kad paveikslėlis liktų patogaus dydžio.

Filtrai: tik kėdės, tik lempos#

Vienoje kambario nuotraukoje nesunkiai telpa dešimt prekių. Filtrai leidžia lankytojams susitelkti į tai, ko jie atėjo.

1. Redaktoriuje kiekvienai sričiai priskirkite Filter tag, pavyzdžiui, Kėdės, Lempos ar Stalai.
2. Projekto skirtuke Canvas įjunkite Product filters.

Filtrų mygtukų eilutė atsiranda, kai nuotraukoje panaudotos bent dvi skirtingos žymos. Pasirinkus Lempos, ir nuotraukoje, ir sąraše lieka tik lempos; Visi vėl parodo viską.

Jei parduotuvė veikia keliomis kalbomis, išverskite žymą kiekvienos kalbos skirtuke. Chairs, Chaises ir Kėdės lieka vienas filtras, keičiasi tik pavadinimas.

Scenos: keli kambariai viename lookbook'e#

Lookbook'e retai būna viena nuotrauka. Užuot kiekvienai kūrę atskirą žemėlapį, pridėkite scenų: kiekviena turi savo paveikslėlį ir savo taškus, o lankytojai perjungia jas tiesiai puslapyje.

1. Vieną kartą išsaugokite projektą, tada skirtuke Builder paspauskite + Add scene ir įkelkite kitą nuotrauką.
2. Dukart spustelėkite scenos skirtuką ir suteikite jai pavadinimą, pavyzdžiui, Svetainė, Miegamasis, Virtuvė.
3. Kiekvienoje scenoje pažymėkite prekes kaip įprastai.

Skiltyje Styles → Scene Switcher pasirinkite, kaip lankytojai keliaus tarp scenų: mygtukais, skirtukų juosta, rodyklėmis, taškais ar jų deriniu, virš, po arba ant paveikslėlio, su slinkimo ar išblukimo animacija. Telefonuose scenas galima perjungti ir braukiant.

Prekių sąrašas ir filtrai keičiasi kartu su ekrane rodoma scena: kiekviena scena rodo tik savo prekes ir siūlo tik tas žymas, kurias naudoja.

Kad visą derinį būtų lengva nupirkti#

Du nustatymai naršymą paverčia pirkinių krepšeliu:

• Į krepšelį tiesiai iš kortelės. Įrašykite mygtuko tekstą ir įjunkite Add product to cart instead of opening the link. Variantai rodomi kaip spalvų langeliai ir išskleidžiami sąrašai.
• Viską į krepšelį. Laukas Multi-product showcase sudeda kelias prekes į vieną kortelę su mygtuku Viską į krepšelį: visą aprangą, visą skaitymo kampelį.

Sezoniniai lookbook'ai be papildomo darbo#

Lookbook'ai dažnai būna sezoniniai. Projekto skirtuko Canvas skiltyje Schedule nustatote Show from ir Show until, tad rudens lookbook'as pats įsijungia ir išsijungia. O jei abejojate, kuri nuotrauka ar išdėstymas parduoda geriau, A/B testas padalija lankytojus tarp dviejų žemėlapio versijų, o jų paspaudimai ir įdėjimai į krepšelį analitikoje rodomi atskirai.

Patikra prieš paskelbiant#

• Kiekviena prekė kiekvienoje scenoje pažymėta ir susieta.
• Filtrų žymos nuoseklios: visur Lempos, o ne vienoje scenoje Lempa.
• Sąrašas ir filtrai peržiūroje gerai atrodo telefono pločiu.
• Scenos turi tikrus pavadinimus, o ne Scene 2.
• Projektas įjungtas ir įdėtas: pradiniame puslapyje, CMS puslapyje ar kategorijos aprašyme.

Išbandykite#

Demo parduotuvėje galite paspaudinėti lookbook'us su prekių sąrašais, filtrais ir scenomis, o demo administravime – susikurti savo. Moonivo Image Map veikia su PrestaShop nuo 1.7 iki 9.1, o dokumentacijoje išsamiai aprašyti prekių sąrašas ir filtrai bei scenos (anglų k.).