Menu

Adapter la boutique avec HTML et CSS

Vous avez la possibilité d’ajouter vos propres images, textes, liens et d’autres éléments en HTML et CSS.

Afin d’utiliser votre propre HTML et CSS pour votre boutique, vous trouverez dans le menu Paramétrages Boutique > SpreadShop puis « Étendus », un outil HTML et CSS et les trois champs suivants :

  • En-tête de la boutique
  • Pied de page de la boutique
  • Feuille de style CSS

Dans « En-tête » et « Pied de page », vous pouvez à votre guise ajouter du HTML. Nous vérifierons le HTML, afin de nous assurer que votre boutique fonctionne correctement. Grâce au lien https://validator.w3.org/#validate_by_input, vous pouvez vérifier vous-même la validité de votre code HTML. Veuillez noter que pour des raisons de sécurité, JavaScript ne peut pas être utilisé et que nous devrons en retirer les codes.

Vous trouverez ci-dessous une liste de classes de style CSS qui pourraient être utiles pour votre boutique. Cela devrait vous faciliter le paramétrage de votre boutique. Vous pouvez évidemment utiliser des classes de style supplémentaires.

Que souhaitez-vous adapter ? Classe de style CSS
Image ou couleur de fond .customPageBackground
En-tête .customHeader
Pied de page avec mentions légales et CGV .customFooter
Compteur d’articles pour panier et liste de souhaits .customCounter
Précisions .customNotification
Messages d’erreur .customNotification.sprd-error
Titres, p. ex. dans le panier .customHeadline
Éléments de sélection (taille, couleur) .customSelector
Options choisies dans les éléments de sélection .customSelector .sprd-active.sprd-item
Choix de catégorie (sauf pour mobiles) .customFilterItem, .customSubfilterItem
Effet de survol lors du choix de la catégorie (sauf pour mobiles) .customSubfilterItem:hover
Uniquement pour smartphones et non disponible pour tablettes et PC. @media screen and (max-width: 767px) .customSelector.sprd-open
Différents boutons .customButton
Boutons standards .customButton.sprd-default
.customButton.sprd-default:hover
.customButton.sprd-default:active
Boutons importants, p. ex. « Acheter » .customButton.sprd-primary
.customButton.sprd-primary:hover
.customButton.sprd-primary:active
Boutons secondaires, p. ex. « Dans le panier » (dans la liste de souhaits) .customButton.sprd-secondary
.customButton.sprd-secondary:hover
.customButton.sprd-secondary:active
Lightbox .customLightbox
Champ de recherche sur appareils mobiles, menus déroulants sur PC. .customFilter
Images animées sur l’écran de chargement .sprd-loadable.sprd-loading, .sprd-loader

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