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. Article du panier montrant un prix d'origine barré à côté du prix remisé et des économies

​
Activer la ligne de sous-total

Ajoute une ligne de sous-total au panier. L’activer révèle également un champ Subtotal text color sous Colors, afin que le sous-total puisse être stylisé séparément du reste du texte du panier. Lorsque le paramètre est désactivé, ce champ de couleur est masqué.

​
Largeur du panier

Contrôle la largeur du tiroir, définie séparément pour chaque affichage :
  • Desktop - Default ou Wide
  • Mobile - Full (bord à bord) ou Nearly full (un petit espace au bord)

​
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. Paramètres Colors d'Upcart avec la couleur d'accent du panier appliquée à des cartes d'upsell roses

​
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. Article du panier avec le texte du montant des économies mis en évidence en magenta

​
Couleur du texte du sous-total

Définit la couleur de la ligne de sous-total. Ce champ n’apparaît que lorsque Enable subtotal line est activé sous General.

​
🚧 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, de 0 px à 40 px. 0 donne des coins nets et carrés ; 40 est la valeur d’arrondi maximale du curseur. La valeur s’applique à la fois au bouton de paiement, au bouton d’upsell, au bouton de remise et au bouton de passage à l’abonnement.
Le curseur s’arrête à 40 px. Pour un bouton entièrement en forme de pilule, vous avez besoin du Custom CSS — voir Personnalisation CSS avancée ci-dessous.
Curseur de rayon des coins réglé sur 16 pixels arrondissant le bouton de paiement

​
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.

​
Afficher le bouton Continuer les achats

Ajoute un bouton Continue shopping au panier, permettant aux clients de fermer le tiroir et de reprendre leur navigation sans utiliser l’icône de fermeture.

​
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.
Aperçu du tiroir de panier Upcart avec un bouton Add d'upsell et un bouton de paiement