Personnalisation de pages spécifiques avec du CSS

Vous pouvez modifier le design des pages individuelles dans votre boutique Ecwid, qu'il s'agisse d'une certaine page de détails d'un produit, d'une page de paiement d'une commande ou d'une page de compte client. En utilisant les classes CSS, il est possible de définir des règles CSS qui ne s'appliquent qu'à des pages spécifiques de votre vitrine Ecwid.

En fonction de la page

Page de détails du produit

Une page de détails de produit typique a un nom de produit, une image et un panneau de droite, qui se compose du prix du produit, une UGS, un bouton Ajouter au panier, etc :

Appliquer la conception à toutes les pages de détails du produit

Si vous souhaitez appliquer des styles à toutes les pages de détails produits de votre boutique Ecwid, alors vous devez utiliser la classe suivante dans votre CSS :

.ec-store__product-page

Appliquer la conception à certaines pages de détails du produit

Si vous voulez masquer les prix sur la page de détails de produit spécifique, vous devrez utiliser le code suivant dans votre thème CSS :

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

Où « 123456 » est l'ID unique interne du produit pour le produit. Comment obtenir l'ID du produit ? 

Si vous voulez appliquer des styles à plusieurs pages de détails de produit, mais pas à toutes ces pages, vous pouvez utiliser le code suivant :

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

Où « 123456 », « 121221 » et « 123234 » sont les identifiants internes uniques du produit. Par conséquent, vous masquerez les UGS sur trois pages de détails du produit.

Appliquer la conception à toutes les pages de détails du produit dans une seule catégorie

Pour appliquer des modifications de style par lot aux pages de détails du produit de tous les produits appartenant à une certaine catégorie, vous pouvez utiliser cette classe CSS :

.ec-store__product-page--c12345

où vous mettrez la catégorie ID requise au lieu de 12345.

Par exemple, vous souhaitez masquer temporairement les boutons Ajouter au panier sur les pages de détails des produits assignés à la catégorie avec l'ID 12345. Voici un exemple de code CSS que vous pouvez utiliser dans ce but :

.ec-store__product-page--c12345 .details-product-purchase__controls {
display: none;
}

Page de catégorie

Une page de catégorie typique affiche tous les produits de cette catégorie dans la vue grille :

Les changements CSS pour les pages de catégories fonctionnent de la même manière que les pages de détails du produit.

Appliquer la conception à toutes les pages de catégories

Si vous souhaitez appliquer des styles à toutes les pages de catégories de produits de votre boutique Ecwid, alors vous devez utiliser la classe suivante dans votre CSS :

.ec-store__category-page

Par exemple, si vous voulez changer la couleur de votre prix sur les pages de la catégorie en bleu foncé, alors vous devrez utiliser ce code dans votre thème CSS :

 .ec-store__category-page .grid-product .grid-product__price-amount {
color: darkblue;
}

Appliquer la conception à certaines pages de catégories

Si vous voulez changer la couleur de votre prix sur une page de catégorie spécifique, vous devrez utiliser le code suivant dans votre thème CSS :

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

Où « 4002 » est l'ID unique interne de la catégorie pour la catégorie. Comment obtenir l'ID de la catégorie ? Si vous voulez appliquer des styles à plusieurs pages de catégorie, mais pas à toutes ces pages, vous pouvez utiliser le code suivant :

.ec-store__category-page--4002 .grid-product .grid-product__price-amount,
.ec-store__category-page--4006 .grid-product .grid-product__price-amount,
.ec-store__category-page--4008 .grid-product .grid-product__price-amount {
color: darkblue;
}

Où « 4002 », « 4006 » et « 4008 » sont les identifiants internes uniques de la catégorie. Par conséquent, vous changerez la couleur du prix en bleu foncé sur trois pages de catégorie.

Autres pages

Vous pouvez également appliquer une conception personnalisée à d'autres pages :

• pages panier et passage de la commande
• pages des paramètres du compte

Pages panier et passage de la commande

Pour appliquer le design à la page du panier et du passage de la commande, utilisez les classes CSS suivantes :

.ec-size .ec-store .ec-cart

Page Merci pour votre commande

Pour appliquer le design à la page Merci pour votre commande seulement, utilisez les classes CSS suivantes :

.ec-size .ec-store .ec-confirmation

Pages de profil client

Pour appliquer la conception aux pages de profil du client (disponible pour vos clients après qu'ils se connectent à votre boutique), utilisez les classes CSS suivantes :

Page des paramètres du compte :

.ecwid-productBrowser-AccountSettingsPage 

Page des commandes

.ecwid-productBrowser-OrdersPage 

En fonction du client

Dans certains cas, vous pouvez vouloir cacher les prix ou les UGS pour les clients qui n'ont pas encore créé de compte dans votre boutique, ou peut-être mettre en évidence certains de vos articles pour des clients qui appartiennent à un groupe de clients spécifique. Heureusement, cela est tout à fait possible grâce au CSS. Laissez-nous vous montrer comment :

Pas connecté ou n'a pas de compte

Lorsqu'un client visite votre boutique pour la première fois, il n'a pas de compte dans votre boutique et il est à la recherche d'un produit dont il a besoin. Vous pouvez appliquer une conception personnalisée pour ce type de clients. Pour ce faire, vous devrez utiliser la classe suivante dans votre thème CSS :

body.ecwid-customer-loggedOut

Par exemple, si vous voulez transformer votre boutique Ecwid en un catalogue en ligne pour les clients qui se rendent dans votre boutique pour la première fois ou ne se sont pas encore connectés à leur compte, vous pouvez facilement le faire en ajoutant le code suivant à votre thème CSS :

/* Masque les prix et ajoute des boutons d'étiquette pour les clients déconnectés */
body.ecwid-customer-loggedOut .grid-product__price,
body.ecwid-customer-loggedOut .grid-product__button,
body.ecwid-customer-loggedOut .product-details__product-price,
body.ecwid-customer-loggedOut .details-product-purchase__controls {
	display: none;
}

Connecté

Vous pouvez appliquer une conception personnalisée pour les clients qui se sont connectés à leur compte dans votre boutique et qui parcourent votre catalogue en ligne. Pour ce faire, vous devrez utiliser la classe suivante dans votre thème CSS :

body.ecwid-customer-loggedIn

Disons que vous voulez afficher les prix pour ce type de clients en vert, dans ce cas, vous devrez appliquer ce code à votre thème CSS :

body.ecwid-customer-loggedIn div.grid-product__price .grid-product__price-amount {
 color: green;
}

Vous pouvez également bloquer l'accès à votre vitrine à moins qu'un visiteur ne se connecte à son compte. En savoir plus

Appartient à un groupe de clients

Lorsqu'un client s'inscrit dans votre boutique Ecwid, il est assigné à un groupe de clients par défaut avec l'ID « 0 ». Si vous souhaitez appliquer une conception personnalisée à tous les clients qui sont assignés à ce groupe de clients, alors vous devrez utiliser la classe suivante :

body.ecwid-customer-group-0

Cependant, si vous avez plusieurs groupes de clients dans votre boutique et que vous avez une large base de clients avec des remises attribuées à un groupe de clients spécifique, vous voudrez peut-être souligner les avantages de leur adhésion à votre boutique en utilisant une conception personnalisée pour ce type de clients en utilisant le code suivant :

body.ecwid-customer-group-12345

Où « 12345 » est l'ID unique du groupe de clients. Vous pouvez l'obtenir en vous connectant au compte qui appartient à ce groupe de clients et en visualisant n'importe quelle page dans l'outil « Inspecter l'élément » de votre navigateur. Pour changer la couleur du prix en vert sur les pages de catégorie pour tous les clients d'un groupe de clients spécifique, utilisez le code suivant :

body.ecwid-customer-group-12345 div.grid-product__price .grid-product__price-amount {
color: green;
}

Nous venons de vous montrer un petit aperçu de ce que vous pouvez réaliser avec des thèmes CSS personnalisés et divers types de page et de client, alors allez-y maintenant et essayez par vous-même !

Consultez notre guide sur comment changer la conception Ecwid.