Pomocník
Prihlásiť sa

Pridanie vlastného CSS do témy

Kaskádové štýly (CSS) menia spôsob zobrazovania prvkov v téme a dokážu naraz ovládať vzhľad viacerých stránok. Pomocou funkcie vlastného CSS môžete svoju tému prispôsobiť nad rámec nastavení, ktoré sú v nej zabudované. Môžete napríklad použiť CSS na nastavenie prechodov v nastaveniach farieb témy. Vlastné CSS môžete pridať do celej témy alebo do konkrétnej sekcie šablóny v téme. Vlastné CSS nie je podporované na stránke Pokladňa.

Prispôsobenie CSS si vyžaduje určité znalosti jazykov CSS a HTML. Pred úpravou témy sa uistite, že viete, aká úroveň podpory je k dispozícii.

Na tejto stránke

Dôležité informácie o používaní vlastného CSS

Pred pridaním vlastného CSS do témy si prečítajte nasledujúce dôležité informácie:

  • Nasledujúce selektory a vlastnosti CSS nie sú vo vlastnom CSS podporované:
    • Pravidlá typu at-rule @import, @charset a @namespace nie je možné použiť.
    • Pre CSS na úrovni sekcie sú povolené iba pravidlá at-rule @media, @container, @layer a @supports.
    • Pri CSS na úrovni sekcie nemôžete cieliť na ID alebo triedy obaľovacieho prvku Shopify Section, ktorý bol vykreslený témou s triedou shopify-section.
    • Vlastnosť content nie je vo vlastnom CSS dostupná.
  • Ak je vlastné pravidlo CSS deklarované pre značku obaľujúcu nadradený prvok sekcie, tá sa považuje za podradenú značku a pravidlo štýlovania sa použije na danú sekciu. Upozorňujeme, že predvolene je nadradená sekcia obalená v značke <div>, avšak vývojári tém môžu túto značku v schéme sekcie nastaviť na ktorúkoľvek z povolených hodnôt.
  • Pri používaní adries URL vo vlastnom CSS je v súčasnosti povolená iba doména https://cdn.shopify.com.
  • Vlastné písma nie sú obmedzené. Sú to však samostatné zdroje, ktoré prehliadače sťahujú pred vykreslením textu, čo môže ovplyvniť celkový výkon obchodu. Je vašou zodpovednosťou zabezpečiť, aby vlastné písma nemali negatívny vplyv na vašu výkladnú skriňu. Zistite, ako vo svojej téme používať vlastné písma.
  • Pravidlá CSS, ktoré ovplyvňujú celú tému, sú obmedzené na 1 500 znakov.
  • Pravidlá CSS, ktoré ovplyvňujú konkrétnu sekciu, sú obmedzené na 500 znakov.
  • V závislosti od toho, aké selektory alebo triedy CSS používate, môže aktualizácia témy spôsobiť, že vlastné CSS prestane fungovať.

Shopify nepodporuje pokročilé prispôsobenia témy. Ak vo vlastnom CSS narazíte na chybu súvisiacu s týmito obmedzeniami a neviete zistiť jej príčinu, pozrite si zoznam ďalších dostupných zdrojov podpory.

Pridanie vlastného CSS

Vlastné CSS môžete pridať do celej témy, čím ovplyvníte všetky stránky v online obchode okrem stránky Pokladňa. Môžete tak napríklad zmeniť spôsob zobrazovania tlačidiel v celom obchode.

Postup:

  1. V administrátorovi Shopify prejdite do sekcie Online obchod > Témy.

  2. Kliknite na Upraviť tému.

  3. Kliknite na Nastavenia témy.

  4. Kliknite na Vlastné CSS.

  5. Pridajte svoj kód.

  6. Kliknite na Uložiť.

Umiestnenie poľa pre vlastné CSS v nastaveniach témy

Vlastné CSS je možné pridať aj do konkrétnej sekcie témy. Ak pridáte vlastné CSS do sekcie témy, jeho rozsah platnosti sa obmedzí iba na danú sekciu. Môžete napríklad použiť vlastnú veľkosť písma alebo farbu pozadia iba v jednej sekcii.

Postup:

  1. V administrátorovi Shopify prejdite do sekcie Online obchod > Témy.

  2. Kliknite na Upraviť tému.

  3. Kliknite na sekciu, do ktorej chcete pridať CSS.

  4. V dolnej časti panela vlastností sekcie kliknite na Vlastné CSS.

  5. Pridajte svoj kód.

  6. Kliknite na Uložiť.

Umiestnenie poľa pre vlastné CSS v nastaveniach sekcie

Ďalšie zdroje o CSS

Prispôsobenie CSS si vyžaduje určité znalosti jazykov CSS a HTML. Pred úpravou témy sa uistite, že viete, aká úroveň podpory je k dispozícii.

Ak sa chcete o CSS dozvedieť viac, môžete preskúmať niektoré z nasledujúcich zdrojov: