Codes CSS Ecwid pour concevoir votre magasin


Guide illustré pour concevoir votre magasin Ecwid avec les codes CSS Ecwid! Si vous lisez cet article, c'est probablement parce que vous êtes comme moi, vous ne codez pas. Je vais vous apprendre

Si vous lisez cet article, c’est probablement parce que vous êtes comme moi, vous ne codez pas. Je suis plus une entrepreneur / marketeur et je n’ai pas le temps de passer à apprendre le code CSS pour concevoir ma boutique en ligne. Je préfère enseigner comment utiliser Ecwid sur YouTube.

Mais bien sûr, vous souhaitez toujours concevoir votre magasin Ecwid en fonction de votre marque. Dans cet article, je vais vous apprendre exactement cela, comment concevoir votre magasin Ecwid, aucune compétence de codage requise.

Qu’est-ce que Ecwid CSS?

Ecwid vous permet de concevoir votre magasin en utilisant du code CSS ou une feuille de style en cascade qui stylise le code HTML. Grâce aux codes CSS Ecwid, vous pouvez personnaliser l’apparence de l’ensemble de votre magasin Ecwid. Les codes vous permettent de changer, d’ajouter, de supprimer et de modifier différents éléments tels que les titres et les couleurs à l’aide de divers codes.

La vidéo ci-dessous montre comment modifier la conception de votre magasin Ecwid à l’aide de ces codes conçus pour les magasins Ecwid.

Note: Pour visionner ces vidéos en français, cliquer sur YouTube en bas à droite de la vidéo, ensuite cliquer sur CC et choisir français pour faire afficher les sous-titres en français.

Créez votre thème CSS Ecwid

Je vais vous montrer comment créer votre propre thème CSS Ecwid et éditer des éléments Ecwid spécifiques à votre convenance. Nous allons apporter des modifications mineures au thème standard qui est activé par défaut sur votre boutique Ecwid. Pour concevoir votre magasin Ecwid à l’aide des codes CSS Ecwid:

  1. Dans votre panneau de configuration Ecwid
  2. Cliquez sur Design> Faites défiler vers le bas de la page
  3. Cliquez sur Créer votre thème CSS
  4. Cliquez sur Ajouter un nouveau thème CSS
  5. Copiez le code dont vous avez besoin et collez-le dans l’interface
  6. Assurez-vous d’activer votre thème et d’enregistrer vos modifications
  7. Rafraîchissez votre vitrine et découvrez votre nouveau design!

Si les modifications ne s’appliquent pas automatiquement, assurez-vous de vider le cache de votre navigateur. Voici quelques exemples de codes CSS Ecwid.

Changer la couleur des prix Ecwid

Voici le code pour changer la couleur des prix:

div.ecwid-Product div.ecwid-productBrowser-price {
color: #ffffff
}

Vous devrez simplement remplacer #fffff par les codes de couleur que vous souhaitez utiliser. Il existe de nombreux outils en ligne qui peuvent vous fournir des codes de couleur si vous en avez besoin.

Ecwid Masquer le code de prix

.ec-size .ec-store .product-details__product-price {
display: none
}

Ecwid Masquer la catégorie Images Code

.ec-size .ec-store .grid__categories * 
display: none
}

Vous devrez peut-être vider le cache de votre navigateur ou ouvrir votre site dans un autre navigateur si les modifications ne vous sont pas immédiatement visibles.

Rechercher manuellement les codes

Si vous n’avez pas trouvé tout le code nécessaire pour personnaliser entièrement votre boutique sur le site d’assistance d’Ecwid, ou sur leurs forums, vous pouvez trouver ce dont vous avez besoin en cliquant avec le bouton droit sur un élément que vous souhaitez modifier. Faites un clic droit et choisissez «Inspecter l’élément». J’utilise Chrome, mais chaque navigateur a une option pour quelque chose de similaire.

C’est ici que vous pouvez trouver les informations sur l’élément que vous souhaitez modifier. Vous pouvez même le tester pour le plaisir directement dans votre navigateur, mais vous devez toujours copier / coller ces informations dans Ecwid et l’activer pour que les modifications soient permanentes.

Gardez vos codes CSS Ecwid propres

Vous devez garder votre code propre pour faciliter la recherche et la suppression ou la modification de codes à l’avenir. Voici quelques façons de vous assurer que votre code reste propre et facile à lire.

Si vous revenez à votre thème CSS Ecwid à l’avenir et que vous ne vous souvenez plus quel code fait quoi, alors il y a un problème. Un code en désordre rendra difficile la modification ou la suppression de codes à l’avenir. Cette astuce vous aidera certainement à bien organiser vos codes CSS.

Tout ce que vous avez à faire est d’ajouter un titre entre une barre oblique inverse, une étoile, une étoile, une barre oblique inverse en tant que telle: /**/

Vous pouvez nommer le code qui suit ce titre sans affecter votre thème CSS. Dans cet exemple, le code qui suit modifie la couleur du bouton Checkout. Nous pouvons donc nommer notre code – par exemple:

/*Checkout Button Color*/
button.ecwid-btn--primary.ecwid-btn--checkout {
background: red;
}

La prochaine fois que vous reviendrez à votre thème CSS, vous saurez à quoi sert chaque code et pourrez facilement modifier ou supprimer votre code.

Personnaliser les boutons

Voici comment personnaliser les boutons de votre boutique Ecwid. Cliquez simplement ici ou rendez-vous sur support.ecwid.com> cliquez sur design> puis sur Changer les boutons dans votre boutique Ecwid.

Il existe de nombreux boutons dans votre magasin Ecwid, assurez-vous donc de choisir les codes du bouton que vous souhaitez modifier. Les gros boutons de votre boutique incluent Ajouter au panier, Continuer les achats sur la page du produit, Continuer, Commander et Passer une commande. Les boutons plus petits incluent le bouton Ajouter plus, Aller à la caisse, Continuer les achats sur la page du panier et le bouton Effacer le sac par exemple.

Copiez/collez le code et modifiez le code selon vos goûts. Dans ce cas, nous changerons le bouton Acheter maintenant en vert. Remplacez simplement la couleur par le mot «vert» ou par les codes de couleur de votre marque.

/*Text color*/
.ec-size.ec-size--xl .ec-store .form-control--small .form-control__button {
color: white;
}
/* Buy now buttons color in grid view */
.ec-size .ec-store .form-control--secondary .form-control__button {
   background-color: red;
   color: red;
}
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
   background-color: green;
   color: #56725d;
}

Personnalisez les polices

Cette section montre comment personnaliser les polices dans votre magasin Ecwid. Voici comment changer la famille de polices de l’ensemble de votre magasin Ecwid. Maintenant, je ne recommande pas d’utiliser Comic Sans comme police dans votre magasin, mais comme tout le monde connaît cette police, voici à quoi elle ressemblerait:

.ecwid div, .ecwid span, .ecwid a, .ecwid p {
font-family: COMIC_SANS !important;
}

Vous pouvez également modifier la taille et la couleur des polices dans votre magasin. Copiez / collez simplement le code dont vous avez besoin à partir de la base de connaissances d’Ecwid ou de mon livre numérique CSS, et remplacez simplement la couleur par le mot «vert» ou par les codes de couleur de votre marque.

Personnaliser son thème CSS Ecwid

Si vous souhaitez créer un thème CSS Ecwid personnalisé pour votre magasin Ecwid, tout ce que vous avez à faire est de vous rendre sur support.ecwid.com et de rechercher CSS. Vous y trouverez des articles de la base de connaissances et des articles de forum contenant des codes CSS Ecwid. Copiez / collez simplement les codes pour créer votre thème. Une fois que vous êtes prêt, vous pouvez activer vos modifications.

Si vous avez apprécié cet article, pensez à vous abonner à la chaîne YouTube de Daniella.io et de cliquer sur la cloche pour voir d’autres vidéos et tutoriels comme celui-ci à l’avenir.

This post is also available in: English

Daniella.io

Ecwid eCommerce expert with a Master's teaching and over 10 years eCommerce experience. I create Ecwid tutorial videos on YouTube with insider tips, techniques to help you get online quickly, easily and for a low cost. Subscribe to my YouTube channel to get notified of new content.

Recent Content