Butikker
Egen CSS og kode i head
De fire lagene egen CSS, rekkefølgen i kaskaden, px mot rem, de to head-feltene, tillatte skriptverter, samtykke og sidens JS.
Her legger du inn egen CSS og egen kode i <head>.
Hvor: Panelet Code i designeren. Panelet vises med Advanced på. Theme › Custom CSS finnes i fanen Theme.
Fire lag CSS
| Lag | Hvor | Gjelder |
|---|---|---|
| Seksjon | Marker seksjonen og åpne Open the deep inspector | Bare den seksjonen |
| Komponent | Code › CSS i koderedigereren | Komponenten på alle sider. Avgrenses til komponentens rot. Se Egen kode på en komponent |
| Side | CSS i panelet Code | Alle seksjoner på siden |
| Tema | Theme › Custom CSS | Hele butikken, med topptekst, bunntekst, produktside og kategoriside. Blir med når du lagrer temaet som egen stil |
En seksjon av typen Custom component har egen CSS, avgrenset til seksjonen.
Rekkefølgen i kaskaden er tokens-CSS-en, stilen, tema-CSS-en, komponentenes CSS og til sist seksjonenes og sidens CSS. En regel senere i rekkefølgen vinner over samme regel tidligere. En regel med !important vinner uansett hvor den står.
All CSS renses. Hva som fjernes og hvilke variabler du kan bruke, står under Kroker og CSS-referanse.
px eller rem
Base under Theme › Typography setter font-size på html.
| Enhet | Skalerer med Base | Brukes til |
|---|---|---|
rem | Ja | Tekststørrelser, seksjonenes avstand, topptekstens utfylling oppe og nede og innholdskolonnens marg (--bs-main-pad er 2.5rem) |
px | Nei | Logoens høyde, ikonene, hjørneradiene, knappenes hjørner, sidebredden (--bs-content-max) og sidemargen (--bs-gutter) |
Skriv rem når målet skal følge basisstørrelsen. Skriv px når målet skal stå fast. En topptekst som skal være 32 px høy, skrives 32px. En avstand som skal følge teksten, skrives 1.6rem.
Eksempler
Tre utseender på Product card er valg på komponentpanelet. Grå plate: kortet Plate under Look. Fargen: Surface under Colours. Uten tagline: slå av Tag line under the title under Options. CSS trengs bare for det som ikke er et valg, for eksempel titlens bokstavavstand:
[data-bs-card-title] { letter-spacing: 0.01em; }
Et kategoribånd i full bredde, kant i kant under toppteksten:
[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); }
Uten margin-top blir det en hvit stripe på 2.5rem mellom toppteksten og båndet. Teksten i båndet står på sidebredden og følger Theme › Layout.
Lagre komponentens CSS med Save as new style, eller hele temaet under Your styles. Da kan du bruke CSS-en i en annen butikk.
Kode i head
Panelet Code har to head-felt:
| Fane | Hvor koden havner | Bruk til |
|---|---|---|
| HEAD · SITE | Hver side i butikken | Analyse, sporing og verifiseringstagger |
| HEAD · PAGE | Bare siden du redigerer | En canonical-lenke eller et sosialt kort for akkurat den siden |
Analyse hører hjemme under HEAD · SITE. En analysekode under HEAD · PAGE måler bare den siden. Koden under HEAD · SITE ligger på temaet. Den følger utkastet og går live når du publiserer.
Google Tag Manager har et eget felt under Storefronts › [butikk] › Analytics. Se Sporing og Google Tag Manager.
Hva som lagres
meta,link,styleog<script src="…">beholdes.- Inline-skript fjernes. Det er kode skrevet mellom
<script>-taggene. - Adresser må starte med
https://. - Hendelsesattributter som
onclickfjernes.
Tillatte skriptverter
Et eksternt skript kjøres bare fra disse vertene:
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 skriptpolicy stopper alle andre verter. Designeren lagrer ikke et head-felt som peker utenfor listen. Advarselen står ved koden, og meldingen viser Not saved med vertens navn.
Merk: Skriptene i head kjøres først når den besøkende har valgt «Acceptera alla» i cookiebanneret. Det gjelder alle sider, også kassen og ordresidene. Se Cookies og samtykke.
Sidens JS
JS i panelet Code kjøres på siden, i butikken og på arbeidsflaten.
- Koden kjøres én gang per sideinnlasting, når siden er lastet.
- En feil logges i nettleserens konsoll og stopper ikke siden.
- CSS og JS på siden Collection gjelder alle kategorisider.
Legg analyse og sporing under HEAD · SITE, bak cookiesamtykket. JS for en komponent skriver du i koderedigereren. Den får komponentens rot som root, se Egen kode på en komponent.