Kaupat

Koukut ja CSS-viite

Kaupan HTML:n koukut komponenteittain, sivun koukut, komponentin CSS:n rajaus ja mitä CSS:n puhdistus poistaa.

Päivitetty viimeksi 24. lokakuuta 2026 · 11 min lukuaika

Koukut ovat kaupan HTML:n attribuutteja, joihin CSS:si voi kohdistua.

Missä: Käytetään koodieditorin kohdassa Code › CSS, paneelissa Code ja kohdassa Theme › Custom CSS. Katso Oma CSS ja head-koodi.

Oman HTML:n mallisyntaksi, muuttujat ja actionit ovat sivulla Malliviite.

Koukut komponenteittain

Koukkujen nimet eivät muutu ilman, että taulukko muuttuu. Jokaisella komponentilla on kolmenlaisia koukkuja:

juuri, johon komponentin CSS rajataan ja jonka JS saa nimellä root
sisäiset elementit
tilat, jotka kauppa asettaa juureen näyttääkseen näkymän

Tila kirjoitetaan juureen: [data-bs-header][data-bs-transparent], ei lapsena.

Komponentti	Koukku	Tyyppi	Arvot	Mitä
Header	`[data-bs-header]`	juuri		Ylätunniste jokaisella sivulla
Header	`[data-bs-header-inner]`	sisäinen		Rivi ylätunnisteen sisällä: sivun leveys valinnalla Page, sivumarginaaliin asti valinnalla Full
Header	`[data-bs-logo]`	sisäinen		Logolinkki. Kapealla puhelimella se kutistuu, jotta kuvakkeet ja valikkopainike mahtuvat näkyviin
Header	`[data-bs-header-nav]`	sisäinen	`start`, `end`	Linkkirivi asetteluissa Logo left ja Centered. Split-asettelussa se on kaksi puoliskoa
Header	`[data-bs-header-icons]`	sisäinen		Kuvakerivi Icons + panel -asettelussa
Header	`[data-bs-menu-button]`	sisäinen		Painike, joka avaa valikkopaneelin
Header	`[data-bs-cart-icon]`	sisäinen		Ostoskorikuvake
Header	`[data-bs-cart-count]`	sisäinen		Tuotteiden määrä ostoskorikuvakkeen vieressä, pidetään ajan tasalla
Header	`[data-bs-wishlist-icon]`	sisäinen		Toivelistakuvake
Header	`[data-bs-announcement]`	sisäinen		Ilmoituspalkki ylätunnisteen yläpuolella
Header	`[data-bs-transparent]`	tila		Asetetaan etusivulla, kun Transparent over hero on päällä
Header	`[data-bs-scrolled]`	tila		Asetetaan 24 px:n vierityksen jälkeen ja valikkopaneelin ollessa auki (vain läpinäkyvä ylätunniste)
Header	`[data-bs-sticky]`	tila		Asetetaan, kun Sticky on päällä
Header	`[data-bs-header-width]`	tila	`page`, `full`	Valinta Width: page asettaa rivin linjaan sivun sisällön kanssa, full vie sen sivumarginaaliin asti
Menu panel	`[data-bs-menu]`	juuri		Paneeli, joka avautuu ylätunnisteesta
Menu panel	`[data-bs-menu-layout]`	sisäinen	`split`, `mega`	Paneelin ruudukko: Shop + information (split) tai Links, products, contact (mega)
Menu panel	`[data-bs-menu-links]`	sisäinen		Isojen linkkien lista
Menu panel	`[data-bs-menu-link]`	sisäinen		Iso linkki. Rivikorkeus seuraa tekstikokoa. `data-active` merkitsee linkin, jota kortit seuraavat, `aria-current` sivun, jolla asiakas on
Menu panel	`[data-bs-menu-secondary]`	sisäinen		Pienten linkkien lista
Menu panel	`[data-bs-menu-products]`	sisäinen		Tuotesarake linkkien vieressä (Links, products, contact)
Menu panel	`[data-bs-menu-heading]`	sisäinen		Tuotteiden yläpuolinen otsikko, kun se on täytetty
Menu panel	`[data-bs-menu-cards]`	sisäinen		Kortit. Joukko vaihtuu aktiivisen linkin mukana
Menu panel	`[data-bs-menu-contact]`	sisäinen		Yhteystietorivi paneelin alalaidassa
Footer	`[data-bs-footer]`	juuri		Alatunniste jokaisella sivulla
Footer	`[data-bs-footer-inner]`	sisäinen		Rivi alatunnisteen sisällä: sivun leveys valinnalla Page, sivumarginaaliin asti valinnalla Full
Footer	`[data-footer-column]`	sisäinen	`brand`, `shop`, `help`, `legal`	Yksi alatunnisteen sarake
Footer	`[data-bs-footer-links]`	sisäinen		Sarakkeen linkkilista. Tässä token-CSS asettaa linkkien koon ja läpinäkyvyyden
Footer	`[data-bs-footer-social]`	sisäinen		Alarivin somelinkit. Tässä token-CSS piirtää linkkien ruudut
Footer	`[data-footer-copyright]`	sisäinen		Copyright-rivi
Footer	`[data-bs-footer-width]`	tila	`page`, `full`	Valinta Width, kuten Headerissa
Product card	`[data-bs-card]`	juuri		Yksi tuote ruudukossa. Kaikkialla missä tuotteita luetellaan
Product card	`[data-bs-card-media]`	sisäinen		Kuvalevy
Product card	`[data-bs-card-hover]`	sisäinen		Toinen kuva, joka näytetään hover-tilassa
Product card	`[data-bs-card-body]`	sisäinen		Otsikko, tagirivi ja hinta
Product card	`[data-bs-card-title]`	sisäinen		Otsikko
Product card	`[data-bs-card-meta]`	sisäinen		Tagirivi otsikon alla
Product card	`[data-bs-card-price]`	sisäinen		Hintarivi
Product card	`[data-bs-card-variant]`	tila	`card`, `plate`, `editorial`	Minkä pinnan kortti käyttää
Product page	`[data-bs-product-layout]`	juuri	`classic`, `split`	Tuotesivu: galleria ja ostopaneeli
Product page	`[data-bs-product-info]`	sisäinen		Ostopaneeli: otsikko, hinta, valinnat, lisää ostoskoriin
Product page	`[data-bs-swatch]`	sisäinen		Väripiste varianttivalitsimessa
Product page	`[data-bs-cta="primary"]`	sisäinen		Lisää ostoskoriin ja muut ensisijaiset painikkeet
Product page	`[data-bs-image-side]`	tila	`left`, `right`	Kummalla puolella galleria on (Split-asettelu)
Gallery	`[data-bs-gallery]`	juuri		Tuotekuvat tuotesivulla
Collection page	`[data-bs-category]`	juuri		Kokoelmasivu: kategoria, All products tai hakutulokset
Collection page	`[data-bs-category-header]`	sisäinen		Palkki, jossa kategorian nimi on
Collection page	`[data-bs-category-header-inner]`	sisäinen		Sarake palkin sisällä
Collection page	`[data-bs-collection-body]`	sisäinen		Suodattimet ja ruudukko. Desktop-koosta alkaen sivupalkki on ruudukon vieressä
Collection page	`[data-bs-filters-layout]`	sisäinen	`sidebar`, `top`, `none`	Miten sivu asettelee suodattimet
Collection page	`[data-bs-filters]`	sisäinen		Suodattimet, sivupalkissa tai rivissä, Desktop-koosta alkaen
Collection page	`[data-bs-filters-mode]`	sisäinen	`top`, `sidebar`	Miten suodattimet on aseteltu
Collection page	`[data-bs-sticky]`	sisäinen		Asetetaan suodattimiin ja riviin, kun Filters stay in view on päällä. Ruudukon yläpuoliseen riviin vain, kun sen suodattimet mahtuvat yhdelle riville
Collection page	`[data-bs-stuck]`	sisäinen		Asetetaan riviin, kun se pysyy ylätunnisteen alla
Collection page	`[data-bs-facet]`	sisäinen		Yksi suodatin ruudukon yläpuolella olevalla rivillä: painike ja lista
Collection page	`[data-bs-facet-panel]`	sisäinen		Arvolista, joka avautuu suodatinpainikkeen alle
Collection page	`[data-bs-open]`	sisäinen		Asetetaan suodattimeen, jonka lista on auki (yksi kerrallaan), ja avoimeen ryhmään
Collection page	`[data-bs-facet-group]`	sisäinen		Yksi ryhmä sivupalkissa ja puhelinpaneelissa: nimi ja arvot
Collection page	`[data-bs-facet-toggle]`	sisäinen		Ryhmän nimi, joka taittaa ryhmän kokoon
Collection page	`[data-bs-facet-body]`	sisäinen		Ryhmän osa, joka taittuu kokoon
Collection page	`[data-bs-facet-values]`	sisäinen		Ryhmän arvot. Yli 240 px:n kohdalla ne vierivät ryhmän sisällä
Collection page	`[data-bs-facet-value]`	sisäinen		Yksi arvo: ruutu, nimi ja määrä
Collection page	`[data-bs-on]`	sisäinen		Asetetaan rastitettuun arvoon
Collection page	`[data-bs-count]`	sisäinen		Määrä arvon perässä
Collection page	`[data-bs-clear-filters]`	sisäinen		Tyhjennä suodattimet (n), sivupalkin yläreunassa
Collection page	`[data-bs-cta="primary"]`	sisäinen		Tyhjennä suodattimet rivillä. Näytä N tuotetta puhelinpaneelissa
Collection page	`[data-bs-filter-bar]`	sisäinen	`count`	Ruudukon yläpuolinen rivi: määrä ja lajittelu. Puhelimessa ja tabletissa myös suodatinpainike. `count`, kun kumpaakaan ei ole: vain määrä, tekstirivi kaikilla näytöillä
Collection page	`[data-bs-filter-open]`	sisäinen		Suodatinpainike puhelimessa ja tabletissa
Collection page	`[data-bs-result-count]`	sisäinen		Kuinka monta tuotetta sivu näyttää
Collection page	`[data-bs-sort]`	sisäinen		Lajittelu
Collection page	`[data-bs-filter-panel]`	sisäinen		Puhelimen ja tabletin paneeli sivun päällä
Collection page	`[data-bs-filter-sheet]`	sisäinen		Itse paneeli, vasemmalta
Collection page	`[data-bs-filter-shade]`	sisäinen		Varjo paneelin takana
Collection page	`[data-bs-closing]`	sisäinen		Asetetaan paneeliin, kun se liukuu pois
Banners	`[data-bs-banner]`	juuri		Kuvabanneri sivun osioiden joukossa
Banners	`[data-bs-banner-inner]`	sisäinen		Tekstisarake kuvan päällä
Banners	`[data-bs-banner-heading]`	sisäinen		Otsikko
Banners	`[data-bs-banner-subtitle]`	sisäinen		Alaotsikko
Banners	`[data-bs-cta]`	sisäinen	`primary`, `light`, `outline`	Painike
Banners	`[data-bs-banner-img]`	sisäinen		Kuva bannerissa, jossa ei ole tekstiä. Korkeuden yläraja seuraa näyttöä
Banners	`[data-bs-banner-size]`	tila	`xs`, `sm`, `md`, `lg`, `xl`, `screen`	Korkeusvalinta tietokoneella
Banners	`[data-bs-banner-size-tablet]`	tila	`xs`, `sm`, `md`, `lg`, `xl`, `screen`	Korkeusvalinta tabletilla: oma tai tietokoneen
Banners	`[data-bs-banner-size-mobile]`	tila	`xs`, `sm`, `md`, `lg`, `xl`, `screen`	Korkeusvalinta puhelimessa: oma tai tabletin
Banners	`[data-bs-bleed]`	tila	`full`, `custom`	Full: banneri ulottuu reunasta reunaan. Custom: muu kuin sivun leveys

Sivun koukut

Koukku	Mitä
`[data-bs-main]`	Sisältösarake ylä- ja alatunnisteen välissä. Leveys on `--bs-content-max` ja sivumarginaali `--bs-gutter`
`[data-bs-block="<osion-id>"]`, `#bs-<osion-id>`	Osio millä tahansa sivulla. Toimii linkkien ankkurina. Custom component -osion CSS:n ja JS:n juuri
`[data-bs-section-width]`	Osion leveys osion kääreessä: `page`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `full` tai `custom`. Laskettu leveys on muuttujassa `--bs-sec-w`
`[data-bs-hide~="mobile"]`	Puhelimessa piilotettu osio (Show on). Arvot ovat `desktop`, `tablet` ja `mobile` välilyönnein erotettuina
`[data-bs-first-on~="mobile"]`	Ensimmäinen puhelimessa näkyvä osio, kun ensimmäinen osio on piilotettu siellä. Arvot ovat `desktop`, `tablet` ja `mobile` välilyönnein erotettuina
`[data-bs-video-frame]`	Video-osion soitin. `--bs-video-ratio` on videon leveys jaettuna korkeudella, esimerkiksi 1.7778 muodolle 16:9
`[data-bs-grid-more]`	"View all" -linkki tuoterivillä
`[data-bs-grid]`	Ruudukko osioissa Product grid, Categories, Gallery, Testimonials, Stats, Cards, Collection list ja Recently viewed. Sarakkeet näytöittäin (Per screen size) ovat muuttujissa `--bs-cols`, `--bs-cols-tablet` ja `--bs-cols-mobile`. Koukun `grid-template-columns` voittaa ilman `!important`-sääntöä
`[data-bs-cta="secondary"]`	Load more -painike tuoteruudukon alla
`[data-bs-section-tone]`	Osio, jonka Background ei ole Page. Arvo on `light`, `dark`, `brand` tai `custom`. Värit ovat muuttujissa `--bs-tone-bg` ja `--bs-tone-fg`, pystysuuntainen täyte muuttujassa `--bs-tone-pad`
`[data-bs-cards]`, `[data-bs-cards-item]`	Osio Cards arvolla `grid` tai `rows` ja yksi sen kortti. Korttien ulkoasu on määritteessä `[data-bs-cards-look]`: `plain`, `panel` tai `panel-line`
`--bs-main-pad`	Sisältösarakkeen pystysuuntainen marginaali, 2.5rem. `margin-top: calc(-1 * var(--bs-main-pad))` vetää osion kiinni ylätunnisteeseen
`--bs-content-max`	Sivun leveys kohdasta Theme › Layout, esimerkiksi 1024px
`--bs-gutter`	Sivumarginaali: puhelimessa 16px, tabletilla 24px ja tietokoneella 32px
`[data-bs-legal-line]`	Peruutusoikeuslinkin rivi oman alatunnisteen alla tai sivulla ilman alatunnistetta. `[data-bs-legal-line-inner]` on rivi sen sisällä
`--bs-header-offset`	Ylätunnisteen korkeus, kun se pysyy näkyvissä sivua vieritettäessä, muuten 0. Kokoelmasivujen suodattimet ovat sen alla, kun Filters stay in view on päällä

Tokenien CSS:n säännöt

Nämä ovat tokenien CSS:n sääntöjä, eivät elementtien inline-tyylejä:

ylätunnisteen täyte, väri, tausta ja reuna
alatunnisteen linkit
bannerin otsikko, alaotsikko, korkeus ja kulmat
bannerin painikkeen värit
tuotekortin alusta ja kuvan kulmat
ruudukoiden sarakkeet näytöittäin
sivun leveys ja sivumarginaali, ylä- ja alatunnisteen rivit ja osioiden leveys
näytöt, joilla osio näkyy, ja bannerin korkeus näytöittäin
kokoelmasivujen suodattimet: sivupalkki, rivi ja puhelimen ja tabletin kapea rivi

Tavallinen sääntö koukussa voittaa tokenien CSS:n ilman !important-merkintää. Vain sääntö, jossa on !important kohdassa Theme › Custom CSS tai komponenttityylin omassa CSS:ssä, menee edelle.

Näin komponentin CSS rajataan

Kohdan Code › CSS CSS koskee vain komponenttia. Jokaisen valitsimen eteen lisätään komponentin juuri, kun teema käännetään. Tämä koskee myös @media-, @supports-, @container- ja @layer-lohkojen sisältöä.

Kirjoitat	Kauppa saa
`nav a { … }`	`[data-bs-header] nav a { … }`
`[data-bs-header] nav a { … }`	Ennallaan. Juuri on jo mukana
`& { padding: 32px; }` tai `[data-bs-header] { … }`	Itse juuren sääntö
`:hover { … }`	`[data-bs-header]:hover { … }`
`[data-bs-transparent]:not([data-bs-scrolled]) svg { … }`	`[data-bs-header][data-bs-transparent]:not([data-bs-scrolled]) svg { … }`. Juuren tila liitetään juureen
`:root { … }`, `html { … }`, `body { … }`	Ennallaan, varoituksen kera. Säännöt ulottuvat koko sivulle
`@keyframes`, `@font-face`	Ennallaan. `@font-face`-säännön `src`-arvon on osoitettava mediakirjaston tiedostoon
`@import …;`	Poistetaan

[data-bs-transparent]:not([data-bs-scrolled]) svg { stroke-width: 1.4; }

CSS:n puhdistus

Kaikki CSS puhdistetaan komponenteissa, osioissa, sivuilla ja teemassa.

< poistetaan, joten </style>-tagia ei voi muodostua.
@import, expression(), javascript: ja muut skriptireitit poistetaan.
> säilyy, joten lapsikombinaattorit, kuten [data-bs-menu] > a, toimivat. ::before ja ::after säilyvät.
!important säilyy. Komponentin CSS tulee tokenien CSS:n, tyylin ja kohdan Theme › Custom CSS jälkeen, joten tavallinen sääntö koukussa riittää yleensä.

CSS, jota ei voi lukea, poistetaan varoituksella, joka nimeää sen. Varoitus näkyy suunnittelutyökalussa ja muodossa  kaupan HTML:ssä.

Sääntö, jota ei koskaan suljeta, poistetaan.
Teksti, joka ei ole CSS:ää, poistetaan erikseen. Sitä ei koskaan liitetä seuraavaan sääntöön.
Seuraavalle riville jatkuva valitsin tarvitsee rivinvaihdon kohdalle pilkun tai kombinaattorin. Muuten ensimmäinen rivi tulkitaan huomautukseksi ja poistetaan.

Muu CSS toimii.

Fontit

Lataa fontti muodossa .woff2 tai .woff mediakirjastoon.
Paina tiedoston kohdalla Copy URL.
Osoita @font-face { src: url(…) } tähän osoitteeseen.

Kaupan käytäntö lataa fontit vain mediakirjastosta. Muusta osoitteesta tuleva fontti ei lataudu kaupassa eikä työtilassa.

Teeman muuttujat

Hae värit, fontit ja säteet teeman muuttujista. Silloin ne seuraavat teemaa:

Muuttuja	Arvo
`var(--bunstack-color-primary)`	Pääväri
`var(--bunstack-color-fg)`	Tekstin väri
`var(--bunstack-font-heading)`	Otsikkofontti
`var(--bs-surface)`	Korttien ja alustojen pintaväri
`var(--bs-radius-lg)`	Kuvien kulmat
`var(--bunstack-button-radius)`	Painikkeiden kulmat

Koukut ja CSS-viite

#Koukut komponenteittain

#Sivun koukut

#Tokenien CSS:n säännöt

#Näin komponentin CSS rajataan

#CSS:n puhdistus

#Fontit

#Teeman muuttujat