CSS personnalisé

Guide pratique Tous les forfaits 2 min de lecture

Utilisez Feuille de style / CSS lorsque les paramètres, les polices et les couleurs ne permettent pas d’obtenir ce dont vous avez besoin : un effet de survol particulier, la taille de police d’un seul élément ou une petite correction de thème. Le CSS est enregistré avec le menu et ajouté à votre boutique en ligne lors de la publication.

Note

Le CSS personnalisé demande des connaissances de base en CSS. Si vous préférez ne pas écrire de code, contactez-nous : nous vous aidons gratuitement pour les petites modifications de style.

Ajouter du CSS personnalisé

1. Ouvrir l’onglet Avancé

   Dans l’éditeur de menu, cliquez sur l’icône Avancé (</>) dans la barre latérale gauche (1).

   

   Ouvrez l'onglet Avancé (1) et saisissez votre CSS dans Feuille de style / CSS (2).

2. Ajouter votre CSS

   Saisissez ou collez votre CSS dans Feuille de style / CSS (2), en remplaçant l’espace réservé //enter css custom here.

3. Enregistrer et publier

   Cliquez sur Enregistrer, puis sur Publier. Actualisez complètement votre boutique en ligne (rechargement forcé) pour voir le résultat.

Cibler les bons éléments

Le CSS est ajouté tel quel à la page et ne se limite pas à ce menu ; limitez donc la portée de vos sélecteurs :

• Tous les menus : commencez par .gm-menu.
• Un seul menu : commencez par .gm-menu-<ID>. Pour trouver l’ID, faites un clic droit sur le menu de votre boutique en ligne et choisissez Inspecter.
• Un seul élément : donnez-lui un Nom de classe supplémentaire dans la section Avancé des paramètres de l’élément (consultez Modifier un élément de menu), puis utilisez cette classe.

Par exemple, pour mettre en gras et en rouge un élément dont le nom de classe supplémentaire est sale-item :

.gm-menu .sale-item > .gm-target {
  color: #d72c0d !important;
  font-weight: 700 !important;
}

L’onglet Avancé contient aussi Disponibilité par marché, qui limite le menu à certains marchés ; consultez Afficher des menus par marché.

Dépannage

Mon CSS n'a aucun effet

• Vérifiez que vous avez cliqué sur Publier après avoir enregistré.
• Les styles de l’application utilisent souvent !important, votre règle peut donc en avoir besoin aussi.
• Recherchez les fautes de frappe, comme une } manquante : une seule erreur peut empêcher les règles suivantes de fonctionner.

Pages associées

• Ajuster les couleurs du menuDéfinissez les couleurs de la barre de menu, des sous-menus, des onglets, des étiquettes de produit et du bouton Ajouter au panier.
• Ajuster les polices du menuChoisissez la famille, la graisse et la taille de police de chaque partie du menu.
• Modifier un élément de menuModifiez le titre, le lien, l'icône, les couleurs, le badge, le sous-menu et la visibilité d'un élément, ou dupliquez-le, déplacez-le et supprimez-le.

Cette page vous a-t-elle aidé ?

Signaler un problème