Skip to main content
Le module Design vous permet de personnaliser l’apparence de votre panier, y compris la mise en page, les couleurs de marque et les styles de boutons.

​
Général

​
Hériter des polices du thème

Ce paramètre permet à Upcart d’utiliser les polices définies dans les paramètres de votre thème Shopify. Pour voir vos choix de polices actuels, ouvrez l’éditeur de thème Shopify et accédez à la section Typography.

​
🚧 Aperçu du panier 🚧

Les polices héritées de votre thème n’apparaîtront pas dans la fenêtre d’aperçu d’Upcart, mais elles s’afficheront correctement sur votre boutique en ligne.

​
Afficher les prix barrés

Activez ce paramètre pour afficher un prix barré (également connu sous le nom de Compare At Price) à côté de chaque article dans le panier. Cela reflète les prix remisés, comme sur vos pages produit.

​
Couleurs

​
Couleur d’arrière-plan

Définit la couleur d’arrière-plan principale du panier, à l’exclusion du pied de page et des cartes d’upsell.

​
Couleur d’accent du panier

Contrôle la couleur d’arrière-plan du pied de page du panier et des cartes d’articles d’upsell.

​
Couleur du texte du panier

Définit la couleur de tout le texte du panier, à l’exception du texte des boutons et du texte d’économies, qui sont contrôlés séparément.

​
Couleur du texte d’économies

Définit la couleur du texte d’économies affiché sous le prix du produit.

​
🚧 Aperçu du panier 🚧

L’éditeur d’aperçu peut ne pas refléter précisément le style final. Le thème de votre boutique peut inclure du CSS personnalisé qui affecte la taille ou la couleur du texte. Vérifiez toujours les modifications sur votre boutique en ligne.

​
Paramètres des boutons

Upcart propose des options avancées de style des boutons, y compris une personnalisation spécifique pour le bouton de paiement. Cela inclut des méthodes d’ajustement CSS et l’intégration des outils de personnalisation de marque de Shopify.

​
Rayon des coins

Ajuste l’arrondi des coins des boutons. Par exemple :
  • 0 pixel crée des boutons carrés
  • Des valeurs plus élevées créent des boutons plus arrondis ou en forme de pilule. Par exemple, une valeur de rayon de 0 crée des coins nets et carrés, tandis qu’un rayon augmenté à 9999px donne des boutons en forme de pilule.

​
Couleur des boutons

Définit la couleur d’arrière-plan de tous les boutons du panier, y compris :
  • Le bouton de paiement
  • Le bouton « Add to Cart » d’upsell
  • Le bouton « Apply » de remise
  • Le bouton de passage à l’abonnement. Vous pouvez personnaliser la couleur de ces boutons via le Cart Editor. Pour des personnalisations plus avancées comme les modifications CSS, reportez-vous à la section de personnalisation avancée.

​
Couleur du texte des boutons

Spécifie la couleur du texte utilisée dans tous les boutons du panier.

​
Couleur du texte des boutons au survol

Contrôle la couleur du texte des boutons lorsqu’un client le survole avec sa souris. Par exemple, si elle est définie sur vert, le texte deviendra vert au survol.

​
Personnalisation CSS avancée des boutons de paiement

Pour des changements de design importants, vous pouvez utiliser du code Custom CSS pour modifier le bouton de paiement :
  1. Dans le Cart Editor, ouvrez Settings et sélectionnez l’onglet Custom CSS.
  2. Utilisez le sélecteur CSS pertinent, comme .checkout. Exemples d’extraits CSS : pour créer un bouton en forme de pilule :
    Pour ajouter une bordure noire :
    Remplacez .checkout par la classe CSS réelle de votre bouton. Les styles supplémentaires incluent les effets au survol, le remplissage, les couleurs de texte ou les polices.

​
Intégrer la personnalisation de marque de Shopify pour les boutons

Si vous utilisez Shopify, vous pouvez mettre à jour le design de votre bouton de paiement via l’interface d’administration Shopify :
  1. Connectez-vous à votre interface d’administration Shopify.
  2. Accédez à Settings > Checkout > Customize.
  3. Utilisez les options de personnalisation de marque pour modifier la police, l’arrondi ou la couleur afin d’obtenir un design harmonieux.