1. Centre d'aide
  2. Base de connaissances
  3. Design
  4. Personnalisation de la conception avec CSS
Base de connaissances
Guides
Académie
Tutoriels vidéo
Appuyez sur la touche échap pour quitter :
Articles consultés récemment :

Sommaire

Appuyez sur la touche échap pour quitter

Le guide CSS d'Ecwid

Vous pouvez facilement personnaliser l'apparence de votre boutique Ecwid en utilisant le langage CSS. Ce guide CSS a été conçu pour vous aider à donner à votre boutique Ecwid l'apparence souhaitée. Il n'est pas exhaustif. En modifiant les modèles HTML et la feuille de style CSS, ce que vous pouvez faire ne trouve de limite que dans votre imagination.

Si vous êtes novice au CSS, consultez les tutoriels suivants pour passer à la vitesse supérieure :

N'hésitez pas à faire appel à l'équipe de développement personnalisée d'Ecwid si vous ne vous vous sentez pas assez à l'aise pour modifier les codes.

Éléments CSS (index)

Ce livre de recettes est organisé en sections couvrant les éléments de la vitrine Ecwid. Chaque section comprend des codes CSS que vous pouvez coller directement dans votre boutique. Utilisez le code tel quel, ou modifiez-le pour l'adapter à vos besoins.

Découvrez comment ajouter des codes CSS à votre boutique Ecwid →

Si vous utilisez un site instantané de nouvelle génération, alors les codes appliqués à votre vitrine (la boutique actuelle où les clients recherchent des produits) n'affecteront pas les blocs boutique sur la page d'accueil de votre site Web. Si vous devez configurer l'apparence des blocs de la boutique, vous pouvez le faire individuellement, par exemple, en utilisant les paramètres de conception dans l'éditeur du site.

Boutons

Polices

Grille de produits (page d'accueil de la boutique)

Page de catégorie

Détails du produit

Panier

Champ de recherche

Paiement

Boutons

Votre boutique compte plusieurs gros et petits boutons, comme les boutons « Ajouter au panier » ou « Continuer ». Vous pouvez les modifier tous à la fois ou individuellement.

Modifier la couleur de tous les gros boutons en une fois

Les gros boutons de votre boutique sont les suivants : Ajouter au panier, Continuer mes achats sur les pages de produits, Continuer, Payer, Passer commande. Utilisez le code CSS suivant pour mettre à jour tous les gros boutons en une fois. Remplacez « #F0F8FF » et « black » dans l'exemple par une couleur de votre choix :

/*Couleur du bouton*/
.ec-size .ec-store .form-control--primary .form-control__button 
{ background-color: red;}

/*Couleur du bouton en survol*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
background: #F0F8FF;
}

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

/*Couleur du texte en survol*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
color: black;
}

Ici, vous pouvez voir différentes combinaisons de couleurs et de teintes et choisir n'importe quelle couleur et son code hexadécimal : Couleurs CSS.

Vous devez également modifier le texte des boutons ? Vous pouvez facilement le faire avec l'éditeur d'étiquettes de votre boutique.
Si votre boutique Ecwid est ajoutée à un site Web Wix, définissez les polices dans les paramètres de l'application Ecwid.

Modifier la couleur du bouton Ajouter au panier

Remplacez #FFA500 (orange) et « #000000 » (noir) par les codes de couleur que vous voulez voir apparaître dans votre boutique.

/*Couleur du bouton*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
background: #FFA500;
}

/*Couleur du bouton en survol*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
background: #FFA500;
}

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

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

Modifier la couleur du bouton Acheter Maintenant

Les boutons Acheter Maintenant sont affichés sur les pages des catégories. Remplacez #FFFAFA (couleur du bouton, blanc neige) et « #000000 » (couleur du texte, noir) par les codes de couleur que vous voulez voir apparaître dans votre boutique.

.ec-size .ec-store .grid-product__buy-now .form-control__button { 
    background: #FFFAFA;
    color: #000000; 
}

Si vous avez ajouté un bouton Acheter à votre site Web ou blog, il peut également y avoir un bouton Acheter maintenant. Pour modifier la couleur de ce bouton, vous pouvez utiliser le code suivant (remplacer les codes de couleur par ceux dont vous avez besoin) :

.ecsp .ecwid-btn--primary,
.ecwid .ecwid-btn--primary {background-color:#2A54D8;}
.ecsp .ecwid-btn--primary:hover,
.ecwid .ecwid-btn--primary:hover {background-color:#2A54D8;}

Modifier la couleur du bouton Payer

Remplacez #FFFFFF (blanc) et « #000000 » (noir) par les codes de couleur que vous voulez voir apparaître dans votre boutique.

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

/*Couleur du bouton en survol*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button:hover {
background-color: #FFFFFF;
}

/*Texte du bouton*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button {
color: #000000;
}

/*Texte du bouton en survol*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button:hover {
color: #000000;
}

Modifier la couleur du bouton Continuer

Remplacez #FFFFFF (blanc) et « #000000 » (noir) par les codes de couleur que vous voulez voir apparaître dans votre boutique.

/*Couleur du bouton*/
.ec-size .ec-store .ec-form__row--continue .form-control__button {
    background-color: #FFFFFF;
}

/*Couleur du bouton en survol*/
.ec-size .ec-store .ec-form__row--continue .form-control__button:hover {
    background: #FFFFFF;
}

/*Couleur du texte*/
.ec-size .ec-store .ec-form__row--continue .form-control__button {
    color: #000000
}

/*Couleur du texte en survol*/
.ec-size .ec-store .ec-form__row--continue .form-control__button:hover {
    color: #000000
}

Modifier la couleur du bouton Passer commande

Remplacez #FFFFFF (blanc) et « #000000 » (noir) par les codes de couleur que vous voulez voir apparaître dans votre boutique.

/*Couleur du bouton*/
.ec-size .ec-store .ec-cart-step--payment .form-control__button {
    background-color: #FFFFFF;
}

/*Couleur du bouton en survol*/
.ec-size .ec-store .ec-cart-step--payment .form-control__button:hover {
    background: #FFFFFF;
}

/*Couleur du texte*/
.ec-size .ec-store .ec-cart-step--payment .form-control__button {
    color: #000000
}

/*Couleur du texte en survol*/
.ec-size .ec-store .ec-cart-step--payment .form-control__button:hover {
    color: #000000
}

Modifier la couleur de tous les plus petits boutons en une fois

Vous pouvez également modifier les petits boutons, comme Ajouter plus, Accéder au paiement, Continuer mes achats sur la page du panier. Voici les codes pour modifier tous ces boutons à la fois. Remplacez #FFFFFF (blanc) et « #000000 » (noir) par les codes de couleur que vous voulez voir apparaître dans votre boutique.

Pour modifier les couleurs des boutons Ajouter plus et Accéder au paiement :

/*Couleur du bouton*/
.ec-size .ec-store .details-product-purchase__controls .form-control__button {
  background-color: #FFFFFF;
    }
    
    /*Couleur du bouton en survol*/
    .ec-size .ec-store .details-product-purchase__controls .form-control__button:hover {
    background-color: #FFFFFF;
    }
    
    /*Couleur du texte*/
    .ec-size .ec-store .details-product-purchase__controls .form-control__button {
    color: #000000;
    }
    
    /*Couleur du texte en survol*/
    .ec-size .ec-store .details-product-purchase__controls .form-control__button:hover {
    color: #000000;
    }

Pour modifier la couleur du bouton Continuer mes achats :

/*Couleur du bouton*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button {
background-color: #FFFFFF;
}

/*Couleur du bouton en survol*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
background-color: #FFFFFF;
}

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

/*Couleur du texte en survol*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
color: #000000;
}

Modifier la couleur du bouton Ajouter plus

Remplacez #FFA500 (orange) et « #000000 » (noir) par les codes de couleur que vous voulez voir apparaître dans votre boutique.

/*Couleur du bouton*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button {
background-color: #FFA500;
}

/*Couleur du bouton en survol*/
. c-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button:hover {
background: #FFA500;
}

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

/*Couleur du texte en survol*/
. c-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button:hover {
color: #000000;
}

Modifier la couleur du bouton Accéder au paiement

Remplacez #FFA500 (orange) et « #000000 » (noir) par les codes de couleur que vous voulez voir apparaître dans votre boutique.

/*Couleur du bouton*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
arrière-plan : #FFA500;
}

/*Couleur du bouton en survol*/
. orm-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
background: #FFA500;
}

/*Couleur du texte*/
. orm-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
color: #000000;
}

/*Couleur du texte en survol*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
color: #000000;
}

Modifier la couleur du bouton Continuer mes achats sur la page du panier

Remplacez #FFA500 (orange) et « #000000 » (noir) par les codes de couleur que vous voulez voir apparaître dans votre boutique.

/*Couleur du bouton*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button {
background-color: #FFFFFF;
}

/*Couleur du bouton en survol*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
background-color: #FFFFFF;
}

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

/*Couleur du texte en survol*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
color: #000000;
}

Placer les boutons Acheter maintenant au même niveau

Lorsque vos titres de produits sont de longueurs différentes, les boutons Acheter maintenant peuvent ne pas être alignés sur la page de la vitrine. Pour aligner les boutons Acheter dans une vue grille :

Buy Now buttons.png

.grid-product__wrap {
  display: flex;
}
.grid-product__price {
    flex: 1 0 auto;
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

Masquer le bouton Ajouter au panier sur toutes les pages des produits

Masquez le bouton Ajouter au panier sur toutes les pages des produits en utilisant le code CSS ci-dessous :

.details-product-purchase__controls {
display: none;
}
Sachez que lorsque vous masquez les boutons Acheter maintenant et Ajouter au panier vos clients ne peuvent pas acheter vos produits. En savoir plus sur la façon d'utiliser Ecwid comme un catalogue en ligne →

Polices

Vous pouvez définir la famille de police par défaut et sa couleur pour l'ensemble de la boutique.

Modifier toutes les polices

Modifier la famille de police pour l'ensemble de la boutique. Remplacez NAME_OF_FONT avec le nom de police souhaitée :

.ecwid div, .ecwid span, .ecwid a, .ecwid p, .ecwid h1 {
font-family: NAME_OF_FONT !important;
}
En savoir plus sur les combinaisons de polices couramment utilisées.

Modifier la couleur de la police

Modifiez la couleur de toutes les polices en une fois. Dans l'exemple, remplacez « #26262626 » (gris très foncé) par n'importe quelle couleur de votre choix :

.ecwid div, .ecwid span, .ecwid a, .ecwid p, .ecwid h1 {
color: #262626 !important;
}
Ici, vous pouvez voir différentes combinaisons de couleurs et de teintes et choisir n'importe quelle couleur et son code hexadécimal : Couleurs CSS.
Si vous avez ajouté votre boutique ecwid à un site Web Wix, définissez les polices dans les paramètres de l'application Ecwid.

Grille de produits (page d'accueil de la boutique)

La grille de produits est une disposition qui contient plusieurs produits. Vous pouvez la retrouver :

  • Sur les pages de catégories.
  • Dans la section Produits en vedette de la page d'accueil.
  • Dans la grille des produits connexes en dessous du produit principal sur une page de produit.

Modifier la couleur et la taille de la police du prix dans la grille de produit

Modifiez la couleur ou la taille de la police du prix dans la grille des produits. Modifiez « blue » et « 20px » par n'importe quelle couleur et taille de police de votre choix.

/*Titres des produits sur la page du catalogue*/
/*Modifier la couleur de la police*/
.ec-size .ec-store .grid-product__title-inner {
color: blue;
}

/*Prix du produit sur la page du catalogue*/
/*Modifier la couleur de la police*/
.ec-size .ec-store .grid-product__price-amount {
color: blue;
}

/*Moifier la taille de la police*/
.ec-size .ec-store .grid-product__price-value.ec-price-item { 
font-size: 20px !important; 
}

Désactiver l'effet de zoom pour les miniatures des produits

Lorsque vous placez le curseur de votre souris sur une vignette de produit, un effet de zoom se produit. Cette fonctionnalité est activée par défaut pour toutes les boutiques Ecwid. Si vous souhaitez le désactiver pour votre boutique en ligne, vous pouvez utiliser les codes CSS suivants :

.ec-size .ec-store .grid-product__wrap-inner:hover .grid-product__picture {
    transform: none;
}

Placer les icônes « Suivi des commandes », « Favoris », « Panier », « Mon Compte » en haut de la page de la vitrine

Les boutons du menu de pied de page « Suivre les commandes », « Favoris », « Panier » et « Mon Compte » se trouvent par défaut au bas de la page de vitrine. Pour les déplacer en haut de la page :

.ec-size .ec-store__category-page .ec-store__content-wrapper,
.ec-size .ec-store__category-page .ec-store__content-wrapper > div {
    display: flex;
    flex-direction: column;
}
.ec-size .ec-store__category-page .ec-footer {
    order: -1;
}

Catégorie

Les boutiques aux gammes de produits variées utilisent des catégories pour organiser les produits et aider les acheteurs à trouver ce qu'ils recherchent. Vous pouvez appliquer les changements de style à une catégorie et/ou à toutes les catégories à la fois.

Pour appliquer les modifications de style à toutes les pages de détails de catégorie de votre boutique Ecwid, utilisez la classe CSS .ec-store__category-page.

Si vous n'avez pas encore de catégorie, tous vos produits appartiennent à une catégorie par défaut : « Page d'accueil de la boutique ». Pour appliquer les modifications de style à tous les produits appartenant à une catégorie de la page d'accueil de la boutique, utilisez la calasse CSS ec-store__category-page--0.

Centrer les produits dans les catégories

Centrez les produits sur les pages de catégorie (fonctionne mieux si vous avez quelques produits dans une catégorie) :

.ec-size .ec-store .grid__products {
    justify-content: center;
}

Modifier la couleur du prix sur une page de catégorie spécifique

Modifiez la couleur du prix sur une page de catégorie spécifique. Remplacez « 4002 » par votre ID de catégorie unique. Remplacez #FFA500 (orange) par le code de couleur que vous voulez voir apparaître dans votre boutique.

.ec-store__category-page--4002 .grid-product .grid-product__price-amount {
color: #FFA500;
}

Désactiver l'effet de zoom pour les miniatures des catégorie

Lorsque vous placez le curseur de votre souris sur une vignette de catégorie, un effet de zoom se produit. Cette fonctionnalité est activée par défaut pour toutes les boutiques Ecwid. Si vous souhaitez le désactiver pour votre boutique en ligne, vous pouvez utiliser les codes CSS suivants :

.ec-size .ec-store .grid-category__wrap-inner:hover .grid-category__bg-image {
    transform: none;
}

Afficher le même nombre de catégories par ligne

Vous pouvez spécifier la proportion de la largeur totale de la page occupée par les catégories. Par exemple, si vous fixez la largeur des catégories à 20 % de 100 % de l'espace de la page, vous obtiendrez 5 catégories par ligne, ou si vous fixez la largeur à 25 %, vous obtiendrez 4 catégories par ligne, et ainsi de suite.

Affichez un certain nombre de catégories par ligne :


.ec-size .ec-store .grid__categories .grid-category:nth-child(n+1) {
    width: 20% !important;
}

Désactiver l'effet de survol pour les titres des catégories

Modifiez le sélecteur suivant :

.ec-size .ec-store .grid-category__wrap-inner:hover .grid-category__title-inner {
    transform: none;
}

Masquer les images et titres des miniatures des catégories

Pour les catégories sans image, Ecwid montre un dégradé à la place de là où l'image aurait dû apparaître dans la vitrine :

Screenshot_2019-12-29_at_17.35.03.png

Vous pouvez ajouter vos propres images. Vous pouvez également masquer complètement les images et titres des cartes de catégories (par exemple, si vous utilisez le menu horizontal comme mode de navigation dans votre boutique) :

.ec-size .ec-store .grid__categories {
display: none;
}

Masquer les cartes de catégories sur la page d'accueil de la boutique

Si vous souhaitez profiter d'une vue plus compacte pour votre première page de boutique (par exemple, pour y afficher uniquement le menu horizontal et les produits en vedette ), vous pouvez masquer les cartes de catégorie de la page d'accueil de la boutique. En parallèle, vous pouvez conserver les cartes de catégorie sur vos pages de catégorie afin que les clients puissent y voir des sous-catégories, le cas échéant.

.ec-size .ec-store.ec-store__category-page--0 .ec-grid .grid__categories {
display: none;
}

Détails du produit

La page de produit affiche une image du produit, son nom, son prix, sa description, etc. Vous pouvez modifier l'apparence et l'apparence du contenu, ainsi que masquer certains éléments.

Pour appliquer les changements de style à tous les produits appartenant à une certaine catégorie, utilisez la classe CSS .ec-store__product-page--c12345. Remplacez « 12345 » par votre ID de catégorie unique.

Modifier la couleur et la taille de la police

Modifiez la couleur et la taille de la police sur la page du produit. Remplacez #FFA500 (orange) et « 20px » par la couleur et la taille de police de votre choix.

Couleur des titres :

/*Titres des produits sur la page de produit*/
.ec-size .ec-store .product-details .product-details__product-title {
    color: #FFA500;
}

Couleur et taille de la police du prix :

/*Prix du produit sur la page de produit*/
.ec-size .ec-store .ec-price-item {
    color: #FFA500;
}
.ec-size .ec-store .ec-price-item {
    font-size: 20px; 
}

Couleur de la REF :

/*REF du produit sur la page de produit*/
.ec-size .ec-store .product-details__product-sku {
    color: #FFA500;
}

Couleur de la quantité :

/*Étiquette de quantité sur la page de produit*/
.ec-size .ec-store .details-product-purchase__place {
    color: #FFA500;
}

Couleur et taille de la police du prix unitaire :

/*Champs de prix unitaire sur la page de produit*/
.ec-size .ec-store .product-details__price-per-unit-block {
    font-size: 20px;
    color: #FFA500;
}

Modifier la couleur de la balise « Soldes »

Modifiez la couleur de la balise SOLDES. Remplacez le ROUGE de l'arrière-plan et de la bordure par la couleur de votre choix :

/*Modifier la couleur de l'étiquette de soldes*/
.ec-size .ec-store .label--notice { 
background-color: RED; 
}
.ec-size .ec-store .label--notice::after,
.ec-size .ec-store .label--notice::before {
color: RED; 
}

Afficher les images de la galerie en taille réelle sur mobile

Ajoutez propriété et le sélecteur suivants :

.ec-size:not(.ec-size--s)  .ec-store .product-details .product-details__gallery {
    width: 100vw;
    margin-left: calc(env(safe-area-inset-left) - var(--global-tile-padding) * 1px);
}

Supprimer le nom sous l'image détaillée dans une galerie

Supprimez le texte sous l'image détaillée :

div.pswp__caption__center { 
display:none;
}

Ouvrir la section « Afficher plus » sur les pages des produits

L'option Afficher plus permet de conserver une vue compacte de la page de produit si la description est longue. Utilisez ce code pour afficher une description détaillée du produit :

.ec-size.ec-size--s .ec-store .product-details-module__content--collapsed {
max-height: none;
}
.ec-size.ec-size--s .ec-store .product-details__product-description::after {
display: none;
}
.ec-size.ec-size--s .ec-store .product-details-module__content--collapsed~.product-details-module__btn-more {
display: none;   
}
.ec-size.ec-size--s .ec-store .product-details-module__content--collapsed::after {
content: none;
}
#productDescription img { 
display: inline;
}

Afficher les « Produits connexes » en haut d'une page

Par défaut, les produits connexes apparaissent au bas des pages de produit. Pour les déplacer en haut :

.ec-size .ec-store__content-wrapper {
display: flex;
flex-direction: column;
}
.ec-size .ec-store__content-wrapper .ec-related-products {
order: -1;
}

Masquer le prix pour des produits spécifiques

Masquez le prix pour de produits spécifiques. Remplacez « 123456 » pour votre ID de produit interne unique : (Comment obtenir l'ID d'un produit ?)

.ec-store__product-page--123456 .product-details__product-price {
    display: none;
}

Masquer les prix pour les clients non connectés

Vous pouvez masquer les prix pour les visiteurs non connectés. Votre catalogue sera disponible pour tous les visiteurs, mais seuls les clients inscrits verront les prix et la boutique. Cette option est particulièrement utile si vous voulez garder le prix de gros privé.

Vous trouverez ci-après un code CSS destiné à masquer les prix et les boutons Ajouter au panier et Acheter maintenant. Dans ce cas, seuls les clients inscrits pourront passer des commandes. Les visiteurs non connectés ne pourront voir que votre catalogue.

/*Masquer le prix sur la page de catalogue*/
body.ecwid-customer-loggedOut .grid-product__price { 
     display: none; 
} 

/*Masquer les boutons Acheter maintenant sur la page de catalogue*/
body.ecwid-customer-loggedOut .grid-product__button.grid-product__buy-now {
    display: none;
}

/*Masquer le prix sur la page de détails du produit*/
body.ecwid-customer-loggedOut .details-product-price__value,
body.ecwid-customer-loggedOut .details-product-price-compare__container {
    display: none;
} 

/*Masquer le bouton Ajouter au panier sur la page de détails du produit*/ 
body.ecwid-customer-loggedOut .details-product-purchase__add-buttons {
    display: none;
}

Si vous résidez dans un pays où une note Le prix comprend les taxes est affichée à côté du prix du produit, vous devrez également ajouter le code CSS suivant pour masquer ce texte de la vitrine :

body.ecwid-customer-loggedOut .product-details__product-price-taxes { display: none; }
Si vous voulez que seuls les clients inscrits voient votre vitrine, utilisez l'application Required Login for Storefront Access.

Panier

Modifier le style du bouton « Supprimer le produit »

Vos clients peuvent retirer un produit du panier en utilisant l'icône Fermer (х). Elle apparaît lorsque vous survolez le produit sur la page Panier.

Vous pouvez ajuster la hauteur et la largeur de l'enseigne, l'épaisseur de ses lignes, l'arrondi de ses coins ainsi que changer la couleur de l'enseigne pour la rendre plus visible.

Voici le code que vous devez ajouter à votre boutique :

.ec-size .ec-store .ec-cart-item__control-inner svg {
    opacity: 1.5;
    color: red;
    width: 30px;
    height: 30px;
    border-radius: 10px;
}
.ec-size .ec-store .ec-cart-item__control-inner svg g {
    stroke-width: 2px;
}

Supprimer le champ de quantité

Pour masquer la quantité de la page du panier :

.ec-size .ec-store .ec-cart-item__count {
display: none;
}

Développer le champ de coupon de réduction

Vous pouvez développer le champ de coupon de réduction (et de carte cadeau) dans le panier :

.ec-size .ec-store .ec-cart-coupon__wrap { visibility: visible } 

.ec-size .ec-store .ec-cart-coupon:not(.ec-cart-coupon--applied) .ec-cart-coupon__button--apply { 
display: block; 
}

.ec-size .ec-store .ec-cart-coupon .ec-cart-coupon__wrap { 
display: flex; 
align-items: center; 
height: auto; 
}

.ec-size .ec-store .ec-cart-coupon .ec-cart-coupon__text { 
display: none; 
}

Afficher le panier vide sur le site instantané (version originale)

Par défaut, l'icône du panier du site instantané s'affiche si le panier contient un produit. Si vous le souhaitez, vous pouvez afficher l'icône du panier même si ce dernier est vide :

.float-icons__icon--cart.off:not(.off2) {
    opacity: 1;
    height: 48px;
    padding-top: 12px;
    transform: translateX(-8px);
    pointer-events: auto;
}

@media (min-width: 414px) {
    .float-icons__icon--cart.off:not(.off2) {
        height: 68px;
        padding-top: 16px;
        transform: translateX(-16px);
    }
}

@media (min-width: 768px) {
    .float-icons__icon--cart.off:not(.off2) {
        padding-top: 24px;
        transform: translateX(-24px);
    }
}
Ce code fonctionne pour la version originale du site instantané Ecwid seulement.

Champ de recherche

Un widget de recherche aide vos clients à rechercher des produits dans votre boutique. Vous pouvez modifier l'apparence du champ de recherche lui-même ou le déplacer.

Modifier l'apparence du widget de recherche

Ajoutez ou modifiez le sélecteur et les propriétés suivants. Modifiez la taille et remplacez les codes de couleur comme #000000 par le code de la couleur que vous voulez afficher.

/*Styles du champ de saisie*/
input.ecwid-search-widget__input[type="text"] {
 width: 100px; /*modifiez la largeur tel que souhaité*/
 height: 20px; /*modifiez la hauteur tel que souhaité*/
 border: solid 1px red; /*modifiez la couleur de la bordure*/
 background-color: #000000; /*modifiez la couleur de l'arrière-plan*/
 font-size: 12px; /*modfiez la taille de la police dans le champ de recherche*/
 color: #000000; /*modfiez la couleur de la police dans le champ de recherche*/
}

Modifier le style du bouton de recherche

Ajoutez ou modifiez le sélecteur et les propriétés suivants. Remplacez image/button_search.png par le chemin absolu vers l'image d'arrière-plan. Par exemple : « http://www.example.com/images/button_bg.png »

/* Styles du bouton « Rechercher » */
button.ecwid-search-widget__btn {
 width: 20px; /*Modifiez la largeur tel que souhaité*/
 height: 10px; /*Modifiez la hauteur tel que souhaité*/
 border: solid 1px #ffffff; /*Modifiez la couleur de la bordure*/  
 background: transparent url(image/button_search.png) no-repeat bottom center !important; /*Ajoutez l'image d'arrière-plan*/
}

Déplacer le champ de recherche

Selon la position souhaitée du widget de recherche, indiquez les valeurs correspondantes pour margin-left et margin-top pour le déplacer.

/*Pour déplacer le widget de recherche*/
.ecwid-search-widget {
max-width: 170px; /*Modifiez la largeur tel que souhaité*/
position:relative;
margin-left: 400px; /*Modifiez la marge de gauche tel que souhaité*/
margin-top: 10px; /*Modifiez la marge supérieure tel que souhaité*/
}

Modifier le champ de recherche sur le site instantané (version originale)

Remplacez #F3F6F9 par le code de la couleur que vous voulez voir apparaître.

.ec-minicart.ec-minicart--pill .ec-minicart.ec-minicart--rect { 
border: 1px solid #e6e6e6; 
}
.search-panel .text-field { 
background-color: #F3F6F9; 
border: 2px solid #DC230A; 
}
Ce code fonctionne pour la version originale du site instantané Ecwid. Si vous utilisez le site instantané nouvelle génération, vous pouvez modifier l'apparence du champ de recherche dans l'éditeur de site.

Paiement

Supprimer le délai de livraison des noms des modes de livraison

Certains transporteurs (comme USPS, FedEx, etc.) ajoutent le délai de livraison au nom des modes d'expédition. Si vous utilisez un transporteur en ligne pour votre boutique Ecwid, vous pouvez voir que les modes d'expédition sont affichés comme ceci : « USPS. Courrier prioritaire (1-3 jours) » lors du paiement. Il est possible de masquer ce délai de livraison avec un code CSS :

span.ecwid-shippingOption-days, span.ecwid-Invoice-ShippingDetails-transitTime {
display:none !important;
}

Modifier les logos de carte de crédit dans les options de paiement lors du paiement

Les logos sous les options de paiement aident les clients à voir immédiatement quelles options ils peuvent utiliser pour effectuer un paiement. Vous pouvez utiliser un code CSS pour afficher différents logos, par exemple pour montrer plus explicitement les cartes de débit ou de crédit que les clients peuvent utiliser.

Utilisez ce code CSS :

/*Masquer les logos des modes de paiement actuels*/
.ec-size .ec-store .ec-cart-step--payment .ec-radiogroup__item:nth-child(X) 
div.ec-cart-accept__icons {
    display: none;
} 

 /*Ajouter un logo personnalisé pour le mode de paiement*/
.ec-size .ec-store .ec-cart-step--payment .ec-radiogroup__item:nth-child(X) 
.ec-radiogroup__info:after {
    content: '';
    background: url('https://example.com/your_image.jpg') no-repeat;
    background-size: contain;
    height: 40px;
    width: 60px; /*Largeur à ajuster selon votre logo*/
    display: block;
}

Remplacez https://example.com/your_image.jpg par l'URL de votre logo et X dans :nth-child(X) par le chiffre correspondant au mode de paiement. Par exemple, si trois modes de paiement sont disponibles et que vous voulez afficher de nouveaux logos sous le deuxième mode, indiquez « 2 » dans le code, comme ceci : :nth-child(2).

Vous pouvez utiliser les logos de carte de crédit suivants :

Afficher les logos des cartes de crédit dans le pied de page de la boutique

Si vous devez montrer quelles cartes vous acceptez dans votre boutique (par ex. pour que Google approuve votre compte Google Shopping), vous pouvez ajouter des logos de carte au pied de page en utilisant le code CSS suivant :

Site instantané nouvelle génération
Site instantané (version habituelle)

.ins-tile--footer .ins-tile__made-with:before {
content: '';
background: url('https://example.com/your_image.jpg') no-repeat;
background-size: contain;
background-position: center;
height: 50px;
display: block;
}

Remplacez https://example.com/your_image.jpg par l'URL de votre image avec des logos.

Vous pouvez utiliser les logos de carte de crédit suivants :

Cet article vous a-t-il été utile ?

Génial ! Merci pour vos commentaires !

Merci pour vos commentaires !

Nous sommes désolés ! Que s'est-il passé ?
Utilisateurs qui ont trouvé cela utile : 29 sur 44
Articles dans cette section
10
Nous utilisons des cookies et des technologies similaires pour garder vos préférences en mémoire, mesurer l'efficacité de nos campagnes et analyser des données anonymisées afin d'améliorer les performances de notre site. En choisissant « Accepter », vous acceptez l'utilisation de cookies.
Accepter les cookies Refuser