Du CSS pour adapter votre boutique

Vous souhaitez changer le design de votre boutique ? Cet article est fait pour vous ! Grâce aux nombreuses questions posées par les partenaires sur le blog, forum et au service client, vous trouverez ici les réponses et des codes CSS pour styliser votre boutique comme bon vous semble.

Avant de commencer, dites-vous bien que les éléments de la feuille de style sont présents pour une bonne raison et qu’ils suivent les standards du e-commerce. Chaque modification peut avoir une influence sur l’apparence de votre boutique et sur le degré de confiance que vos visiteurs porteront à votre boutique. En outre, ces conseils CSS devraient être considérés comme un dernier recours, car les classes CSS peuvent changer sans préavis et ces codes ne fonctionneront plus.

Qu’est-ce que le CSS ?

Pour faire simple, le HTML détermine les éléments qui doivent apparaître dans votre boutique. La feuille de style CSS (Cascading Style Sheet) détermine comment ils doivent apparaître. Dans une feuille de style CSS, aux éléments du fichier HTML sont attribués des boîtes et propriétés permettant de fixer des couleurs, polices, formes, etc. Dans cet article nous n’aborderons que le design (layout en anglais) donc uniquement la feuille de style. Cela peut sembler compliqué au début, mais ne vous inquiétez pas. Même sans de grandes connaissances en CSS, vous pouvez rapidement modifier la mise en forme de votre boutique.

Comment modifier le CSS de ma boutique ?

Dans les paramétrages de votre boutique, allez dans « Étendus » et cliquez sur « HTML et CSS ». Dans le champ « Adapter le CSS de la boutique », vous pouvez utiliser les exemples ci-dessous. Vous pouvez utiliser les espaces et renvois à la ligne pour plus de clarté. Les codes fonctionnent également sans.

Attention : n’oubliez aucun point, caractères spéciaux ou parenthèses !

Exemples de codes CSS

Modifier la police de caractères de la boutique

• body {font-family: American Typewriter !important;}
• Remplacez American Typewriter par le nom de la police que vous souhaitez utiliser.

Masquer le choix de couleurs de la liste de produits

• .sprd-appearance-list–listpage {display:none !important;}

Masquer des couleurs spécifiques de la liste de produits

• .sprd-appearance-list__appearance-194 {display:none !important;}
• Chaque couleur a un numéro. Vous trouverez le numéro de la couleur en survolant une couleur avec la souris. Regardez ensuite le lien (il est généralement situé en bas à gauche dans la fenêtre du navigateur) et notez le numéro à la fin du lien.

Masquer les couleurs de la page détaillée

• .sprd-detail-info__appearances {display:none !important;}

Masquer des couleurs spécifiques de la page détaillée

• #sprd-appearance-list__appearance-194 {display:none;}
• Modifiez le numéro comme décrit plus haut.

Masquer certaines catégories de produits (home, femme, etc.)

• Homme :
  • #sprd-department-filter__department-D1 {display:none;}
• Femme :
  • #sprd-department-filter__department-D3 {display:none;}
• Enfant et bébé :
  • #sprd-department-filter__department-D4 {display:none;}
• Accessoires :
  • #sprd-department-filter__department-D5 {display:none;}
• Coques :
  • #sprd-department-filter__department-D19 {display:none;}
• Poster :
  • #sprd-department-filter__department-D22 {display:none;}

Masquer des collections

• #subFilter-D5-P47 {display:none;}
• Remplacez le numéro (dans l’exemple, 47 correspond aux sacs) par le numéro apparaissant à la fin du lien quand vous survolez une collection avec la souris.

Avec ces codes, vous pouvez facilement ajouter votre touche personnelle à votre boutique et l’adapter à votre marque. Essayez !

Vous voulez en savoir plus ? À très vite dans les commentaires !