Keturi ženklai, vienas katalogas
NAILSOFTHEDAY, Lumore, Pink Me Up ir Teri — kiekvienas su sava tapatybe ir spalva, bet turi veikti kaip viena nuosekli parduotuvė, ne keturi atskiri interneto puslapiai.
INDRI.
Sistema, pastatyta nuo nulio.
Keturi savarankiški prekių ženklai, 144 produktai ir dvi skirtingos auditorijos — profesionalūs meistrai ir namų vartotojai — vienoje Shopify parduotuvėje. Skirtingai nuo COBB projekto, čia nebuvo ką perdaryti: architektūra, dizaino sistema ir kiekviena sekcija sukurta ant Horizon temos nuo pirmo failo.
Vienas katalogas, keturi balsai.
4savarankiški prekių ženklai vienoje sistemoje: NAILSOFTHEDAY, Lumore, Pink Me Up, Teri
144produktai 87 kolekcijose
774produktų variantai (atspalviai, dydžiai) — ~5,4 vidutiniškai kiekvienam produktui
9nuo nulio sukurtos INDRI Horizon sekcijos
~28INDRI specifinių sekcijų, fragmentų (snippets), stilių ir šablonų failų
4kalbos nuo paleidimo dienos: LT · LV · ET · EN
5atspalvio atvaizdavimo tipai tiksliam gelio lako spalvos rodymui
Kuo prasidėjo — ne šablonu, o iššūkiu.
Spalva sprendžia viską
Gelio lako pirkėjas renkasi pagal tikslų atspalvį. Standartinė Shopify variantų nuotrauka to neišsprendžia — reikėjo sistemos, kuri parodytų spalvą teisingai kiekvienoje vietoje.
Du skirtingi pirkėjai
Salono meistras perka urmu pagal darbo eigą (paruošimas → bazė → spalva → finišas). Namų vartotojas renkasi pagal nuotaiką. Abiem reikėjo savo kelio per tą patį katalogą.
Ką sukūrėme nuo nulio.
Atmosferos sistema
8 nuotaikos (rose, sage, lilac, clay, silver, wine, ink, neutral) × 5 fono efektai, automatiškai parenkami pagal produkto kategoriją ir perrašomi rankiniu būdu ten, kur reikia. Manrope tipografija, minimalistinė juoda/balta bazė.
indri-atmosphere-classes.liquidindri-atmospheres.cssŽenklų juosta be dubliavimo
Viena sekcija su „placement“ logika: pagrindiniame, kolekcijos ir produkto puslapiuose rodoma tiesiogiai, visur kitur — per antraštės grupę. Niekada nepasirodo du kartus.
indri-brand-bar.liquidindri-brand-bar.jsŽenklo filtras ir vitrina
Kolekcijos puslapyje automatiškai atsiranda to ženklo kategorijų žetonai, paimti tiesiai iš navigacijos meniu. Kiekvienam ženklui — logotipas, aprašymas trimis kalbomis ir rankomis parinkti flagman produktai.
indri-brand-filter.liquidindri-brand-showcase.liquidAtspalvio peržiūra tiesiai kortelėje ↓
Vienos eilutės pakeitimas standartiniame Horizon kortelės faile įjungia visiškai custom atspalvio pasirinkimo kapsulę kiekvienoje produkto kortelėje visoje svetainėje. Kaip tiksliai tai veikia — kitame skyriuje, su gyvu pavyzdžiu.
blocks/_product-card-gallery.liquidindri-shade-preview.liquidHero vaizdo įrėminimo langas
Pagrindinio puslapio video hero — ne paprastas fonas: vaizdas tampa fiksuotu „langu“, o stiklinė kortelė su antrašte lieka vietoje, kol sekcija slenkasi virš jos, ir ištirpsta lygiu greičiu, kai pasislenkate žemyn. requestAnimationFrame skaičiuoja pozicijos ir permatomumo kreivę, viskas išsijungia su prefers-reduced-motion.
indri-hero-card.jsindri-layout-fixes.cssKontaktai ir rinkiniai
- Atskiras kontaktų puslapis su temos maršrutizavimu: užsakymas, bendradarbiavimas, grąžinimas, kita
- Pilni įmonės rekvizitai ir vertimai keturiomis kalbomis
- Atskiras šablonas kuruotiems produktų rinkiniams su savo redakciniu hero
indri-contact-page.liquidcollection.rinkiniai.jsonAtspalvio peržiūra, kuri veikia tiesiai kortelėje.
+5
Tai veikiantis šio skyriaus pavyzdys — supaprastinta to paties principo versija, kuris realiai naudojamas kiekvienoje indri.lt produkto kortelėje.
- Atpažįsta pati, kuri produkto savybė yra „atspalvis“, o kuri — „tūris“ ar „svoris“, net kai pavadinimai lietuviški, latviški ar angliški.
- Parenka tiksliausią nuotrauką: jei tas pats atspalvis parduodamas keliais dydžiais, sistema automatiškai naudoja mažiausio dydžio varianto nuotrauką kaip spalvos atskaitą.
- Prisitaiko prie kortelės pločio per CSS container queries (ne tik ekrano dydį) — trys atspalviai plačioje kortelėje, du siauroje.
- Leidžia persijungti neatidarius produkto: paspaudus atspalvį realioje svetainėje, Shopify varianto sistema iškart atnaujina kainą ir nuotrauką sąraše.
- Pilnai prieinama: klaviatūra, ekrano skaitytuvas,
prefers-reduced-motion.
O kai atspalvis jau pasirinktas produkto puslapyje — kiekvienam variantui gali būti priskirtos papildomos, tikslesnės nuotraukos per atskirą metalauką; jos atsidaro lightbox galerijoje ir persikrauna, kai pakeičiate variantą.
indri-shade-preview.liquidindri-swatch-visual.liquidvariant extra-image gallery blockGyva parduotuvė, ne maketas.
Neutrali bazė, keturi akcentai.
Fonas#FFFFFF
Tekstas#000000
Kontūrai#DFDFDF
NAILSOFTHEDAY#D9B7BE
Lumore#CBC3D8
Pink Me Up#E58FB2
Profesionalams.
Ir tau.
Manrope tekstui ir antraštėms, neutrali juoda/balta bazė ir po vieną švytėjimo spalvą kiekvienam ženklui. Apvalūs 14px mygtukai, 4px kortelių kampai — sistema, kurioje keturi ženklai jaučiasi vienodai patogiai.
Nuo pirmo failo iki gyvos parduotuvės per savaitę.
Pirmas juodraštis
Horizon tema, pirmos INDRI sekcijos ir katalogo struktūra.
Paleista gyvai
Publikuota kaip pagrindinė parduotuvės tema.
Poliravimas
Layout pataisymai, footer politika, Omnisend integracija.
Aktyviai tobulinama
Sistema auga kartu su katalogu ir naujais ženklais.
Ką tai duoda verslui.
Viena sistema, keturi ženklai
Kiekvienas prekės ženklas turi savo balsą, bet bendrą architektūrą — penktą ženklą galima pridėti, nekuriant naujos svetainės.
Mažiau netikėtumų gavus siuntą
Tikslus atspalvio atvaizdavimas ir papildomos nuotraukos sumažina neatitikimą tarp to, ką pirkėjas mato ekrane, ir to, ką gauna.
Vienas katalogas, du keliai
Salono meistras ir namų vartotojas naudoja tą pačią sistemą, bet skirtingais įėjimo taškais — be atskirų svetainių.
Paruošta trims rinkoms iš karto
LT/LV/ET/EN turinys nėra pridėtas vėliau — jis įaustas į kiekvieną sekciją nuo pirmos dienos.
Omnisend automatizacijos.
Parduotuvė paruošta el. pašto ir SMS automatizacijoms per Omnisend — integracija jau aktyvi. Šis skyrius bus papildytas konkrečiais scenarijais, ekranvaizdžiais ir rezultatais, kai automatizacijos bus pilnai sukonfigūruotos.
Papildoma netrukusSveikinimo serija
Naujiems prenumeratoriams
Apleistas krepšelis
Priminimas nebaigus pirkimo
Po pirkimo
Padėka ir priežiūros patarimai
Naršymo priminimas
Peržiūrėtiems, bet neįsigytiems produktams
Segmentuoti naujienlaiškiai
Pagal ženklą ir pirkimo istoriją
Prekės ženklų blokai jau paruošti kampanijoms ir automatizacijoms