Identité visuelle et thèmes : documentation CheckoutOS

Les extensions CheckoutOS reprennent automatiquement l’identité visuelle du paiement Shopify. Vous pouvez personnaliser davantage les couleurs, les polices et les styles pour créer une expérience fluide et cohérente avec votre marque.

Accédez aux paramètres d’identité visuelle dans Dashboard → Settings → Branding.

Identité visuelle du paiement Shopify

CheckoutOS respecte les paramètres d’identité visuelle du paiement Shopify. Configurez d’abord son apparence de base dans Shopify Admin → Settings → Checkout, puis utilisez les paramètres CheckoutOS pour personnaliser les extensions.

Couleurs de la marque

Définissez la palette de votre marque pour toutes les extensions du paiement :

Couleur principale

Votre couleur principale sert pour :

Les boutons d’action (Accept, Add to Order)
Le remplissage des barres de progression
Les indicateurs d’état actif
Le texte des liens

Variables de couleur

/* CheckoutOS automatically generates these CSS variables */
--checkoutos-primary: #4F46E5;
--checkoutos-primary-hover: #4338CA;
--checkoutos-primary-light: #EEF2FF;
--checkoutos-primary-contrast: #FFFFFF;

Couleurs secondaires

Les couleurs secondaires complètent la couleur principale :

Accent Color — Badges, éléments mis en avant et boutons secondaires
Success Color — Messages de confirmation et coches
Warning Color — Indicateurs d’urgence et comptes à rebours

Typographie

Par défaut, CheckoutOS utilise la police du paiement Shopify. Vous pouvez la remplacer pour des éléments précis :

Paramètres des polices

Heading Font — Titres des offres incitatives et en-têtes des extensions
Body Font — Descriptions et texte courant
Button Font — Texte des boutons d’action

CheckoutOS prend en charge Google Fonts et toutes les polices standard du web. Les polices personnalisées peuvent être chargées par CSS.

Effet sur les performances

Le chargement de polices personnalisées peut affecter les performances du paiement. Nous recommandons les polices déjà chargées par votre thème Shopify pour éviter des requêtes réseau supplémentaires.

Paramètres du logo

Ajoutez votre logo aux pages de vente incitative après achat pour préserver la cohérence de marque :

Importer votre logo

Définir l’emplacement du logo

Configurer la version pour le mode sombre

Styles des boutons

Personnalisez l’apparence des boutons d’action :

Forme des boutons

Rounded — Coins arrondis doux, rayon de 8 px
Pill — Extrémités entièrement arrondies
Square — Coins droits, rayon de 0 px
Custom — Définissez votre propre rayon de bordure

Taille des boutons

Small — Boutons compacts pour un encombrement minimal
Medium — Taille équilibrée, recommandée
Large — Boutons très visibles pour les mettre en avant

Configuration des boutons

{
  "primaryButton": {
    "backgroundColor": "#4F46E5",
    "textColor": "#FFFFFF",
    "borderRadius": "8px",
    "fontSize": "16px",
    "padding": "12px 24px",
    "hoverEffect": "darken"
  },
  "secondaryButton": {
    "backgroundColor": "transparent",
    "textColor": "#4F46E5",
    "border": "1px solid #4F46E5",
    "borderRadius": "8px"
  }
}

CSS personnalisé

Pour une personnalisation avancée, ajoutez du CSS qui s’applique à toutes les extensions CheckoutOS :

Exemple de CSS personnalisé

/* Target upsell offer cards */
.checkoutos-upsell-card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #E5E7EB;
}

/* Customize the accept button */
.checkoutos-accept-btn {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Style the countdown timer */
.checkoutos-timer {
  background: linear-gradient(90deg, #EF4444, #DC2626);
  color: white;
  padding: 4px 12px;
  border-radius: 999px;
}

Spécificité CSS

Le CSS personnalisé a une spécificité inférieure aux styles du paiement Shopify. Utilisez !important avec parcimonie et testez soigneusement sur différents appareils.

Prévisualisation et tests

Prévisualisez toujours les changements d’identité visuelle avant de publier :

Live Preview — Voir les changements en temps réel pendant la modification
Device Preview — Tester les vues ordinateur, tablette et mobile
Test Mode — Activer le mode test pour voir les changements sur de vraies commandes sans affecter les clients

Effectuer vos modifications

Prévisualiser sur tous les appareils

Activer le mode test

Publier les changements

Étapes suivantes

Créer votre première vente incitative

Mettez votre expérience de marque au service d’une vente incitative après achat

Extensions du paiement

Ajoutez des badges de confiance et des barres de progression à votre identité visuelle