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 gabarits 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 gabarit pour ne rien casser dans votre boutique.
(Chaque code est enregistré sur un gabarit, si vous changez de gabarit 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 gabarit pour voir les codes disponibles

Codes CSS pour le gabarit 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

.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 gabarit 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

.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 gabarit 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

.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 gabarit Madrid

▶ Enlever le gras du texte de la barre menu

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

▶ Modifier la largeur pris 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 (et les documents PDF) par défaut

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

Codes CSS pour le gabarit 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;}

▶ 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 gabarit 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

.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 gabarit 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 gabarit 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 gabarit 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 gabarit 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 gabarit 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 gabarit 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;}

▶ 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

.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 gabarit 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

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

Codes CSS pour le gabarit 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;}