Kaupat
Oma CSS ja head-koodi
Oman CSS:n neljä kerrosta, kaskadin järjestys, px vai rem, kaksi head-kenttää, sallitut skriptipalvelimet, suostumus ja sivun JS.
Tässä lisäät omaa CSS:ää ja omaa koodia <head>-osaan.
Missä: Suunnittelutyökalun paneeli Code. Paneeli näkyy, kun Advanced on päällä. Theme › Custom CSS on välilehdellä Theme.
Neljä CSS-kerrosta
| Kerros | Missä | Koskee |
|---|---|---|
| Osio | Valitse osio ja avaa Open the deep inspector | Vain sitä osiota |
| Komponentti | Code › CSS koodieditorissa | Komponenttia kaikilla sivuilla. Rajataan komponentin juureen. Katso Oma koodi komponentissa |
| Sivu | CSS paneelissa Code | Kaikkia sivun osioita |
| Teema | Theme › Custom CSS | Koko kauppaa, myös ylätunnistetta, alatunnistetta, tuotesivua ja kategoriasivua. Tulee mukaan, kun tallennat teeman omaksi tyyliksi |
Tyyppiä Custom component olevalla osiolla on oma CSS, joka rajataan osioon.
Kaskadin järjestys on tokenien CSS, tyyli, teeman CSS, komponenttien CSS ja viimeisenä osioiden ja sivun CSS. Järjestyksessä myöhempi sääntö voittaa saman aiemman säännön. Sääntö, jossa on !important, voittaa sijainnista riippumatta.
Kaikki CSS puhdistetaan. Mitä poistetaan ja mitä muuttujia voit käyttää, kerrotaan sivulla Koukut ja CSS-viite.
px vai rem
Kohdan Theme › Typography Base asettaa font-size-arvon elementille html.
| Yksikkö | Skaalautuu Basen mukaan | Käytetään |
|---|---|---|
rem | Kyllä | Tekstikokoihin, osioiden väleihin, ylätunnisteen ylä- ja alatäytteeseen ja sisältösarakkeen marginaaliin (--bs-main-pad on 2.5rem) |
px | Ei | Logon korkeuteen, kuvakkeisiin, kulmasäteisiin, painikkeiden kulmiin, sivun leveyteen (--bs-content-max) ja sivumarginaaliin (--bs-gutter) |
Kirjoita rem, kun mitan pitää seurata peruskokoa. Kirjoita px, kun mitan pitää pysyä samana. 32 px korkea ylätunniste kirjoitetaan 32px. Tekstiä seuraava väli kirjoitetaan 1.6rem.
Esimerkit
Kolme komponentin Product card ulkoasua ovat valintoja komponenttipaneelissa. Harmaa alusta: kortti Plate kohdassa Look. Väri: Surface kohdassa Colours. Ilman taglinea: kytke Tag line under the title pois kohdassa Options. CSS:ää tarvitaan vain siihen, mikä ei ole valinta, esimerkiksi otsikon kirjainväliin:
[data-bs-card-title] { letter-spacing: 0.01em; }
Täysleveä kategorianauha reunasta reunaan ylätunnisteen alla:
[data-bs-category-header] { background: var(--bs-surface); width: 100vw; margin-left: calc(50% - 50vw); margin-top: calc(-1 * var(--bs-main-pad)); padding: 2.5rem 0 2rem; }
[data-bs-category-header-inner] { max-width: calc(var(--bs-content-max) + 2 * var(--bs-gutter)); margin: 0 auto; padding: 0 var(--bs-gutter); }
Ilman margin-top-arvoa ylätunnisteen ja nauhan väliin jää 2.5rem:n valkoinen kaista. Nauhan teksti on sivun leveydellä ja seuraa kohtaa Theme › Layout.
Tallenna komponentin CSS painikkeella Save as new style tai koko teema kohtaan Your styles. Silloin voit käyttää CSS:ää toisessa kaupassa.
Head-koodi
Paneelissa Code on kaksi head-kenttää:
| Välilehti | Minne koodi päätyy | Käytä |
|---|---|---|
| HEAD · SITE | Kaupan jokaiselle sivulle | Analytiikkaan, seurantaan ja vahvistustageihin |
| HEAD · PAGE | Vain muokkaamallesi sivulle | Canonical-linkkiin tai somekorttiin juuri sille sivulle |
Analytiikka kuuluu kohtaan HEAD · SITE. Analytiikkakoodi kohdassa HEAD · PAGE mittaa vain sitä sivua. Kohdan HEAD · SITE koodi on teemassa. Se seuraa luonnosta ja julkaistaan, kun julkaiset.
Google Tag Managerilla on oma kenttä kohdassa Storefronts › [kauppa] › Analytics. Katso Seuranta ja Google Tag Manager.
Mitä tallennetaan
meta,link,styleja<script src="…">säilyvät.- Inline-skriptit poistetaan. Ne ovat
<script>-tagien väliin kirjoitettua koodia. - Osoitteiden on alettava
https://. - Tapahtuma-attribuutit, kuten
onclick, poistetaan.
Sallitut skriptipalvelimet
Ulkoinen skripti ajetaan vain näiltä palvelimilta:
www.googletagmanager.comtagmanager.google.comwww.google-analytics.comwww.googleadservices.comgoogleads.g.doubleclick.netpagead2.googlesyndication.comwww.google.com*.sentry.ioplausible.ioconnect.facebook.net*.klarna.com*.kustom.co
Kaupan skriptikäytäntö pysäyttää kaikki muut palvelimet. Suunnittelutyökalu ei tallenna head-kenttää, joka osoittaa listan ulkopuolelle. Varoitus näkyy koodin vieressä, ja viestissä lukee Not saved ja palvelimen nimi.
Huom: Head-osan skriptit ajetaan vasta, kun vierailija on valinnut evästebannerista ”Acceptera alla”. Tämä koskee kaikkia sivuja, myös kassaa ja tilaussivuja. Katso Evästeet ja suostumus.
Sivun JS
Paneelin Code JS ajetaan sivulla, kaupassa ja työtilassa.
- Koodi ajetaan kerran sivun latauksessa, kun sivu on latautunut.
- Virhe kirjataan selaimen konsoliin, eikä se pysäytä sivua.
- Collection-sivun CSS ja JS koskevat kaikkia kategoriasivuja.
Lisää analytiikka ja seuranta kohtaan HEAD · SITE evästesuostumuksen taakse. Komponentin JS kirjoitetaan koodieditoriin. Se saa komponentin juuren nimellä root, katso Oma koodi komponentissa.