CSS avancé : Personnalisez l'aspect de votre boutique en ligne

▶ Changer les couleurs de l’étiquette «Rupture de stock» sur les listes de produits

Changer les codes couleurs en gras pour mettre le code des couleurs que vous souhaitez – trouver des codes couleurs ici.

.listed-product__out-of-stock {
background-color: #000000;
color: #FFFFFF;}

▶ Changer les couleurs de l’étiquette «Nouveau» sur les listes de produits et la page d’Accueil

.listed-product__tag.tag_type_new {
background-color: #000000;
color: #FFFFFF;}

▶ Changer les couleurs de l’étiquette «Promo» sur les listes de produits et la page d’Accueil

.listed-product__tag.tag_type_sale {
background-color: #000000;
color: #FFFFFF;}

▶ Supprimer le bouton «Mon compte» de votre boutique

.button-user__text {
display: none;}

▶ Agrandir légèrement la grosseur du logo

Choisissez la height (à la place de 105), ne changez pas le 100% pour la ligne de width. Nous vous conseillons de ne pas dépasser 200px.

.logo-img {
max-width: 100%;
height: 105px;}

▶ Retirer la ligne «Estimation des frais de livraison» dans la page panier

Cette ligne d’estimation s’affiche quand vous proposer les tarifs de Postes Canada.

.table-cart-bottom__canadapost-cell {
display: none;}

▶ Retirer la ligne «Code promo» dans la page panier

.table-cart-bottom__promo-form {
display: none;}

▶ Changer les couleurs de l’étiquette «Rupture de stock» sur les listes de produits

Changer les codes couleurs en gras pour mettre le code des couleurs que vous souhaitez – trouver des codes couleurs ici.

.listed-product__out-of-stock {
background-color: #000000;
color: #FFFFFF;}

▶ Changer les couleurs de l’étiquette «Nouveau» sur les listes de produits et la page d’Accueil

.listed-product__tag.tag_type_new {
background-color: #000000;
color: #FFFFFF;}

▶ Changer les couleurs de l’étiquette «Promo» sur les listes de produits et la page d’Accueil

.listed-product__tag.tag_type_sale {
background-color: #000000;
color: #FFFFFF;}

▶ Changer la couleur du prix en promotion

.price__special {
color: #FF0400;}

▶ Supprimer le bouton «Mon compte» de votre boutique

.button-user__text {
display: none;}

▶ Retirer la ligne «Estimation des frais de livraison» dans la page panier

Cette ligne d’estimation s’affiche quand vous proposer les tarifs de Postes Canada.

.table-cart-bottom__canadapost-cell {
display: none;}

▶ Retirer la ligne «Code promo» dans la page panier

.table-cart-bottom__promo-form {
display: none;}

▶ Modifier la taille des boutons Langue et Devise

Le premier lot est celui de la devise, le deuxième celui de la langue. Si vous avez plusieurs langues mais qu’une devise copier uniquement le deuxième lot (vice-versa) copier les deux si vous avez plusieurs langues et devises.
Pour un résultat design, informez le même nombre de pixels pour les 3 «font-size» en gras dans le code.

.trigger-select {
font-size: 20px;}
.dropdown {
font-size: 20px;}

.language-button {
font-size: 20px;}

▶ Retirer le champ de recherche

.search__input-outer {
display: none;}

▶ Modifier la hauteur du champ «Commentaire» sur la page produit

Modifiez la hauteur de base (165) si vous souhaitez augmenter au diminuer la hauteur du champ.

.product-comment__textarea{
height: 165px;}

▶ Ne pas afficher les étiquettes «Promo»

.listed-product__tag.tag_type_sale {
display: none;}

▶ Ne pas forcer le texte en majuscule dans votre barre menu

.main-navigation a{
text-transform: none;}

▶ Agrandir la grosseur du logo

Choisissez la height (à la place de 105), ne changez pas le 100% pour la ligne de width. Nous vous conseillons de ne pas dépasser 200px.

.logo-img {
max-width: 100%;
height: 105px;}

▶ Retirer la ligne «Estimation des frais de livraison» dans la page panier

Cette ligne d’estimation s’affiche quand vous proposer les tarifs de Postes Canada.

.table-cart-bottom__canadapost-cell {
display: none;}

▶ Modifier la taille des boutons Langue et Devise

Le premier lot est celui de la devise, le deuxième celui de la langue. Si vous avez plusieurs langues mais qu’une devise copier uniquement le deuxième lot (vice-versa) copier les deux si vous avez plusieurs langues et devises.
Pour un résultat design, informez le même nombre de pixels pour les 3 «font-size» en gras dans le code.

.trigger-select {
font-size: 20px;}
.dropdown {
font-size: 20px;}

.language-button {
font-size: 20px;}

▶ Enlever le gras du texte de la barre menu

.main-navigation__nav {
font-weight: 100;}

▶ Modifier la largeur prise par le titre des articles de blogue

Choisissez la width (par défaut c’est à 600px).

single-post__title {
max-width: 600px;}

▶ Changer la couleur du fond du menu qui s’ouvre sous la barre menu

Changer les codes couleurs en gras pour mettre le code des couleurs que vous souhaitez – trouver des codes couleurs ici.

.main-navigation__subnav-container {
background-color: #000000;}

▶ Enlever le nom de la catégorie sur les images des catégories en page d’accueil

.grid-categories__name{
display: none;}

▶ Enlever le filtre sombre sur les images de catégories en page d’accueil

.grid-categories__cat-veil{
background-color: rgba(0,0,0,0);
z-index: 0;}

▶ Afficher la description par défaut (attention les PDF ne seront plus visibles avec cela)

.product-info__description-files-content{
position: static;
opacity: 1;
visibility: visible;
transform: none;}

▶ Ne pas afficher le tableau de prix sur les pages produits

.price-table__toggle{
display: none;}

▶ Ne pas afficher la section des produits en promo sur la page d’accueil

.specialprods__section.specialprods__discounted{
display: none;}

▶ Agrandir la grosseur du logo

Choisissez la height (à la place de 105), ne changez pas le 100% pour la ligne de width. Nous vous conseillons de ne pas dépasser 200px.

.logo-img {
max-width: 100%;
height: 105px;}

▶ Changer les couleurs de l’étiquette «Rupture de stock» sur les listes de produits

Changer les codes couleurs en gras pour mettre le code des couleurs que vous souhaitez – trouver des codes couleurs ici.

.listed-product__out-of-stock {
background-color: #000000;
color: #FFFFFF;}

▶ Retirer la ligne «Code promo» dans la page panier

.table-prix-deconstruit .tr-promo-code {
display: none;}

▶ Ne pas afficher son adresse courriel dans la page Contact

.contact-courriel{
display: none;}

▶ Modifier la taille des boutons Langue et Devise

Le premier lot est celui de la devise, le deuxième celui de la langue. Si vous avez plusieurs langues mais qu’une devise copier uniquement le deuxième lot (vice-versa) copier les deux si vous avez plusieurs langues et devises.
Pour un résultat design, informez le même nombre de pixels pour les 3 «font-size» en gras dans le code.

.trigger-select {
font-size: 20px;}
.dropdown {
font-size: 20px;}

.language-button {
font-size: 20px;}

▶ Changer les couleurs de l’étiquette «Rupture de stock» sur les listes de produits

Changer les codes couleurs en gras pour mettre le code des couleurs que vous souhaitez – trouver des codes couleurs ici.

.listed-product__out-of-stock {
background-color: #000000;
color: #FFFFFF;}

▶ Changer les couleurs de l’étiquette «Nouveau» sur les listes de produits et la page d’Accueil

.listed-product__tag.tag_type_new {
background-color: #000000;
color: #FFFFFF;}

▶ Changer les couleurs de l’étiquette «Promo» sur les listes de produits et la page d’Accueil

.listed-product__tag.tag_type_sale {
background-color: #000000;
color: #FFFFFF;}

▶ Agrandir légèrement la grosseur du logo

Choisissez la height (à la place de 105), ne changez pas le 100% pour la ligne de width. Nous vous conseillons de ne pas dépasser 135px.

.logo-img {
max-width: 100%;
height: 105px;}

▶ Retirer la ligne «Estimation des frais de livraison» dans la page panier

Cette ligne d’estimation s’affiche quand vous proposer les tarifs de Postes Canada.

.table-cart-bottom__canadapost-cell {
display: none;}

▶ Retirer la ligne «Code promo» dans la page panier

.table-cart-bottom__promo-form {
display: none;}

▶ Changer les couleurs de l’étiquette «Rupture de stock» sur les listes de produits

Changer les codes couleurs en gras pour mettre le code des couleurs que vous souhaitez – trouver des codes couleurs ici.

.listed-product__out-of-stock {
background-color: #000000;
color: #FFFFFF;}

▶ Retirer la ligne Code promo dans le panier

.table-prix-deconstruit .tr-promo-code {
display: none;}

▶ Changer les couleurs de l’étiquette «Rupture de stock» sur les listes de produits

Changer les codes couleurs en gras pour mettre le code des couleurs que vous souhaitez – trouver des codes couleurs ici.

.listed-product__out-of-stock {
background-color: #000000;
color: #FFFFFF;}

▶ Retirer la ligne Code promo dans la page Panier

.table-prix-deconstruit .tr-promo-code {
display: none;}

▶ Changer les couleurs de l’étiquette «Rupture de stock» sur les listes de produits

Changer les codes couleurs en gras pour mettre le code des couleurs que vous souhaitez – trouver des codes couleurs ici.

.listed-product__out-of-stock {
background-color: #000000;
color: #FFFFFF;}

▶ Retirer la ligne Code promo dans la page Panier

.table-prix-deconstruit .tr-promo-code {
display: none;}

▶ Changer les couleurs de l’étiquette «Rupture de stock» sur les listes de produits

Changer les codes couleurs en gras pour mettre le code des couleurs que vous souhaitez – trouver des codes couleurs ici.

.listed-product__out-of-stock {
background-color: #000000;
color: #FFFFFF;}

▶ Retirer le bouton «Continuer les achats»

#contenu-product .message-ajout-cart .bouton-continuer-magasiner {
display: none;}

▶ Changer les couleurs de l’étiquette «Rupture de stock» sur les listes de produits

Changer les codes couleurs en gras pour mettre le code des couleurs que vous souhaitez – trouver des codes couleurs ici.

.listed-product__out-of-stock {
background-color: #000000;
color: #FFFFFF;}

▶ Retirer la ligne Code promo dans la page Panier

.table-prix-deconstruit .tr-promo-code {
display: none;}

▶ Retirer les nom des catégorie en page d’accueil

.conteneur-categories-accueil .categorie-accueil .nom-categorie-accueil {
display: none;}

▶ Changer les couleurs de l’étiquette «Rupture de stock» sur les listes de produits

Changer les codes couleurs en gras pour mettre le code des couleurs que vous souhaitez – trouver des codes couleurs ici.

.listed-product__out-of-stock {
background-color: #000000;
color: #FFFFFF;}

▶ Changer les couleurs de l’étiquette «Nouveau» sur les listes de produits et la page d’Accueil

.listed-product__tag.tag_type_new {
background-color: #000000;
color: #FFFFFF;}

▶ Changer les couleurs de l’étiquette «Promo» sur les listes de produits et la page d’Accueil

.listed-product__tag.tag_type_sale {
background-color: #000000;
color: #FFFFFF;}

▶ Changer la couleur du fond du haut du site (au-dessus de la barre menu)

Changer les codes couleurs en gras pour mettre le code des couleurs que vous souhaitez – trouver des codes couleurs ici.

.main-header__top{
background-color: #000000;}

▶ Changer la couleur du fond de la barre menu

.main-header__bottom{
background-color: #FFFFFF;}

▶ Supprimer l’étiquette verticale avec le nom du produit sur les photos des produits en vedette

.slider-featured__product-name {
display: none;}

▶ Supprimer le bouton «Mon compte» de votre boutique

.button-user__text {
display: none;}

▶ Agrandir légèrement la grosseur du logo

Choisissez la height (à la place de 105) ne changez pas le 100% pour la ligne de width. Nous vous conseillons de ne pas dépasser 200px.

.logo-img {
max-width: 100%;
height: 105px;}

▶ Retirer la ligne «Estimation des frais de livraison» dans la page Panier

Cette ligne d’estimation s’affiche quand vous proposer les tarifs de Postes Canada.

.table-cart-bottom__canadapost-cell {
display: none;}

▶ Retirer la ligne «Code promo» dans la page Panier

.table-cart-bottom__promo-form {
display: none;}

▶ Modifier la taille des boutons Langue et Devise

Le premier lot est celui de la devise, le deuxième celui de la langue. Si vous avez plusieurs langues mais qu’une devise copier uniquement le deuxième lot (vice-versa) copier les deux si vous avez plusieurs langues et devises.
Pour un résultat design, informez le même nombre de pixels pour les 3 «font-size» en gras dans le code.

.trigger-select {
font-size: 20px;}
.dropdown {
font-size: 20px;}

.language-button {
font-size: 20px;}

▶ Modifier la hauteur du champ «Commentaire» sur la page produit

Modifiez la hauteur de base (165) si vous souhaitez augmenter au diminuer la hauteur du champ.

.product-comment__textarea{
height: 165px;}

▶ Ne pas afficher les étiquettes «Promo»

.listed-product__tag.tag_type_sale {
display: none;}

▶ Changer les couleurs du bouton «Aperçu rapide»

Changer les codes couleurs en gras pour mettre le code des couleurs que vous souhaitez – trouver des codes couleurs ici.

La 1ère partie du code sont les couleurs du bouton par défaut, la 2ème sont les couleurs au survol de la souris.
background-color est la couleur du fond du bouton
color est la couleur du texte du bouton

.listed-product__preview-button {
background-color: #130FE5;
color: #FFFFFF;}

.listed-product__preview-button:hover{
background-color: #FFFFFF;
color: #130FE5;}

▶ Changer les couleurs de l’étiquette «Rupture de stock» sur les listes de produits

Changer les codes couleurs en gras pour mettre le code des couleurs que vous souhaitez – trouver des codes couleurs ici.

.listed-product__out-of-stock {
background-color: #000000;
color: #FFFFFF;}

▶ Changer les couleurs de l’étiquette «Nouveau» sur les listes de produits et la page d’Accueil

.listed-product__tag.tag_type_new {
background-color: #000000;
color: #FFFFFF;}

▶ Changer les couleurs de l’étiquette «Promo» sur les listes de produits et la page d’Accueil

.listed-product__tag.tag_type_sale {
background-color: #000000;
color: #FFFFFF;}

▶ Agrandir légèrement la grosseur du logo

Choisissez la height (à la place de 105) ne changez pas le 100% pour la ligne de width. Nous vous conseillons de ne pas dépasser 200px.

.logo-img {
max-width: 100%;
height: 105px;}

▶ Passer l’écriture des onglets de la barre menu de lettre CAPITAL à Minuscule

Les onglets s’écriront comme vous les notez dans Visuel / Menus.

.main-navigation__nav {
text-transform: none;}

▶ Retirer la ligne «Estimation des frais de livraison» dans la page panier

Cette ligne d’estimation s’affiche quand vous proposer les tarifs de Postes Canada.

.table-cart-bottom__canadapost-cell {
display: none;}

▶ Retirer la ligne «Code promo»dans la page panier

.cart__promo-code {
display: none;
}

▶ Retirer les flèches visibles gauche et droite sur le carrousel d’accueil

.slider__arrow {
display: none !important;}

▶ Modifier la hauteur du champ «Commentaire» sur la page produit

Modifiez la hauteur de base (165) si vous souhaitez augmenter au diminuer la hauteur du champ.

.product-comment__textarea{
height: 165px;}

▶ Supprimer la «virgule» avec espace sur la barre Instagram

.instagram__dash{
display: none;}

▶ Ne pas afficher le tableau de prix sur les pages produits

.price-table__toggle{
display: none;}

▶ Changer les couleurs de l’étiquette «Rupture de stock» sur les listes de produits

Changer les codes couleurs en gras pour mettre le code des couleurs que vous souhaitez – trouver des codes couleurs ici.

.listed-product__out-of-stock {
background-color: #000000;
color: #FFFFFF;}

▶ Retirer la ligne «Code promo» dans la page panier

.table-prix-deconstruit .tr-promo-code {
display: none;}

▶ Retirer le champ de recherche

#form-search {
display: none;}