SyliusCon 2025 in Lyon
Join Us!
LogoLogo
πŸ›£οΈ RoadmapπŸ’» Sylius DemoπŸ’¬ Community Slack
  • Sylius Documentation
  • Sylius Plugins
  • Sylius Stack
  • πŸ“–Sylius Documentation
  • Organization
    • Sylius Team
  • Release Cycle
    • Backwards Compatibility Promise
  • Getting Started with Sylius
    • Installation
    • Basic Configuration
    • Shipping & Payment
    • First Product
    • Customizing the Shop
    • Customizing Business Logic
    • Using API
    • Installing Plugins
    • Deployment
    • Summary
  • The Book
    • Introduction to Sylius
    • Installation
      • System Requirements
      • Sylius CE Installation
        • Sylius CE Installation with Docker
      • βž•Sylius Plus Installation
      • Upgrading Sylius CE
      • Upgrading Sylius Plus
    • Architecture
      • Architecture Overview
      • Architectural Drivers
      • Resource Layer
      • State Machine
      • Translations
      • E-Mails
      • Contact
      • Fixtures
      • Events
    • Configuration
      • Channels
      • Locales
      • Currencies
    • Customers
      • Customer & ShopUser
      • βž•Customer Pools
      • AdminUser
      • Addresses
        • Countries
        • Zones
        • Addresses
        • Address Book
    • Products
      • Products
      • Product Reviews
      • Product Associations
      • Attributes
      • Pricing
      • Catalog Promotions
      • Taxons
      • Inventory
      • βž•Multi-Source Inventory
      • Search
    • Carts & Orders
      • Orders
      • Cart flow
      • Taxation
      • Adjustments
      • Cart Promotions
      • Coupons
      • Payments
      • 🧩Invoices
      • Shipments
    • 🎨Frontend & Themes
    • Support
    • Contributing
      • Contributing Code
        • Submitting a Patch
        • ⚠️Security Issues
        • Coding Standards
        • Conventions
        • Sylius License and Trademark
      • Contributing Translations
      • Key Contributors
  • The Customization Guide
    • Customizing Models
      • How to add a custom model?
      • How to add a custom translatable model?
    • Customizing Forms
      • How to add a live form for a custom model?
    • Customizing Templates
    • Customizing Styles
    • Customizing Dynamic Elements
    • Customizing Validation
    • Customizing Menus
    • Customizing Translations
    • Customizing Flashes
    • Customizing State Machines
    • Customizing Grids
    • Customizing Fixtures
    • Customizing API
    • Customizing Serialization of API
    • Customizing Payments
      • How to integrate a Payment Gateway as a Plugin?
  • πŸ§‘β€πŸ³The Cookbook
  • How to resize images?
  • How to add one image to an entity?
  • How to add multiple images to an entity?
  • How to add a custom cart promotion action?
  • How to add a custom cart promotion rule?
  • Sylius 1.X Documentation
    • πŸ““Sylius 1.x Documentation
Powered by GitBook
LogoLogo

Developer

  • Community
  • Online Course

About

  • Team

Β© 2025 Sylius. All Rights Reserved

On this page
  • Frontend Customization Use Cases
  • Frontend Tech Stack Overview
  • Documentation Resources for Frontend Customization

Was this helpful?

Edit on GitHub
  1. The Book

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:

PreviousShipmentsNextSupport

Last updated 7 days ago

Was this helpful?

Learn how to modify Twig templates using Twig hooks, override existing templates, and implement themes to alter the layout and structure of your storefront.

Discover methods to adjust styles using Bootstrap 5 variables, override CSS, and manage assets with Webpack Encore for a tailored visual appearance.

Understand how to enhance interactivity by integrating StimulusJS controllers, utilizing Symfony UX, and injecting dynamic behavior through Twig hooks.

Explore techniques to modify forms, including adding or removing fields, altering labels, and implementing live components for dynamic form interactions.

Add new menu items or modify existing ones in both the Shop and Admin panels.

Customize flash messages for success, error, and info feedback using Twig and Bootstrap-compatible styles.

Extend or modify admin data tables (called β€œgrids”), including filtering, sorting, and adding custom actions.

🎨
Customizing Templates
Customizing Styles
Customizing Dynamic Elements
Customizing Forms
Customizing Menus
Customizing Flashes
Customizing Grids