Customizing Styles
Last updated
Was this helpful?
Last updated
Was this helpful?
In Sylius 2.x, customizing the visual appearance of the admin and shop interfaces is cleanly handled through CSS variables defined by the frontend frameworks used by each section:
Admin Panel: Uses variables, exposing mostly by --tblr-*
Shop Frontend: Uses Bootstrap variables, exposing mostly by --bs-*
This guide will walk you through how to locate, identify, and override these variables to implement custom themes or brand-aligned styles.
Before making any changes, you should identify the exact UI element you'd like to customize:
Open the relevant interface (Admin or Shop) in your browser.
Use Developer Tools (Right-click → Inspect)
In the Styles panel, look for applied custom properties (CSS variables), such as:
These variables are usually defined globally via the :root, body, or * selectors.
Once identified, you can override them in your own stylesheets to implement the desired look.
To customize the admin layout theme (e.g., button colors, backgrounds, etc.).
Let's inspect the Create button on the Taxon page. A few key facts:
The button class is .btn-primary
It relies on the variables --tblr-btn-bg and --tblr-btn-hover-bg
Create or edit a custom stylesheet:
Then include it in your admin entrypoint:
And build / rebuild your assets:
Result:
Inspect the button again:
--tblr-btn-bg uses --tblr-primary
--tblr-btn-hover-bg uses --tblr-primary-darken
Override these globally:
Rebuild assets:
Result:
The shop frontend uses Bootstrap, and its buttons rely on variables like --bs-btn-bg and --bs-btn-hover-bg.
Inspect a primary button in the shop (e.g., "Add to cart") and note:
Class: .btn-primary
Variables: --bs-btn-bg, --bs-btn-hover-bg
Override them like this:
Include this file in your shop entrypoint:
Rebuild your assets:
Result:
Sometimes it’s more effective to override the base variables used throughout Bootstrap, rather than styling individual components. However, the Shop theme is more granular than the Admin, so a few extra steps may be needed.
If you want to change the base primary color (e.g., from teal to red) across the entire shop, you’ll need to override several related variables. This includes buttons, links, and navigation elements—each of which may use distinct variables.
Here’s a comprehensive override example:
Using !important is not recommended in general, but may be necessary when overriding styles set on * or :root.
If you don’t want to search for every individual variable—or if customizations don’t apply as expected—you can target element values directly. However, this is not the preferred approach:
Rebuild assets:
Result:
As you’ve seen throughout this guide, the key to customizing your frontend styles is identifying the correct variables through inspection and then overriding them in your own stylesheets.
If you want to customize the grid system, spacing, or any other part of Sylius, simply inspect the element and update the relevant CSS variables accordingly.
To limit changes to specific parts of your application, consider scoping your overrides more precisely—for example, by targeting only the components you want to customize.
Clear Symfony and Browser Caches After Building Assets
If your style changes don’t appear after running yarn build, it’s likely due to caching. Symfony’s HTTP cache and your browser’s cache can both serve outdated assets.
Clear the Symfony cache:
Clear your browser cache (or try a hard refresh, typically Ctrl + Shift + R or Cmd + Shift + R).
These steps help ensure you’re seeing the most recent version of your styles, especially in development environments.
All the primary buttons are now red!
All the base layout colors have been changed to red!
All primary buttons in the shop are now red!
The primary theme color across the shop is now red!
