Peut-on utiliser Tailwind CSS avec Sylius ?

Oui. Sylius utilise Webpack Encore pour la gestion des assets. Vous pouvez remplacer Bootstrap (theme par defaut de Sylius 2.x) par Tailwind en configurant webpack.config.js. Il faudra cependant re-styler tous les composants de l'interface puisque les classes utilitaires Tailwind remplacent les classes Bootstrap.

Faut-il recreer le theme admin aussi ?

Non, pas forcement. Le theme admin de Sylius est fonctionnel et bien concu. La plupart des projets ne customisent que le theme shop (cote client). Si vous devez modifier l'admin, privilegiez les Twig Hooks plutot qu'une refonte complete.

Combien de temps faut-il pour creer un theme Sylius complet ?

Comptez entre 3 et 6 semaines de travail pour un theme complet (homepage, listing produits, fiche produit, panier, checkout, pages statiques). Un theme minimaliste peut etre pret en 2 semaines. Le temps depend de la complexite du design et du nombre de templates a surcharger.

Quelle est la difference entre un theme et un template override ?

Un theme est un ensemble complet de templates et assets qui definit l'apparence globale. Un template override modifie un ou quelques templates specifiques. Pour des modifications ponctuelles, un override suffit. Pour un design entierement different, creez un theme. Voir notre article sur les template overrides.

Creer un theme Sylius : le guide complet de A a Z

Le theme par defaut de Sylius est fonctionnel, mais aucune boutique serieuse ne peut se permettre de le garder tel quel. Creer un theme personnalise est une etape incontournable. Ce guide vous accompagne de la creation du squelette jusqu'au deploiement.

Architecture d'un theme Sylius

Dans Sylius 2.x, le systeme de theming a evolue. Bootstrap 5 remplace Semantic UI, et les Twig Hooks remplacent les template events. Un theme Sylius s'organise ainsi :

themes/
  MonTheme/
    assets/
      shop/
        js/
          app.js
        css/
          app.scss
        images/
    templates/
      bundles/
        SyliusShopBundle/
          Layout/
            _header.html.twig
            _footer.html.twig
          Product/
            show.html.twig
            index.html.twig
          Cart/
            summary.html.twig
    composer.json

Declarer le theme

Creez un fichier composer.json a la racine de votre theme :

{
  "name": "monentreprise/shop-theme",
  "type": "sylius-theme",
  "description": "Theme personnalise pour MonEntreprise",
  "extra": {
    "sylius-theme": {
      "title": "Mon Theme Custom"
    }
  }
}

Activez-le dans la configuration Sylius :

# config/packages/sylius_theme.yaml
sylius_theme:
  sources:
    filesystem:
      directories:
        - "%kernel.project_dir%/themes"

Les templates essentiels a surcharger

Vous n'avez pas besoin de recreer tous les templates. Voici les prioritaires :

Template	Role	Priorite
`Layout/base.html.twig`	Structure HTML globale	Critique
`Layout/_header.html.twig`	Navigation et logo	Haute
`Layout/_footer.html.twig`	Pied de page	Haute
`Homepage/index.html.twig`	Page d'accueil	Haute
`Product/show.html.twig`	Fiche produit	Critique
`Product/index.html.twig`	Listing produits	Haute
`Cart/summary.html.twig`	Panier	Moyenne
`Checkout/*.html.twig`	Tunnel d'achat	Haute

Configurer Webpack Encore pour le theme

Sylius 2.x utilise Webpack Encore pour compiler les assets. Ajoutez un entrypoint pour votre theme :

// webpack.config.js
const shopConfig = Encore.getWebpackConfig();

Encore.reset();
Encore
  .setOutputPath('public/build/shop-custom/')
  .setPublicPath('/build/shop-custom')
  .addEntry('app', './themes/MonTheme/assets/shop/js/app.js')
  .addStyleEntry('styles', './themes/MonTheme/assets/shop/css/app.scss')
  .enableSassLoader()
  .enablePostCssLoader()
  .enableSourceMaps(!Encore.isProduction())
  .enableVersioning(Encore.isProduction())
;

const customConfig = Encore.getWebpackConfig();
customConfig.name = 'shop-custom';

module.exports = [shopConfig, customConfig];

Surcharger les composants avec les Twig Hooks

Les Twig Hooks sont le mecanisme moderne (Sylius 2.x) pour injecter ou remplacer du contenu dans les templates sans les surcharger completement :

{# Pour ajouter un bandeau promotionnel dans le header #}
{% hook 'sylius_shop.layout.header' with { priority: 100 } %}
  <div class="promo-banner bg-primary text-white text-center py-2">
    Livraison gratuite des 50 EUR d'achat !
  </div>
{% endhook %}

Avantages des Twig Hooks sur les overrides classiques :

Pas besoin de copier le template parent en entier
Plusieurs hooks peuvent coexister sans conflit
Desactivables par configuration (utile pour les plugins)
Compatible avec les mises a jour de Sylius

Creer un layout responsive

Partez du template de base et adaptez-le a votre design. Voici un squelette de base responsive :

{# templates/bundles/SyliusShopBundle/Layout/base.html.twig #}
<!DOCTYPE html>
<html lang="{{ sylius.channel.defaultLocale.code[:2] }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}{{ sylius.channel.name }}{% endblock %}</title>
  {% block metatags %}{% endblock %}
  {{ encore_entry_link_tags('styles', null, 'shop-custom') }}
</head>
<body class="{% block body_class %}{% endblock %}">
  {% block header %}
    {% include '@SyliusShop/Layout/_header.html.twig' %}
  {% endblock %}

  <main class="container mx-auto px-4 py-8">
    {% block content %}{% endblock %}
  </main>

  {% block footer %}
    {% include '@SyliusShop/Layout/_footer.html.twig' %}
  {% endblock %}

  {{ encore_entry_script_tags('app', null, 'shop-custom') }}
</body>
</html>

Styler les composants critiques

Fiche produit

La fiche produit est la page la plus importante pour la conversion. Structurez-la avec :

Un carrousel d'images performant (lazy loading, zoom au survol)
Les variantes clairement presentees (couleur, taille) avec indicateur de stock
Le prix et les promotions visibles immediatement
Un bouton d'ajout au panier sticky sur mobile
Les avis clients et le cross-selling en dessous

Listing produits

Le listing doit supporter le filtrage et le tri sans rechargement complet. Utilisez Stimulus (integre a Sylius 2.x) pour les interactions dynamiques.

Bonnes pratiques

Ne surchargez que ce qui change : chaque template surcharge est un point de maintenance lors des mises a jour Sylius
Utilisez les Twig Hooks pour les ajouts ponctuels plutot que des overrides complets
Testez sur tous les breakpoints : mobile (375px), tablette (768px), desktop (1280px+)
Optimisez les images : configurez LiipImagine pour generer les bonnes tailles
Versionnez votre theme : traitez-le comme un package Composer independant

Besoin d'un theme Sylius sur mesure pour votre boutique ? Contactez-nous pour un devis. Consultez aussi notre guide des template overrides pour les modifications plus ponctuelles.