Introduction:

Dans cet article, nous allons voir comment appliquer des polices personnalisées à votre page de fidélité pour mieux refléter votre charte graphique.

📝 Remarque : la personnalisation du CSS est disponible dans les plans Advanced et Plus https://www.loyoly.io/plans

Ce que permet cette fonctionnalité

Grace à cette personnalisation des polices vous pouvez :

Appliquer vos propres polices à la page de fidélité pour respecter votre charte graphique.
Harmoniser l’expérience utilisateur avec le reste de votre site e-commerce.

Comment intégrer sa personnalisation CSS

L’intégration de la Police personnalisée du CSS se fait via l’import d’un fichier regroupant les règles CSS à appliquer. Ci-après le mode opératoire pour charger ce fichier.

Se rendre sur la page Branding
Cliquer sur le bouton Modifier de la carte Apparence générale
Déplier la section CSS personnalisé

Cliquer sur le champ ou la flèche bleu afin d’ouvrir la fenêtre d’import
Sélectionner votre fichier css

Capture+d’écran+2024-11-29+à+11_40_50.png (977×800)

Le nom du fichier doit apparaître après fermeture de la fenêtre d’import.

Capture+d’écran+2024-11-29+à+11_41_16.png (510×434)

Cliquer sur le bouton Enregistrer afin que le fichier soit pris en compte.

Qu'éditer et comment?

La personnalisation se fait en deux étapes:

La premier étape est :
Déclarez vos polices via @font-face

voici le code à ajouter a votre custom CSS:

@font-face { font-family: "FONT_PRIMAIRE"; src: url("https://cdn.shopify.com/s/files/1/0068/0932/1537/files/FONT_PRIMAIRE .otf?v=1750418946") format("opentype"); font-weight: 700; font-style: normal; } 

@font-face { font-family: "FONT_SECONDAIRE "; src: url("https://cdn.shopify.com/s/files/1/0068/0932/1537/files/FONT_SECONDAIRE.otf?v=1750418946") format("opentype"); font-weight: 400; font-style: normal; }

body .text-primary { font-family: "FONT_PRIMAIRE " !important; }

body .text-secondary { font-family: "FONT_SECONDAIRE" !important; }

vous devez Remplacez les URLs par celles de vos propres fichiers de police.

Utilisez le bon format() :
.otf → format("opentype")
.woff → format("woff")
.woff2 → format("woff2")

Ensuite ajouter dans votre fichier custom css

⚠️ Remarque :
Si un fichier CSS personnalisé est déjà appliqué dans Loyoly, l’ajout d’un nouveau fichier écrasera l’ancien.
Dans ce cas, ajoutez simplement la nouvelle ligne de code dans votre fichier CSS existant, puis rechargez ce fichier dans Loyoly.

2.Deuxieme étape : Dans votre fichier CSS personnalisé, vous pouvez modifier les polices en ciblant les règles suivantes :

body .text-primary
body .text-secondary

Veillez à ce que les valeurs de font-family soient cohérentes :

Pour .text-primary : utilisez "FONT_PRIMAIRE"
Pour .text-secondary : utilisez "FONT_SECONDAIRE"

📝 Attention à bien utiliser la même police (font-family) que celle déclarée lors de la première étape.

Exemple :

Voici un Exemple de texte avec l'usage de Metric-Bold et Metric-Regular

@font-face { font-family: "Metric-Bold"; src: url("https://cdn.shopify.com/s/files/1/0068/0932/1537/files/Metric-Bold.otf?v=1750418946") format("opentype"); font-weight: 700; font-style: normal; }

@font-face { font-family: "Metric-Regular"; src: url("https://cdn.shopify.com/s/files/1/0068/0932/1537/files/Metric-Regular.otf?v=1750418946") format("opentype"); font-weight: 400; font-style: normal; }

body .text-primary { font-family: "Metric-Bold" !important; }

body .text-secondary { font-family: "Metric-Regular" !important; }

Vous pouvez consulter ce document Pour plus de détails à ce sujet.