Log in with Sylius Connect
Sylius
Sylius
Sylius Plus
Sylius Plus
Addons
Addons
Academy
Academy
Docs
Docs
Support
Support
Contact us
Contact us

Frontend Overview

Frontend Overview
Buy this course
Previous Video
Next Video

In this episode, learners are introduced to Sylius’s frontend architecture — a modern and flexible foundation for building fully customizable e-commerce stores. The platform combines proven technologies and developer-friendly tools to deliver elegant and functional interfaces.

We walk through:

  • how the Twig templating engine enables reusable, extendable views with logic and inheritance,
     
  • how Semantic UI provides a consistent styling system, and how it can be replaced with frameworks like Tailwind CSS or Bootstrap,
     
  • how jQuery powers interactive elements such as modals, dropdowns, and AJAX cart updates, and how it can be extended using Vue or React,
     
  • how Webpack Encore manages frontend assets (JS, CSS, images, fonts) with ease and flexibility.
     

By the end, developers will have a clear understanding of how to work with and extend Sylius’s frontend layer — from quick styling to advanced interactive features.

Your study Progress
0%

Course Chapters

0%
Introduction to Sylius Academy. Learn Sylius architecture, testing, extensions, and plugins. Hands-on lessons with a GitHub repo prepare you for certification.
0%
Discover Sylius – a flexible, headless eCommerce framework built on Symfony. Learn how it differs from traditional platforms, its editions, and the business challenges it solves.
0%
Set up your Sylius development environment. Learn system requirements and two installation methods: traditional and Docker-based, to quickly launch a ready-to-code application.
0%
Traditional Sylius installation – full control over your environment. Learn to check compatibility, configure the database, and run the application locally.
0%
Sylius installation with Docker – quick, hassle-free setup without manual dependency configuration. Learn to use Makefile, install components, and launch the application.
0%
Discover Sylius Resource Bundle – a tool that automates CRUD operations and removes repetitive code. Full resource support with just a few lines of configuration.
0%
Create a custom resource in Sylius with the Brand example. Register the entity in the Resource Bundle to get CRUD (controller/form/repository/factory), run DB migrations, and verify logic with a simple CLI.
0%
Learn how to extend an existing Sylius resource by adding a Brand relation to a product. Discover model overriding, resource debugging, and testing logic without a frontend.
0%
Discover the Sylius Resource Controller – the default CRUD handling in the admin panel. Learn to configure routes, templates, and use automatic form rendering.
0%
Learn how to create a custom form in Sylius, e.g., with a dropdown based on constants. Using Brand as an example, you’ll add fields, build a FormType, and integrate it with the admin panel.
0%
Learn how to extend an existing Sylius form by adding a Brand field to the product form. Discover resource debugging, creating TypeExtension, and modifying admin templates.
0%
Learn to create a custom repository in Sylius, e.g., to filter enabled brands in the product form. Add an enabled field, build createEnabledQueryBuilder, and integrate it with the form.
0%
Learn how to customize an existing Sylius repository to return only products with a brand. Create a route, Twig template, and add a link to the shop navigation menu.
0%
Learn how to customize a Sylius factory to automatically set the creation date for Brand entities. Implement FactoryInterface, decorate the default factory, and override createNew().
0%
Learn to customize a Sylius controller to add dynamic data, e.g., product ratings from an API. Override the show() method, pass data to a Twig view, and configure the controller in sylius.yaml.
0%
Discover Sylius Resource Controller events to react to CRUD actions without modifying the controller. Learn to listen to events like sylius.brand.pre_update and implement business logic.
0%
Learn to use Sylius resource controllers directly in Twig to build dynamic frontend components. Using a brand menu example, you’ll create a view, route, and repository logic.
0%
Discover Sylius Grid Bundle – a tool for managing resource lists in the admin panel. Learn to add pagination, filtering, sorting, and actions without writing controllers.
0%
Create a custom admin grid in Sylius for the Brand entity. Configure fields, filtering, sorting, and actions (including bulk delete) – all without writing controllers.
0%
Add a new “Brands” item to the Sylius admin menu under the Catalog section. Use the sylius.menu.admin.main event to hook into menu rendering and link to the brand grid.
0%
Learn to customize an existing Sylius grid by adding a brand filter to products, reordering columns, and removing unused fields – all without modifying vendor code.
0%
Create a custom Sylius admin grid action – a “Show products” button in the brand grid linking to a brand’s product list. Add a Twig template, configuration, and dynamic parameters.
0%
Add a custom field to the Sylius admin grid – a dynamic counter of products assigned to a brand. Implement FieldTypeInterface, register the service, and configure the field in YAML.
0%
Learn Sylius localization and translation – from multi-language URLs to managing UI and content translations. Discover how the fallback mechanism ensures smooth multilingual support.
0%
Learn to manage static translations in Sylius – from YAML files to sylius.ui.* keys used in grids, forms, menus, and Twig views.
0%
Learn to make specific entity fields translatable in Sylius – using the brand description as an example. Create a BrandTranslation class and integrate it with forms and views.
0%
Learn the basics of the Sylius State Machine – managing object lifecycles. Discover states, transitions, guards, and callbacks through examples from orders and payments.
0%
Create a custom state machine for the Brand resource in Sylius, modeling an approval workflow. Define states and transitions, add grid action buttons, and use Symfony Workflow.
0%
Enhance the default Sylius shipment state machine by adding preparation and waiting-for-pickup states. Configure Symfony Workflow and integrate logic with an event listener.
0%
Discover sales channels in Sylius – from configuring currencies, languages, and shipping methods to managing multiple stores in one instance. Perfect for omnichannel strategies.
0%
Make the Brand resource channel-aware in Sylius. Add a relation to channels, update the admin form, and filter brand visibility based on the active channel.
0%
This episode explains how Sylius handles images using LiipImagineBundle and Flysystem. You'll learn about the upload process, caching, image transformations, and how to work with single or multiple images per resource.
0%
In this episode, you’ll learn how to add image support to a custom Sylius resource by making it image-aware using the Brand entity as an example. You'll implement image entities, configure forms and Doctrine relations, and integrate Sylius's upload and filtering mechanisms.
0%
Discover Sylius’s email system based on Symfony Mailer. Learn about Twig templates, testing with MailHog/Mailtrap, and MAILER_DSN configuration.
0%
Learn to send a custom email in Sylius when a brand is rejected. Create a Twig template, register the type in sylius_mailer, add translations, and notify admins.
0%
Learn how to customize existing Sylius emails – from disabling shipment confirmation to personalizing order confirmation with product recommendations.
0%
Discover taxons in Sylius – a flexible product category system. Learn to create, nest, and reorder taxons, and understand main taxon, breadcrumbs, and independent trees per channel.
0%
Learn to import taxons in Sylius from a CSV file, creating multilingual category trees per channel. Use DTOs, providers, slug generation, and a console command.
0%
Learn the difference between product attributes and options in Sylius. Understand when to use options for variants and attributes for product details, with multilingual and channel support.
0%
Learn to import product options in Sylius from a CSV file using DTOs, providers, and multilingual translations. Run imports via CLI and build scalable import solutions.
0%
Learn to import product attributes into Sylius from a JSON file, handling complex types like select with multilingual values. Use DTOs, Serializer, and AttributeTypesRegistry.
0%
Learn money and multi-currency handling in Sylius – from storing prices as integers to configuring exchange rates, and assigning prices per variant and sales channel.
0%
Discover zones and taxes in Sylius – from defining geographic zones and tax categories to dynamically applying rates based on customer location.
0%
Learn product types and variants in Sylius – from differences between simple and configurable products to pricing, taxes, stock management, and product associations.
0%
Add a new “Brand” tab to the Sylius product edit view in the admin panel. Use Twig, an event subscriber, and translations to move the brand field to a separate form section.
0%
Build a Sylius product importer handling taxons, channels, translations, images, and variants with pricing and stock. Use DTOs, Serializer, and dedicated assigners.
0%
Complete your Sylius product importer by adding channel-specific pricing, option values, and translations. Use assigners, providers, and SRP-based logic for full import automation.
0%
Discover Sylius cart promotions – from rules defining conditions to actions like percentage discounts or free shipping. Examples include seasonal sales, cart thresholds, and coupon-based offers.
0%
Create a custom cart promotion rule in Sylius, e.g., for a specific brand or collection. Extend the promotion engine, add admin panel support, and build reusable conditions for future campaigns.
0%
Create a custom cart promotion action in Sylius to set a fixed product price regardless of its original value. Support multiple channels and currencies while following Sylius architecture.
0%
Learn to create custom cart promotion filters in Sylius to limit actions to specific products – e.g., by brand, category, or price range. Explore CompositePromotionFilter for combined rules.
0%
Discover catalog promotions in Sylius – discounts visible on product lists and detail pages. Learn to define scopes, set actions, manage priorities, and run asynchronously for large catalogs.
0%
Create a custom catalog promotion scope in Sylius to limit discounts to products from a selected brand. Add an admin selector, build an eligibility checker, and integrate with templates.
0%
Create a custom catalog promotion action in Sylius to set a fixed price for selected products, regardless of original pricing. Add a multi-channel form, price calculator, and UI integration.
0%
Learn the Sylius shipping system – from defining delivery methods and assigning them to zones and channels to using flat-rate/per-unit calculators and shipping categories.
0%
Discover the Sylius payment process – from configuring methods in the admin panel to integrating with PayPal and Stripe via Payum. Learn about the payment state machine and handling multiple payments per order.
0%
Explore the Sylius user model – customer, shop user, and admin. Learn to create accounts, assign roles, match customers by email, and use customer groups for promotions.
0%
Learn the full Sylius order lifecycle – from cart to fulfillment and refunds. Explore the checkout state machine, payments, shipments, guest order linking, and customer impersonation.
0%
Explore Sylius API built on API Platform – from Shop API and Admin API to Swagger docs. Learn to adapt endpoints for monolithic, headless, or hybrid architectures.
0%
Learn to expose a custom resource (e.g., Brand) in Sylius API, creating separate shop and admin endpoints. Configure serialization groups, filtering, CRUD, and a custom PATCH for state changes.
0%
Learn to customize an existing Sylius API endpoint, e.g., /shop/products, by adding data like the product’s brand name. Explore serialization groups, path overrides, and full JSON structure control.
0%
Learn the basics of data validation in Sylius built on Symfony – from front-end vs back-end validation to using the Validator component, YAML/XML config, and custom validation classes.
0%
Learn to add custom validation in Sylius for the Brand entity using XML files. Configure multilingual messages, validation groups, UniqueEntity, and custom constraints based on brand type.
0%
Learn to customize existing validation in Sylius – e.g., require a brand for each product, change minimum customer group name length, or use custom validation groups in the API.
0%
Learn the Sylius fixtures system – test data for populating the database with products, users, or taxons. Define them in YAML/PHP, use Faker, and run via sylius:fixtures:load.
0%
Learn to create custom fixtures in Sylius using the Brand entity as an example. Build a fixture class and data factory with Faker, add configuration, and enable loading specific fixture sets.
0%
Learn to customize the default Sylius product fixture so every generated product has a brand. Extend the fixture class, update the product factory, and add a “brand” option to configuration.
0%
Explore Sylius’s frontend architecture – Twig for views, Semantic UI for styles, jQuery for interactivity, and Webpack Encore for asset management. Learn how to extend or replace them.
0%
Learn to customize the Sylius frontend using Twig templates – from locating and overriding views to using UI events, context providers, and Sylius global variables.
0%
Learn to create a custom theme in Sylius to personalize templates, assets, and translations per sales channel. Explore theme structure, channel assignment, and the layering mechanism.
0%
Learn the basics of testing in Sylius and the test pyramid model. Explore PHPUnit for unit, integration, and API tests, and Behat for BDD to align business requirements with implementation.
0%
PHPUnit
27:33
Learn testing in Sylius with PHPUnit – unit, integration, and API tests. Configure the environment, write tests with mocks, load fixtures, and validate API responses against JSON patterns.
0%
Behat
32:26
Write Behat functional tests in Sylius: from Gherkin .feature scenarios to step implementation. Learn Contexts, Transformers, Page Objects, debugging missing steps, and best practices.
0%
Learn the basics of working with Sylius plugins – their types, uses, and benefits. Understand when to use a plugin and when to implement the logic directly in the project.
0%
Learn to create an independent, reusable Sylius plugin using the Brand entity as an example. Use the Plugin Skeleton, move logic, configure resources, forms, validation, grids, and translations.
0%
Discover Sylius 1.14 – the final 1.x release and LTS version. Learn differences from 1.13, deprecations for 2.0, and how to prepare your project, plugins, and dependencies for a safe upgrade.
0%
Go through upgrading a project from Sylius 1.13 to the stable LTS 1.14. Learn to update dependencies, adjust services and events, validate plugins, and perform post-upgrade testing.
0%
Learn to upgrade your custom plugin to Sylius 1.14. Review UPGRADE-1.14.md changes, check compatibility, update dependencies, test functionality, and keep the test application aligned with the Plugin Skeleton.
0%
Sylius 2.0 overview: requirements (PHP 8.2+, Symfony 7, Bootstrap 5), new frontend (Stimulus, Twig Components, no jQuery), API Platform 4 and Payment Requests. How to prepare migration from 1.14.
0%
Migrate a project from Sylius 1.14 to 2.0 using the Brand feature as an example. Prepare the environment, update dependencies, refactor templates, configure API Platform 4, and manage migrations and fixtures.
0%
Upgrade your custom plugin from 1.14 to 2.0 step by step. Update dependencies and config, migrate templates, routing, grids and forms, align with API, Bootstrap/Twig Hooks, and the environment (PHP 8.2, Node 20+).
Sylius Academy

The most optimal way to learn Sylius!

Courses
Sylius Practical Mastery Course 2 Sylius Practical Mastery Course Can Swans Fly?
Certification
About Sylius Certification Certification Practice FAQ
Sylius
Sylius Addons Sylius Connect Sylius Documentation

© 2026 Sylius Academy. All rights reserved.