Utilisation de l’éditeur de l’image de marque dans Checkout Blocks

Vous pouvez utiliser l’éditeur de l’image de marque de Checkout Blocks, alimenté par l’API Checkout Branding, pour personnaliser l’esthétique de vos pages de paiement et de comptes sans devoir modifier le moindre code.

Vous pouvez utiliser l’éditeur de l’image de marque pour modifier les couleurs et les éléments de la page de paiement pour n’importe quelle configuration de paiement. Les modifications que vous apportez à la conception de votre page de paiement à l’aide de l’éditeur d’image de marque s’appliquent à toutes les pages de votre paiement, y compris la page de remerciement, la page de statut de commande et les pages relatives aux nouveaux comptes clients.

Pour lancer l’éditeur de l’image de marque dans votre interface administrateur Shopify, cliquez sur Applications > Checkout Blocks, puis sur Éditeur de l’image de marque.

Sur cette page

Personnaliser les couleurs de la page de paiement

Dans la section Couleurs, vous pouvez personnaliser les couleurs de base de votre page de paiement. Vous pouvez également personnaliser jusqu’à 4 jeux de couleurs qui s’appliquent à des sections individuelles lorsque vous souhaitez apporter des modifications plus granulaires à votre conception. Vous pouvez modifier les types de couleurs, y compris les couleurs d’accentuation (pour les éléments interactifs, tels que les liens) et les couleurs de marque (utilisées pour des éléments tels que les boutons primaires et secondaires).

Étapes :

Customize global colors

Dans votre interface administrateur Shopify, cliquez sur Applications > Checkout Blocks.
Cliquez sur Éditeur de l’image de marque.
Dans la section Couleurs, cliquez sur Couleurs globales.
Pour remplacer une couleur de page de paiement existante, dans la section Couleurs globales, cliquez sur l’icône ⊕, puis sélectionnez la couleur souhaitée en effectuant l’une des actions suivantes :
- Utilisez le sélecteur de couleurs pour sélectionner la couleur.
- Saisissez le code couleur HEX dans le champ disponible.
Cliquez sur Enregistrer.

Customize color schemes

Dans votre interface administrateur Shopify, cliquez sur Applications > Checkout Blocks.
Cliquez sur Éditeur de l’image de marque.
Dans la section Couleurs, cliquez sur Schéma 1, Schéma 2, Schéma 3 ou Schéma 4 pour personnaliser un schéma de couleurs spécifique.
Sélectionnez l’un des composants suivants que vous souhaitez personnaliser :
- Couleurs principales
- Contrôles des formulaires
- Bouton primaire
- Bouton secondaire
Dans la section Base, cliquez sur l’icône ⊕ à côté du type de couleur que vous souhaitez personnaliser, puis sélectionnez la couleur souhaitée en effectuant l’une des actions suivantes :
- Utilisez le sélecteur de couleurs pour sélectionner la couleur.
- Saisissez le code couleur HEX dans le champ disponible.
Facultatif : si vous modifiez le modèle des contrôles de formulaire, du bouton principal ou du bouton secondaire, vous pouvez également personnaliser les couleurs du comportement d’interaction Sur sélection ou Au survol de la souris. Cliquez sur l’icône ⊕ à côté du type de couleur que vous souhaitez personnaliser, puis sélectionnez la couleur souhaitée en effectuant l’une des actions suivantes :
- Utilisez le sélecteur de couleurs pour sélectionner la couleur.
- Saisissez le code couleur HEX dans le champ disponible.
Cliquez sur Enregistrer.

Éléments de paiement personnalisés

Dans la section Personnalisations de l’éditeur de l’image de marque, vous pouvez modifier les éléments suivants de votre page de paiement :

Favicon : choisissez l’icône qui s’affiche pour les clients dans l’onglet du navigateur lors du paiement.
Global : ajustez le rayon d’angle de tous les éléments (entrées de formulaire, boutons et cartes).
En-tête et logo : sélectionnez la position de l’en-tête dans la page de paiement, ainsi que l’affichage ou non des fils d’Ariane, d’un lien vers le panier et d’un logo.
Principal : appliquer des modèles de conception à la zone de contenu principale de la page de paiement, y compris les images de fond, la largeur des bordures et les modèles de couleurs.
Résumé de la commande : appliquez des modèles de conception à la barre latérale de la page de paiement contenant le résumé de la commande du/de la client(e), y compris les images de fond, la largeur des bordures et les modèles de couleurs.
Pied de page : sélectionnez la largeur du pied de page de la page de paiement, et indiquez si les politiques de la boutique doivent être affichées.
Typographie : sélectionnez la taille de la police, la famille de polices et le poids de la police, la taille, le crénage et la casse des lettres pour un maximum de 3 niveaux d’en-têtes.
Boutons : sélectionnez le remplissage, les bordures et les styles des boutons principaux et secondaires.
Formulaires : personnalisez les styles des entrées de formulaire de paiement, telles que les cases à cocher, les champs de texte et les options sélectionnées dans une liste.
Vignettes de produits : ajustez les styles de bordure et de rayon du coin pour les images de produits lors du paiement.

Étapes :

Dans votre interface administrateur Shopify, cliquez sur Applications > Checkout Blocks.
Cliquez sur Éditeur de l’image de marque.
Dans la section Personnalisations, cliquez sur l’un des éléments que vous souhaitez personnaliser, tels que l’en-tête et le logo.
En utilisant les options de personnalisation disponibles, adaptez l’élément de paiement à vos préférences.
Cliquez sur Enregistrer.

Changer de configurations de paiement

Lorsque vous ouvrez l’éditeur de l’image de marque, vous modifiez la configuration du paiement actuellement En direct par défaut. Toutefois, vous pouvez modifier la configuration de paiement que vous souhaitez éditer à l’aide de l’éditeur de l’image de marque, ainsi que créer de nouvelles configurations de paiement.

En savoir plus sur la gestion des configurations de paiement en ligne et provisoires.

Étapes :

Dans votre interface administrateur Shopify, cliquez sur Applications > Checkout Blocks.
Cliquez sur Éditeur de l’image de marque.
Cliquez sur le nom de la configuration de paiement actuelle pour ouvrir un menu déroulant contenant une liste de la configuration en cours ainsi que de toutes les configurations provisoires, puis sélectionnez la configuration de paiement que vous souhaitez personnaliser :
- Sélectionnez une configuration existante que vous souhaitez modifier.
- Cliquez sur ⊕ Créer une nouvelle configuration pour être redirigé vers les paramètres de la Page de paiement de votre interface administrateur Shopify.

Aperçu d’une procédure de paiement

Vous pouvez prévisualiser les modifications apportées à l’éditeur de l’image de marque à tout moment en sélectionnant la configuration de paiement que vous souhaitez prévisualiser, puis en cliquant sur Aperçu. L’éditeur de paiement et de comptes se lance dans un onglet séparé avec toutes vos modifications appliquées pour vous permettre de visualiser son affichage sur la page de paiement.

Étapes :

Dans votre interface administrateur Shopify, cliquez sur Applications > Checkout Blocks.
Cliquez sur Éditeur de l’image de marque.
Personnalisez les couleurs de la configuration de la page de paiement ou les éléments de la page de paiement que vous souhaitez ajuster.
Cliquez sur Aperçu.

Exporter et importer des configurations de paiement

Vous pouvez exporter et importer des configurations de paiement à l’aide de fichiers JSON.

Exporter une configuration de paiement :

Dans votre interface administrateur Shopify, cliquez sur Applications > Checkout Blocks.
Cliquez sur Éditeur de l’image de marque.
Sélectionnez la configuration de la page de paiement avec les personnalisations qui lui ont été appliquées à l’aide de l’éditeur de l’image de marque.
Cliquez sur Plus d’actions > Exporter la configuration.

La configuration du paiement est téléchargée sous forme de .json sur votre appareil local.

Importer une configuration de paiement :

Dans votre interface administrateur Shopify, cliquez sur Applications > Checkout Blocks.
Cliquez sur Éditeur de l’image de marque.
Sélectionnez la configuration de la page de paiement à laquelle vous souhaitez appliquer le profil de l’image de marque importée.
Cliquez sur Plus d’actions > Importer la configuration.
Dans la boîte de dialogue Importer l’image de marque de paiement, téléchargez votre fichier JSON d’image de marque :
1. Cliquez sur Ajouter un fichier.
2. Sélectionnez le fichier JSON approprié à partir de votre appareil.
3. Cliquez sur Importer et continuer.
Examinez la configuration de personnalisation préchargée. Modifiez-le si nécessaire.
Cliquez sur Enregistrer.

Réinitialiser le style de paiement par défaut

Lorsque vous modifiez une couleur ou un élément de paiement à l’aide de l’éditeur de l’image de marque, vous pouvez rétablir la valeur par défaut en cliquant sur Réinitialiser à côté de la couleur ou de l’élément que vous avez modifié.

Vous pouvez à tout moment réinitialiser les valeurs par défaut de Shopify pour l’ensemble de la configuration de l’image de marque du paiement. La réinitialisation de la configuration du paiement efface toutes les personnalisations sur toutes les pages de l’éditeur de l’image de marque. Cette action est irréversible.

Étapes :

Dans votre interface administrateur Shopify, cliquez sur Applications > Checkout Blocks.
Cliquez sur Éditeur de l’image de marque.
Sélectionnez la configuration de la page de paiement que vous souhaitez réinitialiser.
Cliquez sur Réinitialiser les paramètres par défaut.
Dans la boîte de dialogue réinitialiser les styles par défaut ?, cliquez sur Continuer.