Butikker
Egen CSS og kode i head
De fire lag egen CSS, rækkefølgen i kaskaden, px mod rem, de to head-felter, tilladte scriptværter, samtykke og sidens JS.
Her lægger du egen CSS og egen kode i <head>.
Hvor: Panelet Code i designeren. Panelet vises med Advanced slået til. Theme › Custom CSS findes i fanen Theme.
Fire lag CSS
| Lag | Hvor | Gælder |
|---|---|---|
| Sektion | Markér sektionen, og åbn Open the deep inspector | Kun den sektion |
| Komponent | Code › CSS i kodeeditoren | Komponenten på alle sider. Afgrænses til komponentens rod. Se Egen kode på en komponent |
| Side | CSS i panelet Code | Alle sektioner på siden |
| Tema | Theme › Custom CSS | Hele butikken, med sidehoved, sidefod, produktside og kategoriside. Kommer med, når du gemmer temaet som egen stilart |
En sektion af typen Custom component har egen CSS, afgrænset til sektionen.
Rækkefølgen i kaskaden er tokens-CSS'en, stilarten, tema-CSS'en, komponenternes CSS og til sidst sektionernes og sidens CSS. En regel senere i rækkefølgen vinder over samme regel tidligere. En regel med !important vinder, uanset hvor den står.
Al CSS renses. Hvad der fjernes, og hvilke variabler du kan bruge, står under Kroge og CSS-reference.
px eller rem
Base under Theme › Typography sætter font-size på html.
| Enhed | Skalerer med Base | Bruges til |
|---|---|---|
rem | Ja | Tekststørrelser, sektionernes afstand, sidehovedets udfyldning foroven og forneden og indholdskolonnens margen (--bs-main-pad er 2.5rem) |
px | Nej | Logoets højde, ikonerne, hjørneradierne, knappernes hjørner, sidebredden (--bs-content-max) og sidemargenen (--bs-gutter) |
Skriv rem, når målet skal følge basisstørrelsen. Skriv px, når målet skal stå fast. Et sidehoved, der skal være 32 px højt, skrives 32px. En afstand, der skal følge teksten, skrives 1.6rem.
Eksempler
Tre udseender på Product card er valg på komponentpanelet. Grå plade: kortet Plate under Look. Farven: Surface under Colours. Uden tagline: slå Tag line under the title fra under Options. CSS skal kun bruges til det, der ikke er et valg, for eksempel titlens bogstavafstand:
[data-bs-card-title] { letter-spacing: 0.01em; }
Et kategoribånd i fuld bredde, kant til kant under sidehovedet:
[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); }
Uden margin-top bliver der en hvid stribe på 2.5rem mellem sidehovedet og båndet. Teksten i båndet står på sidebredden og følger Theme › Layout.
Gem komponentens CSS med Save as new style, eller hele temaet under Your styles. Så kan du bruge CSS'en i en anden butik.
Kode i head
Panelet Code har to head-felter:
| Fane | Hvor koden havner | Brug til |
|---|---|---|
| HEAD · SITE | Hver side i butikken | Analyse, sporing og verificeringstags |
| HEAD · PAGE | Kun den side, du redigerer | Et canonical-link eller et socialt kort til netop den side |
Analyse hører hjemme under HEAD · SITE. En analysekode under HEAD · PAGE måler kun den side. Koden under HEAD · SITE ligger på temaet. Den følger kladden og går live, når du publicerer.
Google Tag Manager har et eget felt under Storefronts › [butik] › Analytics. Se Sporing og Google Tag Manager.
Hvad der gemmes
meta,link,styleog<script src="…">beholdes.- Inline-scripts fjernes. Det er kode skrevet mellem
<script>-tags. - Adresser skal starte med
https://. - Hændelsesattributter som
onclickfjernes.
Tilladte scriptværter
Et eksternt script køres kun fra disse værter:
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
Butikkens scriptpolitik stopper alle andre værter. Designeren gemmer ikke et head-felt, der peger uden for listen. Advarslen står ved koden, og meddelelsen viser Not saved med værtens navn.
Bemærk: Scripts i head køres først, når den besøgende har valgt »Acceptera alla« i cookiebanneret. Det gælder alle sider, også kassen og ordresiderne. Se Cookies og samtykke.
Sidens JS
JS i panelet Code køres på siden, i butikken og på arbejdsfladen.
- Koden køres én gang pr. sideindlæsning, når siden er indlæst.
- En fejl logges i browserens konsol og stopper ikke siden.
- CSS og JS på siden Collection gælder alle kategorisider.
Læg analyse og sporing under HEAD · SITE, bag cookiesamtykket. JS til en komponent skriver du i kodeeditoren. Den får komponentens rod som root, se Egen kode på en komponent.