Personnalisation css d’une boutique en ligne Ecwid

Ecwid permet de réaliser facilement une boutique en lige sans connaissances particulières et en très peu de temps. Seulement voilà, vous avez peut être envi de personnaliser d’avantage votre e-commerce avec des couleurs ou des polices d’écriture différentes.

Dans cette article, nous vous proposons un peu de code css à ajouter à votre boutique en ligne. Cela fonctionne même avec la version gratuite. Même si cela peu paraitre compliqué, ne vous inquiétez pas, on va tout vous expliquer !

 

Introduction

Ecwid vous propose déjà un certain nombre d’options pour personnaliser votre e-commerce, il vous suffit pour cela de vous rendre dans le store manager et de cliquer sur l’onglet “Conception“. Tout en bas de cette page, vous avez “Personnalisation avancée des thèmes”

 

C’est à cet endroit vous pouvez ajouter du code css pour personnaliser les couleurs, les textes, les boutons, etc.

Voyons ensemble comment personnaliser tout ces éléments à commencer par la Police d’écriture :

 

Importer une Google Font dans Ecwid :

/***Import de la Police Google Font***/
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap" rel="stylesheet');

.ecwid div, .ecwid span, .ecwid a, .ecwid p {
	font-family: 'Lato', sans-serif !important;
}

Ici nous importons la Police Lato, Google Font vous donne l’url d’import ainsi que le code css à indiquer pour la font-family.

 

Personnalisation des boutons :

/*** Personnalisation des boutons large ***/
/*Couleur du bouton*/
.ec-size .ec-store .form-control--primary .form-control__button { 
	background-color: #06d114;
	border-radius: 0;
}

/*Couleur du bouton au survol*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
	background: #eeeeee;
	border-radius: 0;
}

/*Couleur du texte*/
.ec-size .ec-store .form-control--primary .form-control__button {
	color: #ffffff;
}

/*Couleur du texte au survol*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
	color: #06d114;
}

/*** Personnalisation du bouton Ajouter au panier ***/
/*Couleur du bouton*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
	background: #1e7ec8;
	border-radius: 0;
}

/*Couleur du bouton au survol*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
	background: #5ba5de;
	border-radius: 0;
}

/*Couleur du texte*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
	color: #000000;
}

/*Couleur du texte au survol*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
	color: #ffffff;
}

/*** Personnalisation du bouton Achat immédiat ***/
/*Couleur du bouton*/
.ec-size .ec-store .form-control--small .form-control__button {
	background: #1e7ec8;
	border-radius: 0;
}

/*Couleur du bouton au survol*/
.ec-size .ec-store .form-control--small .form-control__button:hover {
	background: #5ba5de;
	border-radius: 0;
}

/*Couleur du texte*/
.ec-size .ec-store .form-control--small .form-control__button {
	color: #000000;
}

/*Couleur du texte au survol*/
.ec-size .ec-store .form-control--small .form-control__button:hover {
	color: #ffffff;
}

/*** Personnalisation du bouton Commander (page panier) ***/
/*Couleur du bouton*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button  {
	background-color: #06d114;
	border-radius: 0;
}

/*Couleur du bouton au survol*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button:hover {
	background-color: #1e7ec8;
	border-radius: 0;
}

/*Couleur du texte*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button {
	color: #ffffff;
}

/*Couleur du texte au survol*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button:hover {
	color: #ffffff;
}

En plus de la couleur du bouton et du texte, nous avons ajouté un “arrondi des coins” : border-radius, cela permet de déffinir si vous souhaitez des coins arrondis ou pas. Par défaut les boutons on des coins arrondis mais vous pouvez renseigner 0 pour ne pas en avoir ou bien une valeur en px pour augmenter l’arrondi.

 

Personnalisation de la page boutique (catalogue)

Si vous avez créé des catégories produits, Ecwid affiche des images avec le titre des catégories, si cela ne vous plait pas, vous pouvez décider de ne pas les afficher.

/*Ne pas afficher les images de catégories au dessus des produits sur la page boutique*/
.ec-size .ec-store .grid__categories {
	display: none;
}

 

Personnaliser les détails du produit

/*Personnaliser les détails du produits (page produit)*/
/*Titre du produit*/
html#ecwid_html body#ecwid_body .ec-size .ec-store .product-details .product-details__product-title {
    color: #1e7ec8;
    font-size: 36px;
    font-weight: 700;    
}

/*Prix du produit*/
html#ecwid_html body#ecwid_body .ec-size .ec-store .ec-price-item {
    color: #000000;
    font-size: 20px;
    font-weight: 400;
}

/*Information TVA*/
html#ecwid_html body#ecwid_body .ec-size.ec-size--l .ec-store .product-details__product-price-taxes {
    color: #000000;
    font-size: 15px;
    font-weight: 300;
}

/*Référence (SKU) produit*/
html#ecwid_html body#ecwid_body .ec-size .ec-store .product-details__product-sku {
    color: #000000;
    font-size: 15px;
    font-weight: 300;
}

/*Stock produit*/
html#ecwid_html body#ecwid_body .ec-size .ec-store .details-product-purchase__place {
    color: #000000;
    font-size: 15px;
    font-weight: 300;
}

Font-weight est la graisse de la police, assurez vous d’avoir bien importé via Google Font les différentes graisses que vous souhaitez utiliser.

 

Conclusion

Avec ces quelques lignes de code vous pouvez à présent personnaliser d’avantage votre boutique en ligne Ecwid. Il existe également une application que vous pouvez acheter dans le “Marché des applications” de Ecwid, il vous faut cependant un compte payant pour pouvoir accéder à ces applications.

Bisous les neveux 😉