Jak se dělá Shopify šablona na míru: od návrhu po Online Store 2.0

Když se řekne šablona na míru, většina lidí si představí, že se vezme grafický návrh a překóduje do HTML. To je asi třetina práce. Zbylé dvě třetiny jsou o tom, aby si e-shop uměl spravovat člověk, který nikdy neviděl kód.

1. Co se musí vyjasnit před prvním řádkem kódu

Než se začne kódovat, je potřeba vědět, které části stránky bude klient měnit. Ne „všechny“ — to je odpověď, která vede k nepřehlednému editoru s dvěma sty nastaveními, ve kterém se nikdo nevyzná.

Procházím s klientem domovskou stránku a u každého bloku se ptám: budete tohle měnit měsíčně, ročně, nebo nikdy? Z toho vznikne mapa sekcí — co bude nastavitelné, co pevné a kde je potřeba blok, který se dá přidávat opakovaně.

2. Datový model

Druhá věc před kódováním: kde budou žít data, která standardní produkt nemá. Materiál, návod na údržbu, tabulka velikostí, technické parametry, vazba na kolekci značek.

Shopify na to má metapole a metaobjekty. Je to podstatně lepší řešení než cpát informace do popisu produktu nebo do skrytých tagů, jak se to dělalo dřív. Data mají typ, dají se filtrovat a v šabloně se čtou čistě. Píšu o tom v článku o metaobjektech.

Špatně navržený datový model se později neopraví bez přepsání šablony. Proto je to krok číslo dvě a ne šest.

3. Sekce a bloky Online Store 2.0

Tohle je jádro moderní Shopify šablony. Sekce je samostatný kus stránky s vlastními nastaveními, blok je opakovatelný prvek uvnitř ní. Klient si v editoru sekce přidává, mění pořadí a nastavuje jejich obsah.

Pravidla, kterých se držím:

• Sekce dělá jednu věc. Univerzální sekce s dvaceti nastaveními je nepoužitelná.
• Názvy nastavení jsou v jazyce klienta, ne vývojáře. „Nadpis nad produkty“, ne „Section heading H2 override“.
• Rozumné výchozí hodnoty. Když klient sekci přidá, má hned vypadat dobře.
• Sekce fungují i na podstránkách, ne jen na domovské.

4. Liquid, který se dá číst

Šablona, do které se za rok podívá jiný vývojář, musí dávat smysl. Znamená to oddělené snippety pro opakované části, žádnou logiku v šabloně, která tam nepatří, a komentáře tam, kde se děje něco neobvyklého.

Zvlášť pozor na cykly v cyklech. Procházet všechny varianty všech produktů v kolekci je nejrychlejší způsob, jak udělat pomalou stránku u katalogu nad tisíc položek.

5. Rychlost jako součást zadání

Rychlost se nedá „doladit na konci“. Buď se šablona staví s ohledem na ni, nebo ne. V praxi to znamená: obrázky v moderních formátech a s responzivními velikostmi, lazy loading pro všechno pod ohybem, kritické CSS v hlavičce a zbytek odložený, žádné knihovny kvůli jedné funkci, fonty s font-display: swap a načtené předem.

Rozdíl mezi šablonou, která na to myslela, a šablonou, která ne, jsou celé sekundy — a to je rozdíl v konverzi. Pokud ani šablona na míru nestačí, přichází na řadu headless, ale to je jiná liga nákladů.

6. Přístupnost a mobil

Většina objednávek chodí z mobilu, takže mobil není „responzivní verze“, je to hlavní verze. A přístupnost není charita — kontrast, ovládání klávesnicí a pořádné popisky jsou i SEO signál a zároveň právní požadavek, který se v EU zpřísňuje.

7. Předání

Šablona bez dokumentace je poloviční práce. Předávám vždycky krátký dokument s tím, co která sekce dělá, kde se co nastavuje a co se nemá měnit bez vývojáře. Plus krátké video, kde to klientovi ukážu naživo.

A kód patří klientovi. Vždycky. Pokud vám někdo šablonu postaví a kód si nechá, nekoupili jste si šablonu — koupili jste si závislost.

Jak dlouho to trvá

U středního e-shopu se standardními šablonami — domovská, kolekce, produkt, košík, statické stránky, blog — se bavíme řádově o týdnech. Co to prodlužuje: neustálené návrhy, pozdě dodaný obsah a požadavky, které přijdou, když je šablona hotová.