DocumentationCommerceContenu et conception

[PaaS uniquement]{class="badge informative" title="S’applique uniquement aux projets Adobe Commerce on Cloud (infrastructure PaaS gérée par Adobe) et aux projets On-premise."}

Thèmes

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Rubriques :

Créé pour :

  • Débutant
  • Intermédiaire
  • Administration
  • Utilisateur ou utilisatrice

Un thème est un ensemble de fichiers qui détermine la présentation visuelle de votre boutique. Lorsque vous installez Commerce pour la première fois, les éléments de conception du magasin sont basés sur le thème Default. Outre le thème par défaut initial fourni avec votre installation Commerce, il existe un large éventail de thèmes disponibles que vous pouvez utiliser en l’état ou modifier selon vos besoins.

Un thème réactif ajuste la disposition de la page en fonction du port d’affichage de l’appareil. L’exemple de thème Luma a une disposition flexible et réactive qui peut être affichée sur un bureau, une tablette ou un appareil mobile.

Commerce thèmes comprennent les fichiers de disposition, les fichiers de modèle, les fichiers de traduction et les habillages. Une apparence est un ensemble de fichiers CSS, d’images et JavaScript qui, ensemble, créent la présentation visuelle et les interactions que vos clients expérimentent lorsqu’ils visitent votre boutique. Les thèmes et les habillages peuvent être modifiés et personnalisés par un développeur ou un professionnel du design maîtrisant la conception de thèmes Commerce et ayant accès à votre serveur. Pour en savoir plus, consultez le Guide du développeur Frontend.

​ Thème Luma ​ {width="600" modal="regular"}

Le thème par défaut

Le thème réactif Magento Blank effectue le rendu de l’affichage de votre storefront pour différents appareils et incorpore les bonnes pratiques pour les ordinateurs de bureau, les tableaux et les appareils mobiles. Certains thèmes sont conçus pour être utilisés uniquement avec des appareils spécifiques. Lorsque Commerce détecte un ID de navigateur spécifique, ou un agent utilisateur, il utilise le thème configuré pour le navigateur spécifique. La chaîne de recherche peut également inclure des expressions régulières compatibles avec Perl (PCRE).

Thèmes {width="700" modal="regular"}

Filtrer la grille de thème

  1. Dans la barre latérale Admin, accédez à Content > Design>Themes.

  2. Cliquez sur Filters.

  3. Saisissez une plage d’identifiants, un nom de thème (ou un titre), un chemin de dossier ou un thème parent.

  4. Cliquez sur Apply Filters pour mettre à jour la liste des thèmes.

Afficher les paramètres du thème actuel

  1. Dans la barre latérale Admin, accédez à Content > Design>Themes.

  2. Dans la liste des thèmes installés, recherchez le thème que vous souhaitez examiner, puis cliquez sur la ligne pour afficher les paramètres.

  3. Pour afficher un exemple de page, cliquez sur le Theme Preview Image.

Prévisualiser le thème {width="600" modal="regular"}

Appliquer un thème par défaut

  1. Dans la barre latérale Admin, accédez à Content > Design>Configuration.

  2. Recherchez la vue de magasin que vous souhaitez configurer, puis cliquez sur Edit dans la colonne Action.

  3. Sous Default Theme, définissez Applied Theme ​sur celui que vous souhaitez utiliser pour l’affichage actuel.

    Thème appliqué {width="600" modal="regular"}

  4. Cliquez ensuite sur Save Configuration.

Ajout d’une règle d’agent utilisateur

  1. Dans la barre latérale Admin, accédez à Content > Design>Configuration.

  2. Sous Design Rule, cliquez sur Add New User Agent Rule.

    Règle de conception {width="600" modal="regular"}

  3. Par Search String, saisissez l’ID du navigateur pour l’appareil spécifique.

    Les chaînes de recherche correspondent dans l’ordre dans lequel elles sont saisies. Par exemple, pour Firefox, saisissez :

    /^mozilla/i

  4. Pour entrer des périphériques supplémentaires, répétez le processus.

  5. Cliquez ensuite sur Save Configuration.

recommendation-more-help
2b0136b4-ef75-405f-9734-60d741f198de