Dodavanje prilagođenog CSS-a temi

Stilski listovi (CSS, Cascading Style Sheets) mijenjaju način prikaza elemenata u vašoj temi i mogu upravljati izgledom nekoliko stranica istovremeno. Svoju temu možete prilagoditi i izvan postavki ugrađenih u nju upotrebom značajke prilagođenog CSS-a. Na primjer, možete upotrijebiti CSS za postavljanje preljeva u postavkama boja teme. Prilagođeni CSS možete dodati cijeloj temi ili određenom odjeljku predloška unutar teme. Prilagođeni CSS nije podržan na stranici Plaćanje.

Prilagodba CSS-a zahtijeva određeno poznavanje CSS-a i HTML-a. Prije nego što prilagodite temu, provjerite jeste li upoznati s dostupnom razinom podrške.

Na što treba obratiti pozornost pri upotrebi prilagođenog CSS-a

Prije dodavanja prilagođenog CSS-a temi, pregledajte sljedeće napomene:

• Sljedeći selektori i svojstva CSS-a nisu podržani u prilagođenom CSS-u:
  • Pravila sa znakom at (at-rules) @import, @charset i @namespace ne mogu se upotrebljavati.
  • Za CSS na razini odjeljka dopuštena su samo pravila sa znakom at (at-rules) @media, @container, @layer i @supports.
  • Za CSS na razini odjeljka ne možete ciljati ID ni klase obavijajućeg elementa odjeljka platforme Shopify (Shopify Section) koji tema renderira s pomoću klase shopify-section.
  • Svojstvo content nije dostupno u prilagođenom CSS-u.
• Ako je pravilo prilagođenog CSS-a deklarirano oznakom koja obavija element nadređenog odjeljka, to se smatra oznakom sljednika te se pravilo oblikovanja primjenjuje na taj odjeljak. Napominjemo da je nadređeni odjeljak prema zadanim postavkama obavijen oznakom <div>, no nju razvojni programeri teme mogu postaviti na bilo koju od dopuštenih vrijednosti u shemi odjeljka.
• Trenutačno je pri upotrebi URL-ova u prilagođenom CSS-u dopuštena samo domena https://cdn.shopify.com.
• Prilagođeni fontovi nisu ograničeni. Međutim, prilagođeni fontovi zaseban su resurs koji preglednici preuzimaju prije renderiranja teksta, što može utjecati na ukupne performanse trgovine. Vaša je odgovornost osigurati da prilagođeni fontovi nemaju negativan utjecaj na internetsku trgovinu. Saznajte kako upotrijebiti prilagođene fontove u temi.
• Pravila CSS-a koja utječu na cijelu temu ograničena su na 1500 znakova.
• Pravila CSS-a koja utječu na određeni odjeljak ograničena su na 500 znakova.
• Ovisno o selektorima ili klasama CSS-a koje upotrebljavate, ažuriranje teme može uzrokovati prestanak funkcioniranja prilagođenog CSS-a.

Platforma Shopify ne podržava napredne prilagodbe teme. Ako naiđete na pogrešku povezanu s ovim ograničenjima u prilagođenom CSS-u, a ne možete utvrditi njezin uzrok, pogledajte popis drugih dostupnih resursa za podršku.

Dodavanje prilagođenog CSS-a

Prilagođeni CSS može se dodati cijeloj temi i utjecati na sve stranice internetske trgovine, osim stranice Plaćanje. Primjerice, možete promijeniti način prikaza gumba u cijeloj trgovini.

Koraci:

1. U administratorskom alatu za Shopify idite na Internetska trgovina > Teme.

2. Kliknite na Uredi temu.

3. Kliknite na Postavke teme.

4. Kliknite na Prilagođeni CSS.

5. Dodajte svoj kôd.

6. Kliknite na Spremi.

Prilagođeni CSS može se dodati i određenom odjeljku teme. Ako dodate prilagođeni CSS odjeljku teme, opseg CSS-a primjenjuje se samo na taj odjeljak. Na primjer, možete primijeniti prilagođenu veličinu fonta ili boju pozadine na jedan odjeljak.

Koraci:

1. U administratorskom alatu za Shopify idite na Internetska trgovina > Teme.

2. Kliknite na Uredi temu.

3. Kliknite na odjeljak kojemu želite dodati CSS.

4. Na dnu ploče sa svojstvima odjeljka kliknite na Prilagođeni CSS.

5. Dodajte svoj kôd.

6. Kliknite na Spremi.

Dodatni resursi za CSS

Prilagodba CSS-a zahtijeva određeno poznavanje CSS-a i HTML-a. Prije nego što prilagodite temu, provjerite jeste li upoznati s dostupnom razinom podrške.

Ako želite saznati više o CSS-u, možete istražiti neke od sljedećih resursa:

• Osnove CSS-a
• Saznajte kako oblikovati HTML s pomoću CSS-a
• Referentni dokumenti za CSS
• Selektori CSS-a