Trouver les sélecteurs CSS de la vitrine Ecwi

Lorsque vous voulez apporter des modifications à votre vitrine qui ne peuvent pas être réalisées avec les paramètres de conception intégrés d'Ecwid, vous pouvez utiliser les codes CSS. Vous pouvez choisir parmi les codes CSS Ecwid prêts ou créer vos propres codes à partir de zéro.

Pour créer un code, vous devez trouver le sélecteur droit pour l'élément (texte, bouton, image, etc.) que vous voulez modifier. Vous pouvez le faire avec les outils de développement intégrés à votre navigateur. Une fois que vous avez obtenu le sélecteur, créez un code et collez-le dans le thème de votre boutique. Après avoir actualisé la page de vitrine, vous verrez les modifications.

Consultez notre vidéo ci-dessous pour savoir comment fonctionne CSS en général :

La création de codes CSS nécessitera des connaissances avancées en CSS. Les experts Ecwid peuvent vous aider dans cette tâche et concevoir un thème pour votre boutique.

Pour trouver un sélecteur CSS pour l'élément vitrine :

Ouvrez la page de la boutique où vous voyez l'élément que vous voulez modifier.
Faites un clic droit sur l'élément que vous voulez modifier > Inspecter :

Vous verrez l'inspecteur Chrome s'ouvrir sur la page. L'élément que vous recherchez sera mis en surbrillance.

Sur le côté droit, copiez le sélecteur :

Ouvrez la page de la boutique où vous voyez l'élément que vous voulez modifier.
Faites un clic droit sur l'élément que vous voulez modifier > Inspecter :

Vous verrez l'inspecteur Firefox s’ouvrir sur la page. L'élément que vous recherchez sera mis en surbrillance.

Sur le côté droit, copiez le sélecteur :

Ouvrez la page de la boutique où vous voyez l'élément que vous voulez modifier.
Faites un clic droit sur l'élément que vous voulez modifier > Inspecter l'élément :

Vous verrez l'inspecteur Web Safari s'ouvrir sur la page. L'élément que vous recherchez sera mis en surbrillance.

Pour activer l'inspection des éléments dans Safari, accédez à Safari → Préférences → Avancé et sélectionnez "Afficher le menu Développer dans la barre de menus".

Sur le côté droit, copiez le sélecteur :

Utilisez le sélecteur trouvé pour créer des codes CSS. Puis collez les codes prêts dans le thème CSS actif de la boutique.

Exemple

Le prix de la page produit possède ce sélecteur CSS :


.ec-size .ec-store .details-product-price__value

Un code CSS pour changer la couleur du prix en rouge sera comme ceci :


 .ec-size .ec-store .details-product-price__value {
              color: red;
}

Il y a beaucoup de ressources en ligne où vous pouvez apprendre à créer des codes CSS. Consultez celui-ci, par exemple : https://www.w3schools.com/