Si vous avez une boutique en ligne intégrée à votre script HTML et que vous aimeriez lui appliquer des styles, nous vous recommandons d'ajouter des feuilles de style CSS à votre espace web. Cela vous permettra de changer les styles de police, les couleurs et bien plus encore.
Vous pouvez télécharger le fichier CSS sur votre page vitrine dans l'administration de la boutique en ligne. Si vous possédez déjà un fichier CSS, vous pouvez choisir les styles ci-dessous, puis les ajouter à votre fichier existant.
Où dois-je placer le fichier CSS ?
Nous recommandons de placer le fichier CSS dans le même dossier que celui où se trouve le fichier HTML contenant votre boutique en ligne. Dans le fichier HTML, vous devez placer un lien vers le fichier CSS.
Le lien vers votre CSS devrait ressembler à ceci :
<link rel="stylesheet" type="text/css" href="shopfront-embed-style.css">
Remplacez shopfront-embed-style.css par le nom de votre fichier CSS, si vous l'avez renommé. Vous devez placer le lien, juste après votre head-tag, mais avant le /head-tag de fermeture.
Paramètres de style
Vous pouvez modifier les paramètres suivants :
- Famille de police
- Couleur de la police
- Couleur de remplissage
- Menus déroulants
- Bordures
- Couleurs d'accentuation
- Étiquette de promotion
- La Boutique en ligne en aperçu mobile
Famille de police
Avec la famille de police, vous pouvez modifier la police principale qui est utilisée dans votre boutique en ligne. La première police est celle qui est affichée. Les deux autres sont des polices de sauvegarde au cas où la première ne pourrait pas être récupérée.
Exemple :
font-family: "Times New Roman",Times,serif;
Couleur de la police
Par défaut, la couleur de la police est définie comme étant la même que pour les textes, liens, survols, etc. Si vous voulez modifier la couleur, changez simplement le code HEX.
Si vous voulez définir une autre couleur, par exemple lorsque vous survolez un lien, séparez le paramètre de la liste et donnez-lui son propre code de couleur HEX.
Exemple :
.onecom-webshop-main,
.onecomwebshop-main a.link,
.onecomwebshop-main a.link:link,
.onecomwebshop-main a.link:visited,
.onecomwebshop-main a.link:hover,
.onecomwebshop-main a.link:active,
.onecomwebshop-main input,
.onecomwebshop-main select,
.onecomwebshop-main .text-color {
color: #363636;
}
Couleur de remplissage
Les couleurs de remplissage s'appliquent aux arrière-plans des icônes dans la boutique. Modifiez les couleurs à l'aide des paramètres ci-dessous.
Couleur d'icône SVG
La couleur de remplissage sera appliquée aux icônes SVG autour de la boutique en ligne, par exemple l'icône panier. Pour modifier la couleur, changez le code HEX.
Exemple :
.onecom-webshop-main .text-color svg {
fill: #363636;
}
Couleur d'arrière-plan (Boutique en ligne)
Ce paramètre définira la couleur d'arrière-plan de votre Boutique en ligne. Vous pouvez changer la couleur en modifiant le code hexadécimal.
Exemple :
.onecom-webshop-main {
background-color: #fdfdfd
}
Menus déroulants
Votre sélecteur de catégorie, ainsi que le tri des produits, sont des menus déroulants. Vous pouvez ajuster les couleurs des menus déroulants.
Couleur d'arrière-plan (déroulant)
Ceci détermine la couleur de l'arrière-plan déroulant. Changez simplement le code HEX dans le code vers la couleur que vous voulez.
Exemple :
.onecomwebshop-main .bg-color {
background-color: #ffffff !important;
}
Couleur de bordure (déroulant)
La couleur choisie ici déterminera la couleur de bordure du menu déroulant. Changez simplement les codes HEX et RGBA dans le code et remplacez-les par les couleurs que vous voulez.
Exemple :
.onecomwebshop-main .border-color {
border-color: rgba(0,0,0,0.5) !important;
}
Couleur du texte (déroulant)
Ce paramètre détermine la couleur du texte qui est utilisé dans les menus déroulants. Pour changer la couleur, changez le code de couleur HEX.
Exemple :
.onecomwebshop-main .category-text {
color: #000000 !important;
}
Valeur sélectionnée (liste déroulante)
Ce paramètre détermine la couleur du texte des éléments sélectionnés dans une liste déroulante. Vous pouvez modifier la couleur en modifiant le code de couleur HEX.
Exemple :
.onecom-webshop-main .selected-text {
color: #000000 !important;
}
Couleur de survol (déroulant)
Les deux paramètres ci-dessous déterminent la couleur de la police en cas de survol ainsi que la couleur d'arrière-plan. Changez simplement les codes HEX et RGBA dans le code, pour les couleurs de votre choix.
Exemple :
.onecomwebshop-main .bg-light-focus:hover {
color: #000 !important;
background-color: rgba(99,170,219,0.5) !important;
}
Bordures
Couleur de la bordure du bouton retour
Ce paramètre détermine la couleur de la bordure pour votre bouton retour, pour le bouton « retour à la boutique» et pour le passage au paiement. Changez le code HEX en la couleur de votre choix.
Exemple :
.onecomwebshop-main .border-fcolor {
border-color: #363636 !important;
}
Bordure utilisée autour des détails de commande
Pendant le processus de paiement, une zone avec une présentation des éléments en cours d'achat est visible. Ce paramètre vous permet de changer la couleur de la bordure de cette zone. Changez simplement la couleur RGBA en une couleur de votre choix. Le texte dans la zone est toujours noir.
Exemple :
.onecomwebshop-main .border-light-font-color {
border-color: rgba(54,54,54,0.5) !important;
}
Bordure du titre
Ce paramètre vous permet de modifier la couleur de soulignement des titres, par exemple sur la page de paiement. Changez simplement la couleur HEX en la couleur de votre choix.
.onecomwebshop-main .border-light-color {
border-color: #363636 !important;
}
Bordure inférieure
Ce paramètre permet de placer une ligne sous les éléments de la page de validation. Changez simplement de Couleur hexadécimale pour une de celles que vous préférez.
Exemple :
.onecom-webshop-main .product-item {
border-color: rgba(54,54,54,0.2) !important;
}
Couleurs d'accentuation
Les couleurs d'accentuation sont utilisées pour les prix, l'icône panier et les curseurs mobiles. Changez simplement la couleur HEX en l'une des couleurs de votre choix.
Exemple :
.onecomwebshop-main .focus, .onecomwebshop-main .mobile-slider a {
color: #63aadb !important;
}
.onecomwebshop-main .focus svg{
fill: #63aadb !important;
}
Couleurs d'accentuation lors du survol
Ces paramètres sont les mêmes que ceux qui sont définis ci-dessus, mais pour leur comportement de survol. Changez les couleurs RGBA en la couleur que vous voulez voir apparaître en cas de survol.
Exemple :
.onecomwebshop-main .bg-extra-light-focus:hover {
background-color: rgba(99,170,219,0.1) !important;
}
Étiquette de promotion
Grâce à ce paramètre, déterminez la couleur du texte et de l'arrière-plan de l'étiquette de promotion. Vous pouvez ajouter une étiquette de promotion à un produit pour qu'il se distingue des autres. Consultez aussi notre Guide sur les produits en promotion.
Exemple :
.onecom-webshop-main .product-label {
background-color: #63aadb !important;
color: white !important;
}
La Boutique en ligne en aperçu mobile
Si vous souhaitez modifier la façon dont votre boutique s'affiche sur les appareils mobiles, vous pouvez ajouter votre propre balise meta "viewport" dans la section en-tête du fichier HTML de votre boutique.
Si nous ne trouvons pas cette balise meta, nous ajouterons automatiquement les balises meta suivantes pour une expérience parfaite sur mobile :
meta name="viewport" content="width=320, initial-scale=1"
Articles associés :
