Gidai · · 3 min skaitymo
Kaip PrestaShop parduotuvėje sukurti „shop the look“ nuotrauką su aktyviais taškais
Interjero ar aprangos nuotrauką PrestaShop parduotuvėje paverskite vieta, kur perkama. Taškai atveria prekių korteles su aktualia kaina ir mygtuku „Į krepšelį“. Žingsnis po žingsnio, maždaug per dešimt minučių.
Gražiausios jūsų nuotraukos greičiausiai parduoda mažiausiai. Įrengta svetainė, modelis su nauja kolekcija, kampanijos reklamjuostė: žmonės jas apžiūri, joms patinka tai, ką mato, o tada kiekvienos prekės turi ieškoti kataloge. Daugelis to taip ir nepadaro.
Tai išsprendžia shop the look nuotrauka, iš kurios galima pirkti. Kiekviena nuotraukoje matoma prekė gauna nedidelį tašką. Paspaudus jį, tiesiai ant nuotraukos atsidaro kortelė su prekės pavadinimu, aktualia kaina, variantais ir mygtuku Į krepšelį. Šiame gide parodome, kaip tokią nuotrauką sukurti PrestaShop 1.7, 8 ar 9 parduotuvėje.
Ko reikės
- PrestaShop parduotuvės (nuo 1.7 iki 9.1).
- Modulio Moonivo Image Map (anglų k.). Prieš pirkdami redaktorių galite išbandyti demo administravime.
- Plačios nuotraukos, maždaug 1600–2400 px pločio, JPG, PNG arba WebP formatu. Geriausiai tinka gyvenimiškos nuotraukos, kuriose aiškiai matyti kelios prekės.
1. Sukurkite projektą ir įkelkite nuotrauką
Administravime atidarykite Modules → Image Maps ir spauskite New project. Vienas projektas yra vienas nuotraukos žemėlapis.
- Skirtuke General įrašykite Name, pavyzdžiui, Svetainė – ruduo. Lankytojai šio pavadinimo nemato.
- Lauką Slug palikite tuščią – jis sugeneruojamas išsaugant.
- Nutempkite nuotrauką į Main image ir spauskite Save and stay.
Įkėlus nuotrauką atsiranda skirtukai Builder ir Styles.
2. Pažymėkite prekes taškais
Atidarykite skirtuką Builder, įrankių juostoje pasirinkite Hotspot ir spustelėkite prekę nuotraukoje. Atsiras pulsuojantis taškas, o dešinėje atsidarys formos nustatymų skydelis.
Taškui suteikite Name, pavyzdžiui, Poilsio kėdė. Lankytojai jo irgi nemato, bet būtent jį vėliau skaitysite paspaudimų statistikoje, todėl rinkitės lengvai atpažįstamą.
Taškai – klasikinis shop the look žymeklis. Jei prekė turėtų būti paspaudžiama visu plotu, pavyzdžiui, sofa ar kilimas, apveskite ją stačiakampiu, apskritimu arba daugiakampiu.
3. Susiekite kiekvieną tašką su preke
Skydelyje Action lauke On click pasirinkite Product ir suraskite prekę pagal pavadinimą arba ID.
Du pagalbininkai sutaupo daug rašymo:
- Load product data into card užpildo kortelę prekės pavadinimu ir trumpu aprašymu iškart visomis parduotuvės kalbomis.
- Sync card title with the product name išlaiko kortelės antraštę tokią pačią kaip pavadinimas kataloge. Jei vėliau prekę pervadinsite ar išversite, žemėlapis atsinaujins kartu.
4. Įjunkite prekės kortelę
Atidarykite skydelį Card ir įjunkite Tooltip card. Nuo šiol kortelė rodo aktualią kainą lankytojo valiuta, su mokesčiais ir nuolaidomis. Kai prekei taikoma akcija, senoji kaina perbraukiama ir atsiranda akcijos ženkliukas.
Kad žmonės galėtų pirkti neišeidami iš puslapio, lauke Button text įrašykite, pavyzdžiui, Į krepšelį ir įjunkite Add product to cart instead of opening the link. Kortelė naudoja paties PrestaShop krepšelį, todėl jūsų temos krepšelio skaitiklis ir patvirtinimo langas veikia kaip įprasta. Jei prekė turi kombinacijų, kortelėje rodomi spalvų pasirinkimai ir dydžių sąrašai, o į krepšelį keliauja pasirinktas variantas.
2–4 žingsnius pakartokite kiekvienai nuotraukoje esančiai prekei.
5. Parduokite visą rinkinį vienu paspaudimu
Shop the look veikia geriausiai, kai visą rinkinį galima nusipirkti kartu. Laukas Multi-product showcase vieną kortelę paverčia maža parduotuve: pasirinkite kelias prekes, ir kortelėje kiekviena bus parodyta su miniatiūra, kaina ir savo mygtuku Į krepšelį, o visam rinkiniui – vienas mygtukas Viską į krepšelį.
Didesniam rinkiniui įjunkite greta nuotraukos sinchronizuotą prekių sąrašą. Kaip tai padaryti, rasite straipsnyje kaip sukurti lookbook'ą su prekių sąrašu ir filtrais.
6. Peržiūrėkite, paskelbkite ir įdėkite
Apatinėje juostoje spauskite Preview ir pamatysite žemėlapį savo temoje kompiuterio, planšetės ir telefono pločiais. Kai viskas atrodo gerai, Project enabled nustatykite į Yes ir išsaugokite.
Tada pasirinkite, kur jį rodyti:
| Kur | Kaip |
|---|---|
| Pradinis puslapis | Module settings → Home page project, kodo nereikia. |
| CMS puslapis, kategorijos ar prekės aprašymas | Get code → Inside PrestaShop text, įklijuokite redaktoriaus HTML režimu. |
| Fiksuota vieta temoje | Get code → Inside a theme file, vienos eilutės „hook'as“. |
Kol nuotrauka kraunasi, žemėlapis jai rezervuoja vietą, todėl puslapis nešokinėja.
7. Žiūrėkite, ką žmonės spaudžia
Po kelių dienų modulio puslapyje atidarykite Click Analytics: ten matysite paspaudimus laike, įdėjimus į krepšelį ir kiekvieno taško rezultatus. Redaktoriuje rodinys Heatmap ant nuotraukos nubraižo tikras paspaudimų vietas, taip pat ir tas, kur žmonės spaudė, bet nieko nerado. Dažniausiai tai ir yra kita prekė, kurią verta pažymėti. Jei naudojate GA4 ar Meta Pixel, modulis savo įvykius siunčia per žymas, kurias jūsų parduotuvė jau įkelia.
Patarimai nuotraukoms, kurios parduoda
- Viena aiški istorija vienoje nuotraukoje. Visas kambarys ar visas derinys parduoda geriau nei perkrautas koliažas.
- Pažymėkite viską, ką parduodate kadre. Nepažymėta lempa – klausimas, į kurį niekas neatsako.
- Taškus laikykite atokiau nuo veidų ir svarbių detalių. Dėkite juos ant prekės, bet neuždenkite jos.
- Naudokite tas pačias nuotraukas kaip kampanijose. Žmonės jas atpažįsta iš reklamų ir naujienlaiškių, o dabar gali iš jų ir pirkti.
Išbandykite
Paspaudinėkite demo parduotuvėje ir pamatysite shop the look žemėlapius taip, kaip juos mato lankytojas, arba atidarykite demo administravimą ir sukurkite savo. Kai būsite pasiruošę, Moonivo Image Map (anglų k.) veikia su PrestaShop nuo 1.7 iki 9.1, o išsamus greitos pradžios gidas (anglų k.) aprašo kiekvieną nustatymą.