Storefronts
Your own CSS and head code
The four layers of your own CSS, the order in the cascade, px against rem, the two head fields, allowed script hosts, consent and the page's JS.
Here you add your own CSS and your own code in <head>.
Where: The Code panel in the designer. The panel shows with Advanced on. Theme › Custom CSS is in the Theme tab.
Four layers of CSS
| Layer | Where | Applies to |
|---|---|---|
| Section | Select the section and open Open the deep inspector | That section only |
| Component | Code › CSS in the code editor | The component on every page. Scoped to the component's root. See Your own code on a component |
| Page | CSS in the Code panel | Every section on the page |
| Theme | Theme › Custom CSS | The whole storefront, with header, footer, product page and category page. Comes with the theme when you save it as your own style |
A section of the Custom component type has its own CSS, scoped to the section.
The order in the cascade is the tokens CSS, the style, the theme CSS, the components' CSS and last the sections' and the page's CSS. A rule later in the order wins over the same rule earlier. A rule with !important wins wherever it is.
BunStack sanitises all CSS. What it removes and which variables you can use are under Hooks and CSS reference.
px or rem
Base under Theme › Typography sets font-size on html.
| Unit | Scales with Base | Used for |
|---|---|---|
rem | Yes | Text sizes, the sections' spacing, the header's padding top and bottom and the content column's margin (--bs-main-pad is 2.5rem) |
px | No | The logo's height, the icons, the corner radii, the buttons' corners, the page width (--bs-content-max) and the side margin (--bs-gutter) |
Write rem when the measure should follow the base size. Write px when the measure should stay fixed. For a header 32 px tall, write 32px. For spacing that follows the text, write 1.6rem.
Examples
Three looks on Product card are choices on the component panel. Grey plate: the Plate card under Look. The colour: Surface under Colours. No tag line: turn off Tag line under the title under Options. You need CSS only for what is not a choice, for example the title's letter spacing:
[data-bs-card-title] { letter-spacing: 0.01em; }
A full-width category band, edge to edge under the header:
[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); }
Without margin-top there is a white strip of 2.5rem between the header and the band. The text in the band sits at the page width and follows Theme › Layout.
Save the component's CSS with Save as new style, or the whole theme under Your styles. Then you can use the CSS in another storefront.
Code in head
The Code panel has two head fields:
| Tab | Where the code goes | Use for |
|---|---|---|
| HEAD · SITE | Every page in the storefront | Analytics, tracking and verification tags |
| HEAD · PAGE | Only the page you edit | A canonical link or a social card for that page only |
Analytics belongs under HEAD · SITE. Analytics code under HEAD · PAGE measures only that page. The code under HEAD · SITE is saved on the theme. It is part of the draft and goes live when you publish.
Google Tag Manager has its own field under Storefronts › [storefront] › Analytics. See Tracking and Google Tag Manager.
What is saved
- The designer keeps
meta,link,styleand<script src="…">. - It removes inline scripts, that is code written between the
<script>tags. - Addresses must start with
https://. - It removes event attributes such as
onclick.
Allowed script hosts
An external script runs only from these hosts:
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
The storefront's script policy stops every other host. The designer does not save a head field that points outside the list. The warning shows by the code, and the message reads Not saved — the shop does not run scripts from … with the host's name.
Note: The scripts in head run only after the visitor has chosen "Accept all" in the cookie banner. That applies to every page, including the checkout and the order pages. See Cookies and consent.
The page's JS
JS in the Code panel runs on the page, in the storefront and on the canvas.
- The code runs once per page load, when the page has loaded.
- An error goes to the browser console and does not stop the page.
- CSS and JS on the Collection page apply to every category page.
Put analytics and tracking under HEAD · SITE, behind the cookie consent. JS for a component goes in the code editor. It gets the component's root as root, see Your own code on a component.