Jednou z největších předností platformy Shopify je široká nabídka šablon (bezplatných i placených). Někdy však může být potřeba mírně upravit rozvržení nebo změnit barvy. Pro některé z těchto úprav (zejména ty pokročilé) budete muset upravit soubor CSS dané šablony. Vlastní CSS můžete využít i k úpravě vzhledu aplikací třetích stran nainstalovaných ve vašem obchodě. Jaký je nejlepší způsob, jak to udělat?
Možnost 1: Přidání vlastního CSS přes editor šablon (doporučeno)
V únoru 2023 představilo Shopify nový způsob správy vlastního CSS. Nyní je nativní součástí každé šablony vytvořené společností Shopify (např. Dawn) a je to námi doporučený způsob správy CSS ve vašem obchodě.
Hlavními výhodami jsou jednoduchá správa CSS, živý náhled změn, podpora aktualizací šablon a vestavěný validátor s návrhy.
Pro přidání vlastního CSS přes editor šablon postupujte následovně:
- Přejděte do administrace obchodu > Prodejní kanály > E-shop > Přizpůsobit
- Přejděte do nastavení šablony (ikona štětce v levém menu) > VLASTNÍ CSS
- Přidejte vlastní CSS podle potřeby, zkontrolujte živý náhled a pokud je vše v pořádku, klikněte na Uložit vpravo nahoře.
Hlavní nevýhodou je limit znaků, který činí 500 znaků pro konkrétní sekci a 1 500 znaků pro celou šablonu.
Možnost 2: Úprava vzhledu šablony (barvy, písma, CSS atd.)
Někdy vlastně ani nepotřebujete upravovat CSS, stačí využít vestavěný přizpůsobovač šablon. Nabízí různé možnosti v závislosti na používané šabloně, ale většinou v něm změníte pouze standardní věci, jako jsou barvy, typy písma a někdy i rozvržení.
Některé šablony mají také sekci nazvanou „Vlastní CSS“, kam můžete své CSS vložit. Je to prakticky velmi podobné úpravě souboru CSS šablony (viz níže), protože jakmile šablonu aktualizujete, tyto změny se ztratí. Pokud tedy šablona nevyužívá nějaký pokročilý nástroj pro aktualizaci, což mnoho z nich nedělá.
Možnost 3: Přidání/úprava vlastního CSS v šabloně
Běžným způsobem úpravy CSS je změna přímo v existujícím souboru CSS umístěném v kódu šablony. Obvykle se nazývá theme.scss.liquid nebo base.css u nových šablon Shopify 2.0 (např. Dawn). Najdete jej tak, že přejdete do administrace obchodu > E-shop > Šablony > Akce > Upravit kód > složka Assets.
Jakmile jej otevřete, můžete upravit nebo přidat jakékoli CSS, které potřebujete. Nevýhodou je, že pokud šablonu změníte nebo aktualizujete, vaše CSS se ztratí. Je dobrou praxí umístit všechny své úpravy do sekce nazvané „Vlastní CSS“ nebo podobně a v případě potřeby je zkopírovat a vložit do nové šablony.
Možnost 4: Vytvoření vlastního souboru CSS
Tento postup je velmi podobný možnosti 2, ale místo úpravy stávajícího souboru CSS vytvoříte nový. Hlavní výhodou je, že při aktualizaci nebo změně šablony můžete svůj soubor CSS snadno znovu připojit.
Chcete-li vytvořit vlastní soubor CSS, přejděte v administraci obchodu do sekce Online obchod > Šablony > Akce > Upravit kód > složka Assets a klikněte na Přidat nový soubor. V okně, které se otevře, vyberte Vytvořit prázdný soubor a pojmenujte jej podle svého (například custom.css).
Jakmile máte nový soubor CSS vytvořený, můžete do něj přidat vlastní styly. Důležité je, abyste jej ze své šablony „zavolali“, aby se skutečně použil. Přejděte do složky Layout a otevřete soubor theme.liquid. Do sekce <head> vložte následující kód, přičemž „custom.css“ nahraďte názvem svého souboru.
Při každé aktualizaci nebo změně šablony musíte tento kód do souboru theme.liquid vložit znovu. Váš soubor s vlastním CSS však zůstane ve složce Assets uložen.
Možnost 5: Přidání/úprava vlastního CSS pomocí aplikace třetí strany
Poslední metoda vyžaduje instalaci aplikace třetí strany, nabízí však velkou výhodu. Veškeré vlastní CSS vložené do aplikace je nezávislé na aktuální šabloně. Můžete tedy šablony libovolně měnit nebo aktualizovat, aniž byste o své úpravy přišli. CSS můžete také cílit na konkrétní nainstalované šablony, jak ukazuje příklad níže.
Existuje několik aplikací, které to umožňují, a některé z nich jsou dokonce zdarma. Nevýhodou je, že každá aplikace má určitý vliv na výkon obchodu, zejména pokud se CSS načítá prostřednictvím externího souboru. Proto pečlivě zvažte, který způsob je pro váš obchod nejvhodnější.
Pokud potřebujete pomoc s úpravou CSS nebo změnami šablony, neváhejte nás kontaktovat. Náš agenturní tým vám rád pomůže.
