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 simple 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 pouvoir 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.

Mais, 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.

Pour ajouter les codes, vous devez le faire dans votre interface administration, sous l’onglet Visuel puis Thème CSS avancé.
(Chaque code est enregistré sur un gabarit, si vous changez de gabarit le nouveau n’aura pas le code CSS)

 

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

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

▶ Agrandir la largeur pris par le titre des articles de blogue

Choisissez la width (par défaut c’est à 400px). 600 px est une autre largeur qui fit bien avec le style du gabarit .

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

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

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

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