Questions fréquentes sur la configuration
de votre boutique en ligne

Liste de codes CSS pour personnaliser l'aspect de votre boutique en ligne

Chez Panierdachat, nous souhaitons vous laisser le maximum d’outils en main pour vous créer votre boutique en ligne la plus proche de votre désir et ceci le plus simplement possible.

Nos thèmes variés et les différentes options permettent de changer l’aspect visuel de votre boutique.
Mais parfois, vous souhaitez faire des petites modifications qui ne sont pas disponibles dans l’administration. Et pour cela, nous vous laissons accès au CSS avancé afin qu’un développeur web puisse modifier des parties visuelles de votre boutique en ligne.

Que ce soit avec un développeur externe ou un de nos développeurs, il est possible de faire certaines modifications visuelles de votre boutique.

Pour vous faire gagner du temps et économiser, retrouver ci-dessous une liste de petites modifications visuelles possibles.
Faites attentions d’utiliser les codes destinés à votre thème pour ne rien casser dans votre boutique.
(Chaque code est enregistré sur un thème, si vous changez de thème le nouveau n’aura pas le code CSS)

Où ajouter les lignes de codes CSS?

Pour ajouter les lignes de codes, vous devez le faire dans votre interface administration, sous l’onglet Visuel puis Thème CSS avancé.

Cliquez sur le nom de votre thème pour voir les codes disponibles

Codes CSS pour le thème Amsterdam

▶ 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;}

Codes CSS pour le thème Copenhague

▶ 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;}

▶ 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;}

Codes CSS pour le thème Londres

▶ 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;}

Codes CSS pour le thème Madrid

▶ 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;
}

Codes CSS pour le thème Mexico

▶ 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;}

Codes CSS pour le thème Milan

▶ 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;}

Codes CSS pour le thème Montréal

▶ 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;}

Codes CSS pour le thème Moscou

▶ 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;}

Codes CSS pour le thème New York

▶ 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;}

Codes CSS pour le thème Paris

▶ 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;}

Codes CSS pour le thème San Francisco

▶ 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;}

Codes CSS pour le thème Stockholm

▶ 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;}

Codes CSS pour le thème Tokyo

▶ 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

.table-cart-bottom__promo-form {
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;
}

Codes CSS pour le thème Venise

▶ 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;}