Ako sa robí Shopify téma na mieru: od návrhu po Online Store 2.0

Keď sa povie téma na mieru, väčšina ľudí si predstaví, že sa vezme grafický návrh a prekóduje do HTML. To je asi tretina práce. Zvyšné dve tretiny sú o tom, aby si e-shop vedel spravovať človek, ktorý nikdy nevidel kód.

1. Čo sa musí vyjasniť pred prvým riadkom kódu

Predtým, než sa začne kódovať, treba vedieť, ktoré časti stránky bude klient meniť. Nie „všetky“ — to je odpoveď, ktorá vedie k neprehľadnému editoru s dvesto nastaveniami, v ktorom sa nikto nevyzná.

Prechádzam s klientom domovskú stránku a pri každom bloku sa pýtam: budete toto meniť mesačne, ročne, alebo nikdy? Z toho vznikne mapa sekcií — čo bude nastaviteľné, čo pevné a kde treba blok, ktorý sa dá pridávať opakovane.

2. Dátový model

Druhá vec pred kódovaním: kde budú žiť dáta, ktoré štandardný produkt nemá. Materiál, návod na údržbu, tabuľka veľkostí, technické parametre, väzba na kolekciu značiek.

Shopify na to má metapolia a metaobjekty. Je to podstatne lepšie riešenie než pchať informácie do popisu produktu alebo do skrytých tagov, ako sa to robilo kedysi. Dáta majú typ, dajú sa filtrovať a v téme sa čítajú čisto. Píšem o tom v článku o metaobjektoch.

Zle navrhnutý dátový model sa neopraví neskôr bez prepísania témy. Preto je to krok číslo dva a nie šesť.

3. Sekcie a bloky Online Store 2.0

Toto je jadro modernej Shopify témy. Sekcia je samostatný kus stránky s vlastnými nastaveniami, blok je opakovateľný prvok vnútri nej. Klient si v editore sekcie pridáva, mení poradie a nastavuje ich obsah.

Pravidlá, ktorých sa držím:

• Sekcia robí jednu vec. Univerzálna sekcia s dvadsiatimi nastaveniami je nepoužiteľná.
• Názvy nastavení sú v jazyku klienta, nie vývojára. „Nadpis nad produktmi“, nie „Section heading H2 override“.
• Rozumné predvolené hodnoty. Keď klient sekciu pridá, má hneď vyzerať dobre.
• Sekcie fungujú aj na podstránkach, nie len na domovskej.

4. Liquid, ktorý sa dá čítať

Šablóna, do ktorej sa o rok pozrie iný vývojár, musí dávať zmysel. Znamená to oddelené snippety pre opakované časti, žiadnu logiku v šablóne, ktorá tam nepatrí, a komentáre tam, kde sa robí niečo neobvyklé.

Zvlášť pozor na cykly v cykloch. Prechádzať všetky varianty všetkých produktov v kolekcii je najrýchlejší spôsob, ako spraviť pomalú stránku pri katalógu nad tisíc položiek.

5. Rýchlosť ako súčasť zadania

Rýchlosť sa nedá „doladiť na konci“. Buď sa téma stavia s ohľadom na ňu, alebo nie. V praxi to znamená: obrázky v moderných formátoch a s responzívnymi veľkosťami, lazy loading pre všetko pod ohybom, kritické CSS v hlavičke a zvyšok odložený, žiadne knižnice kvôli jednej funkcii, fonty s font-display: swap a načítané vopred.

Rozdiel medzi témou, ktorá na to myslela, a témou, ktorá nie, sú celé sekundy — a to je rozdiel v konverzii. Ak ani téma na mieru nestačí, prichádza na rad headless — ale to je iná liga nákladov.

6. Prístupnosť a mobil

Väčšina objednávok chodí z mobilu, takže mobil nie je „responzívna verzia“, je to hlavná verzia. Rýchlosť a mobilná použiteľnosť sú zároveň priame SEO faktory. A prístupnosť nie je charita — kontrast, ovládanie klávesnicou a poriadne popisy sú aj SEO signál a aj právna požiadavka, ktorá sa v EÚ sprísňuje.

7. Odovzdanie

Téma bez dokumentácie je polovičná práca. Odovzdávam vždy krátky dokument s tým, čo ktorá sekcia robí, kde sa čo nastavuje a čo sa nemá meniť bez vývojára. Plus krátke video, kde to klientovi ukážem naživo.

A kód patrí klientovi. Vždy. Ak vám niekto tému postaví a kód si nechá, nekúpili ste si tému — kúpili ste si závislosť.

Ako dlho to trvá

Pri strednom e-shope so štandardnými šablónami — domovská, kolekcia, produkt, košík, statické stránky, blog — sa bavíme rádovo o týždňoch. Čo to predlžuje: neustálené návrhy, neskoro dodaný obsah a požiadavky, ktoré prídu, keď je téma hotová.

Dobrá téma na mieru sa pozná podľa toho, že vývojára po odovzdaní nepotrebujete. Zlá podľa toho, že ho voláte pri každej zmene bannera.