Butiker
Egen CSS och kod i head
De fyra lagren egen CSS, ordningen i kaskaden, px mot rem, de två head-fälten, tillåtna skriptvärdar, samtycke och sidans JS.
Här lägger du egen CSS och egen kod i <head>.
Var: Panelen Code i designern. Panelen visas med Advanced på. Theme › Custom CSS finns i fliken Theme.
Fyra lager CSS
| Lager | Var | Gäller |
|---|---|---|
| Sektion | Markera sektionen och öppna Open the deep inspector | Bara den sektionen |
| Komponent | Code › CSS i kodredigeraren | Komponenten på alla sidor. Avgränsas till komponentens rot. Se Egen kod på en komponent |
| Sida | CSS i panelen Code | Alla sektioner på sidan |
| Tema | Theme › Custom CSS | Hela butiken, med sidhuvud, sidfot, produktsida och kategorisida. Följer med när du sparar temat som egen stil |
En sektion av typen Custom component har egen CSS, avgränsad till sektionen.
Ordningen i kaskaden är tokens-CSS:en, stilen, tema-CSS:en, komponenternas CSS och sist sektionernas och sidans CSS. En regel senare i ordningen vinner över samma regel tidigare. En regel med !important vinner var den än står.
BunStack sanerar all CSS. Krokar och CSS-referens visar vad som tas bort och vilka variabler du kan använda.
px eller rem
Base under Theme › Typography sätter font-size på html.
| Enhet | Skalar med Base | Används för |
|---|---|---|
rem | Ja | Textstorlekar, sektionernas avstånd, sidhuvudets utfyllnad uppe och nere och innehållskolumnens marginal (--bs-main-pad är 2.5rem) |
px | Nej | Logotypens höjd, ikonerna, hörnradierna, knapparnas hörn, sidbredden (--bs-content-max) och sidomarginalen (--bs-gutter) |
Skriv rem när måttet ska följa basstorleken. Skriv px när måttet ska stå fast. Skriv 32px för ett sidhuvud som ska vara 32 px högt. Skriv 1.6rem för ett avstånd som ska följa texten.
Exempel
Tre utseenden på Product card är val i komponentpanelen. Grå platta: kortet Plate under Look. Färgen: Surface under Colours. Utan tagline: slå av Tag line under the title under Options. CSS behövs bara för det som inte är ett val, till exempel titelns bokstavsavstånd:
[data-bs-card-title] { letter-spacing: 0.01em; }
Ett kategoriband i full bredd, kant i kant under sidhuvudet:
[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); }
Utan margin-top blir det en vit remsa på 2.5rem mellan sidhuvudet och bandet. Texten i bandet står på sidbredden och följer Theme › Layout.
Spara komponentens CSS med Save as new style, eller hela temat under Your styles. Då kan du använda CSS:en i en annan butik.
Kod i head
Panelen Code har två head-fält:
| Flik | Var koden hamnar | Använd för |
|---|---|---|
| HEAD · SITE | Varje sida i butiken | Analys, spårning och verifieringstaggar |
| HEAD · PAGE | Bara sidan du redigerar | En canonical-länk eller ett socialt kort för just den sidan |
Analys hör hemma under HEAD · SITE. En analyskod under HEAD · PAGE mäter bara den sidan. Koden under HEAD · SITE hör till temat. Den sparas i utkastet och går live när du publicerar.
Google Tag Manager har ett eget fält under Storefronts › [butik] › Analytics. Se Spårning och Google Tag Manager.
Vad som sparas
meta,link,styleoch<script src="…">behålls.- Inline-skript tas bort. Det är kod skriven mellan
<script>-taggarna. - Adresser måste börja med
https://. - Händelseattribut som
onclicktas bort.
Tillåtna skriptvärdar
Ett externt skript körs bara från dessa värdar:
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
Butikens skriptpolicy stoppar alla andra värdar. Designern sparar inte ett head-fält som pekar utanför listan. Varningen står vid koden. Meddelandet lyder till exempel Not saved — the shop does not run scripts from example.com. Remove that tag under Code, or use an allowed host.
Obs: Skripten i head körs först när besökaren har valt ”Acceptera alla” i cookiebannern. Det gäller alla sidor, även kassan och ordersidorna. Se Cookies och samtycke.
Sidans JS
JS i panelen Code körs på sidan, i butiken och på arbetsytan.
- Koden körs en gång per sidladdning, när sidan har laddats.
- Ett fel loggas i webbläsarens konsol och stoppar inte sidan.
- CSS och JS på sidan Collection gäller alla kategorisidor.
Lägg analys och spårning under HEAD · SITE, bakom cookiesamtycket. JS för en komponent skriver du i kodredigeraren. Den får komponentens rot som root, se Egen kod på en komponent.