Personnaliser un thème

Un thème est un modèle qui détermine la présentation de Storefront. Chaque thème possède des styles et des mises en page différents et offre une expérience client différente.

uStore NG est livré avec un thème prêt à l'emploi spécialement conçu pour vos magasins en ligne. Personnaliser un thème pour l'adapter au mieux aux consignes de votre entreprise pour la promotion de la marque peut être réalisé en quelques secondes à l'aide de l'éditeur de thèmes WYSIWYG, sans qu'il soit nécessaire de modifier le code.

L'éditeur de thème offre un contrôle simple sur les éléments de conception tels que les polices, les couleurs et les images. Vous pouvez jouer avec différents paramètres et les adapter à votre goût. Affichez un aperçu du design et publiez-le lorsqu'il est prêt dans la boutique en ligne.

Si vous souhaitez apporter des modifications au-delà des paramètres fournis, éditez le code CSS dans l'éditeur. Le CSS utilise également des variables qui vous permettent, avec une seule modification, de personnaliser globalement plusieurs éléments de l'interface utilisateur.

Au fur et à mesure que vous travaillez, vos modifications sont automatiquement enregistrées en tant que brouillon. Les modifications sont conservées même lorsque vous quittez l'éditeur.

AquaBlue, le thème par défaut de uStore est un thème réactif et souple qui convient à tous les magasins. AquaBlue vous permet de créer un magasin et de commencer à vendre rapidement. AquaBlue donne un aspect soigné, même sans personnalisation de thème, sur n'importe quel appareil.

Notez que la personnalisation du thème s’effectue par magasin. Cela signifie que vos paramètres de personnalisation ne s’appliquent qu’au magasin sélectionné.

Modifier les paramètres de thème

L'éditeur de thème comprend un panneau de gauche dans lequel vous pouvez modifier les paramètres du thème et une zone d'aperçu. Au fur et à mesure que vous avancez, vous pouvez parcourir les pages du magasin dans la zone d’aperçu pour voir les modifications telles qu’elles apparaissent dans le magasin, sur ordinateur ou au format mobile, ou sélectionner « Aperçu brouillon » pour afficher le brouillon dans un nouvel onglet.

Lorsque vous ouvrez le brouillon dans un nouvel onglet, pour voir la modification, il vous faudra actualiser le contenu de l'onglet.

Pour personnaliser un thème :

Ouvrez le magasin dont vous souhaitez modifier le thème.
Cliquez sur Paramètres du magasin > Personnaliser le thème..
Modifiez les paramètres du thème dans les panneaux suivants.

Au fur et à mesure que vous travaillez, vos modifications sont automatiquement enregistrées en tant que brouillon.
- Typographie
  
  Dans la liste des polices de Google, choisissez une police à utiliser dans tout le magasin puis définissez la taille des en-têtes et du corps du texte. Lorsque vous agrandissez/réduisez la taille de l'en-tête, la proportion entre les en-têtes est conservée.
- Couleur et style
  
  Définissez la palette de couleurs du thème et certaines propriétés de style. Par exemple, la couleur de surbrillance du thème (qui influe sur les liens, les en-têtes de tableau, etc.) et la couleur du corps du texte et des en-têtes.
- En-tête et pied de page
  
  Téléchargez le logo pour qu'il apparaisse dans l'en-tête.
  
  Définissez des propriétés supplémentaires pour l'en-tête et le pied de page, telles que la hauteur de l'en-tête et la couleur d'arrière-plan.
  
  Astuce : Si le logo semble trop petit ou trop grand, vous pouvez augmenter/diminuer la hauteur de l'en-tête pour laisser plus/moins d'espace.
- Bannière d'accueil
  
  Téléchargez l'image pour qu'elle apparaisse dans la bannière. Veillez à choisir une image appropriée pour un design réactif. Votre image s'ajustera automatiquement à la taille de l'écran. Nous vous recommandons les dimensions suivantes pour l'image : 1 920-2 500 x 600 pixels.
  
  Définissez des propriétés supplémentaires de la bannière de la page d'accueil, telles que le titre, la couleur de la police et l'URL du bouton.
  
  Notez que l'URL du bouton fait référence par défaut à la première catégorie contenant les produits en ligne. Vous pouvez modifier l'URL pour faire référence à une page différente en entrant le chemin complet de la page.
- Assets
  
  Téléchargez toutes les images supplémentaires que vous souhaitez inclure dans votre magasin, telles que les icônes. Ces images peuvent être référencées à partir de la zone CSS personnalisé ou via la gestion des thèmes. Remarque : les images du thème par défaut n'apparaissent pas ici.
- Variables CSS
  
  Les thèmes contiennent des valeurs spécifiques qui sont réutilisées à plusieurs endroits. Par exemple, la couleur de surbrillance est utilisée dans les liens, les en-têtes de tableau, etc. Les variables CSS permettent de stocker une valeur dans un seul endroit, puis de la référencer dans plusieurs autres endroits. Les variables CSS fournissent le mécanisme permettant de réutiliser et de modifier facilement des éléments d'interface utilisateur partageant les mêmes propriétés CSS.
  
  La plupart des variables peuvent être définies dans les différents panneaux de l'éditeur de thèmes (par exemple, Typographie, Couleur et Style), mais pas toutes. Utilisez le panneau Variables CSS pour définir les valeurs des variables supplémentaires non disponibles dans l'éditeur. Exemple : la variable « color-fill », utilisée comme couleur d'arrière-plan de la page, couleur de survol du menu, etc.
  Pour en savoir plus sur la liste complète des variables, reportez-vous à la section Variables CSS.
- CSS personnalisés
  
  La zone CSS personnalisé vous offre davantage de flexibilité dans la conception de votre magasin. Rédigez du code CSS pour définir les paramètres qui ne peuvent pas être définis dans l'éditeur ou le panneau Variables CSS. Par exemple, la taille du bouton, l’emplacement du bouton sur la page, l’emplacement de l'en-tête, etc.
  
  Les paramètres définis dans cette zone remplacent vos paramètres dans tous les autres panneaux, y compris dans le panneau Variables CSS.
- Widgets
  
  Ajoutez des widgets à la vitrine pour améliorer sa fonctionnalité.
  
  Les widgets sont des éléments de code qui peuvent être ajoutés à des emplacements spécifiques dans le thème, pour que la vitrine puisse prendre en charge de nouvelles fonctionnalités.
  
  Vous pouvez développer un widget qui correspond à vos besoins, sélectionner l'un des widgets prêts à l'emploi, ou acheter un widget auprès de XMPie Professional Services , et le télécharger sur uStore.
  - Cliquez sur Ajouter un widget.
  - À l’aide du curseur, activez le widget.
  - Dans la première liste déroulante, sélectionnez le widget concerné. La liste comprend tous les widgets prêts à l'emploi et les widgets qui ont été téléchargés dans les Outils.
  - Ensuite, définissez l'emplacement de positionnement du widget (zone) dans le magasin, à savoir, pied de page, haut de la page d'accueil, en dessous de l'en-tête.
  - Enfin, configurez le widget selon vos besoins.
  Cliquez ici pour plus d'informations sur les exemples de widgets et les widgets personnalisés.
Si vous souhaitez rétablir les paramètres par défaut du thème, sélectionnez Rétablir > Effacer et rétablir les options par défaut du thème.

Toutes les valeurs du brouillon sont supprimées et les paramètres par défaut du thème apparaissent dans l'éditeur.
Si vous souhaitez revenir aux paramètres publiés du thème, sélectionnez Rétablir > Rétablir les paramètres publiés.

Toutes les valeurs du brouillon sont supprimées et les paramètres publiés apparaissent dans l'éditeur.
Une fois que vous avez terminé, effectuez l’une des opérations suivantes :
- Cliquez sur Publier pour appliquer toutes les modifications dans Storefront.
- Quittez l'éditeur. Vos nouveaux paramètres sont conservés et s’afficheront à la prochaine ouverture de l'éditeur.

Si vous souhaitez développer davantage le thème (ajouter du contenu, de la logique, des fonctionnalités ou toute autre modification de conception impossible dans l'éditeur), allez dans la section Gestion des thèmes.