Frontend & Themes
This guide helps frontend developers navigate the Sylius documentation to create a custom look and feel for their Sylius 2.0 projects. With the move to Bootstrap 5 and Symfony UX, customizing styles, templates, and behavior is now more streamlined. Whether you're adjusting layouts, branding, or building full themes, this page points you to the right tools and docs to get it done.
Frontend Customization Use Cases
With the adoption of Bootstrap, customizing the Sylius frontend has become more straightforward. Common customization scenarios include:
Template Customization:
Modifying existing Twig templates to change the layout or content of pages.
Overriding templates to implement custom designs or functionalities.
Styling and Branding:
Customizing Bootstrap variables (e.g.,
--bs-primary
) to align with brand colors.Adding custom CSS or SCSS to override default styles
JavaScript Enhancements:
Integrating custom JavaScript functionalities using Stimulus controllers.
Replacing or extending default behaviors to meet specific requirements.
Theme Development:
Creating and applying custom themes to different channels, allowing for varied presentations across storefronts.
Frontend Tech Stack Overview
In Sylius 2.0, the frontend is built upon the following technologies:
Templating Engine: Utilizes Twig, Symfony's default templating engine, for rendering views.
CSS Framework: Adopts Bootstrap 5 for styling both the Shop and Admin interfaces, replacing the previous Semantic UI framework.
JavaScript: Incorporates Symfony UX components, including Stimulus and Twig Components, to enhance interactivity and maintainability.
Asset Management: Employs Webpack Encore, Symfony's wrapper for Webpack, facilitating the compilation and optimization of CSS, JavaScript, and other assets.
Theming System: Supports a theming system that allows for the customization and overriding of templates, assets, and translations on a per-channel basis.
Documentation Resources for Frontend Customization
To effectively customize the Sylius frontend, refer to the following documentation sections:
Last updated
Was this helpful?