Shopware 6.7 · live theme
Storefront styleguide
Every building block of the storefront on one page. Values are read from the active theme at runtime — nothing is typed by hand.
Colours & tokens
Brand colours — theme config
(active theme)
sw-color-brand-primary
var(--sw-color-brand-primary)
sw-color-brand-secondary
var(--sw-color-brand-secondary)
sw-border-color
var(--sw-border-color)
sw-background-color
var(--sw-background-color)
sw-color-success
var(--sw-color-success)
sw-color-info
var(--sw-color-info)
sw-color-warning
var(--sw-color-warning)
sw-color-danger
var(--sw-color-danger)
sw-text-color
var(--sw-text-color)
sw-headline-color
var(--sw-headline-color)
sw-color-price
var(--sw-color-price)
sw-color-buy-button
var(--sw-color-buy-button)
sw-color-buy-button-text
var(--sw-color-buy-button-text)
Semantic
Primary
var(--bs-primary)
Secondary
var(--bs-secondary)
Success
var(--bs-success)
Info
var(--bs-info)
Warning
var(--bs-warning)
Danger
var(--bs-danger)
Grayscale
White
var(--bs-white)
Gray-100
var(--bs-gray-100)
Gray-200
var(--bs-gray-200)
Gray-300
var(--bs-gray-300)
Gray-400
var(--bs-gray-400)
Gray-600
var(--bs-gray-600)
Gray-800
var(--bs-gray-800)
Gray-900
var(--bs-gray-900)
Black
var(--bs-black)
Background layers
Body bg
var(--bs-body-bg)
Secondary bg
var(--bs-secondary-bg)
Tertiary bg
var(--bs-tertiary-bg)
Subtle backgrounds
Primary subtle
var(--bs-primary-bg-subtle)
Secondary subtle
var(--bs-secondary-bg-subtle)
Success subtle
var(--bs-success-bg-subtle)
Info subtle
var(--bs-info-bg-subtle)
Warning subtle
var(--bs-warning-bg-subtle)
Danger subtle
var(--bs-danger-bg-subtle)
Light subtle
var(--bs-light-bg-subtle)
Dark subtle
var(--bs-dark-bg-subtle)
Borders
Border default
var(--bs-border-color)
Primary border subtle
var(--bs-primary-border-subtle)
Secondary border subtle
var(--bs-secondary-border-subtle)
Success border subtle
var(--bs-success-border-subtle)
Info border subtle
var(--bs-info-border-subtle)
Warning border subtle
var(--bs-warning-border-subtle)
Danger border subtle
var(--bs-danger-border-subtle)
Text & links
Body color
var(--bs-body-color)
Heading color
var(--bs-heading-color)
Primary text emphasis
var(--bs-primary-text-emphasis)
Link color
var(--bs-link-color)
Link hover color
var(--bs-link-hover-color)
Code color
var(--bs-code-color)
Highlight bg
var(--bs-highlight-bg)
Focus & gradient
Focus ring
var(--bs-focus-ring-color)
Gradient
var(--bs-gradient)
Typography
Body
Sample product copy — 1234567890. This line uses the body settings of the active theme.
Headings
Display headings
H1
H2
H3
H4
H5
H6
Display headings
D6
D5
D4
D3
Font weights
.fw-light
.fw-normal
.fw-semibold
.fw-bold
Inline &
emphasis
Strong, emphasis, mark,
inline code, ⌘K, ABC, small text.
Lead copy for a short introduction above the tabs.
Small, supporting copy.
Text
utilities
uppercase (.text-uppercase)
LOWERCASE (.text-lowercase)
capitalized words (.text-capitalize)
underline (.text-decoration-underline)
strikethrough (.text-decoration-line-through)
italic (<em>)
Blockquote
Quote caption
This is a blockquote.
Lists
ul- Sample item one
- Sample item two
- Sample item three
ol- Step one
- Step two
- Step three
dl- Width
- 506 cm
- Depth
- 300 cm
Text extras
Truncate (single line)
Sample product name that is long enough to be cut off
on a single line.
.text-truncate (needs a
fixed width)Font size utilities
.fs-1
.fs-2
.fs-3
.fs-4
.fs-5
.fs-6
Line height
.lh-1Sample paragraph showing the line height of this utility across multiple lines.
.lh-smSample paragraph showing the line height of this utility across multiple lines.
.lh-baseSample paragraph showing the line height of this utility across multiple lines.
.lh-lgSample paragraph showing the line height of this utility across multiple lines.
Wrap & break
.text-wrap (default) — regular copy wraps on word
boundaries.
.text-wrap.text-break —
ArticleNumberWithoutSpaces1234567890ABCDEFGHIJKLMNOP breaks so
nothing overflows.
.text-breakLinks
Colour variants —
.link-*
Hover &
focus
Read the documentation for more information.
Stretched
link
Note
- The parent must be
position: relative(e.g..card-body).
Tables
Basic
| # | Product | Status | Price |
|---|---|---|---|
| 1 | Cell | Badge success | Cell |
| 2 | Cell | Badge warning | Cell |
| 3 | Cell | Badge secondary | Cell |
Striped & hover
| # | Heading | Heading | Heading |
|---|---|---|---|
| 01 | Cell | Cell | Cell end |
| 02 | Cell | Cell | Cell end |
| 03 | Cell | Cell | Cell end |
Row / cell variants
| Variant | Example |
|---|---|
.table-primary |
Primary row |
.table-secondary |
Secondary row |
.table-success |
Success row |
.table-info |
Info row |
.table-warning |
Warning row |
.table-danger |
Danger row |
.table-light |
Light row |
.table-dark |
Dark row |
| Cell variant | Applied to a single <td> |
Images & figures
.img-fluid
.img-thumbnail
figure +
figcaption
Figure Caption
.ratio.ratio-16x9 — mood
image placeholder
mood image 16:9
.ratio.ratio-1x1 —
product photo
1:1
.ratio.ratio-4x3
4:3
Missing product
image — Shopware fallback
Product gallery — Bootstrap
carousel with thumbnail navigation
Controls
Help text below a form field.
Checks & radios
Input groups
PrefixSuffix
.header-search-input
+ .header-search-btn — submits a real search
@
Label
Unit
.quantity-selector-group
— Shopware QuantitySelector plugin
Floating labels
Validation
Success message.
Error message.
Success message.
Error message.
Accordion
Sample specification 1, sample specification 2, sample
specification 3.
Sample copy about mounting and installation.
10-year warranty on this part.
Alerts
Alert primary
Alert secondary
Alert info
Alert success
Alert warning
Alert danger
Alert light
Alert dark
Alert danger — dismissible
Alert danger — heading
- List item 1
- List item 2
Badges
Heading + badge
Colour variants —
Sample heading New
Sample heading New
Sample heading New
Sample heading New
Sample heading New
Sample heading New
.text-bg-*
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Shopware usage —
.badge-discount, .badge-lg
%
Badge lg
Badge success
Badge warning
Badge secondary pill
Cards
.product-box.box-standard
%
Brand name
Product name
-
Feature list item label 1 Feature value 1
-
Feature list item 2 Feature value 2
-
Feature list item 3 Feature value 3
€1.999
€2.999(XX.XX%
saved)
.card with header
& footer
card-header
Info card with header and footer
Variant with .card-header and
.card-footer, for grouped content.
.card with
image
Carousel
Gallery — indicators,
controls & captions
Dropdowns
List group
- List item — active
- List item
- List item — disabled
- List item with badge12
Modal
Offcanvas
Shopping cart
Sample article
2 × €189.00
Pagination
Progress
Spinners & loaders
Loading…
Loading…
Loading…
Toasts
Shopping cart
just now
Sample article added to your shopping cart.
Tooltips & popovers
Helpers
.icon-link · .link-*
· .focus-ring
.text-truncate · .vr
· .hstack
Sample copy that is truncated at a fixed width
Incl. VAT
Free shipping
10-year warranty
.position-relative +
.stretched-link
Whole card is clickable
View
Utilities
Backgrounds
.bg-primary
.bg-primary-subtle
.bg-body-secondary
.bg-body-tertiary
Text
.text-primary
.text-body-secondary
.text-success
.text-danger
.fw-bold
.text-uppercase
Borders &
radius
.border
.border-primary
.rounded
.rounded-pill
Spacing scale — bar
height =
.pt-*
1
2
3
4
5
Each bar is an empty element with
.pt-1 … .pt-5, so its height is the spacer itself.
Flex &
grid
.col-6
.col-3
.col-3
startbetweenend