Vue d’ensemble

Cette personnalisation ajoute un détail clair des coûts au-dessus du bouton de checkout, affichant le sous-total, les frais de livraison et le total sur la base d’un tarif de livraison fixe. Elle aide les clients à comprendre leur montant final avant le checkout, ce qui renforce la confiance et réduit l’hésitation. Important : cette méthode ne fonctionne qu’avec des tarifs de livraison fixes. Si votre boutique utilise une livraison dynamique, les résultats peuvent être inexacts.

Si vous êtes sur Upcart V1.0

Étape 1 : ajouter du HTML personnalisé

Allez dans Upcart > Cart Editor > Settings > Custom HTML
Dans le menu déroulant Select HTML Location, choisissez Above checkout button
Collez le code suivant et mettez à jour les variables pour refléter les frais de livraison et le seuil de votre boutique :

<hr>  
  
<div class="cartSummarySection">  
  <div class="cartSummarySubtotal alignLeft">  
    Subtotal:  
    <span class="alignRight subtotalprice">{{UPCART_SUBTOTAL}}</span>  
  </div>  
  
  <div class="cartSummaryShipping alignLeft">  
    Shipping:  
    <span class="alignRight upcartShipping"></span>  
  </div>  
  
  <div class="cartSummaryEndTotal alignLeft">  
    Total:  
    <span class="alignRight upcartEndTotal"></span>  
  </div>  
  
  <div style="clear: both; display: flex;"></div>  
</div>  
  
<script>  
  var shippingThreshold = 15000; // In cents  
  var shippingCostWhenUnderThreshold = 290; // In cents  
  var textWhenUnderShippingThreshold = "$2.90";  
  var textWhenOverShippingThreshold = "FREE";  
  var currencySymbolToAddInfrontOfEndPrice = "$";  
  var shouldCurrencySymbolBeOnLeftSide = true;  
  
  window.upcartSubscribeCartLoaded((event) => {  
    var shippingText = window.upcartDocumentOrShadowRoot.querySelector(".upcartShipping");  
    var endTotal = window.upcartDocumentOrShadowRoot.querySelector(".upcartEndTotal");  
  
    if (event.cart.total < shippingThreshold) {  
      shippingText.innerText = textWhenUnderShippingThreshold;  
  
      if (shouldCurrencySymbolBeOnLeftSide) {  
        endTotal.innerText =  
          currencySymbolToAddInfrontOfEndPrice +  
          ((event.cart.total + shippingCostWhenUnderThreshold) / 100).toFixed(2);  
      } else {  
        endTotal.innerText =  
          ((event.cart.total + shippingCostWhenUnderThreshold) / 100).toFixed(2) +  
          currencySymbolToAddInfrontOfEndPrice;  
      }  
  
    } else {  
      shippingText.innerText = textWhenOverShippingThreshold;  
  
      if (shouldCurrencySymbolBeOnLeftSide) {  
        endTotal.innerText =  
          currencySymbolToAddInfrontOfEndPrice +  
          (event.cart.total / 100).toFixed(2);  
      } else {  
        endTotal.innerText =  
          (event.cart.total / 100).toFixed(2) +  
          currencySymbolToAddInfrontOfEndPrice;  
      }  
    }  
  });  
</script>

Note sur l’ancien système : les callbacks window.upcartOnCartLoaded fonctionnent toujours mais sont obsolètes et génèrent des avertissements dans la console. Utilisez upcartSubscribeCartLoaded pour tous les nouveaux scripts.

Étape 2 : ajouter du CSS personnalisé

Allez dans Upcart > Cart Editor > Settings > Custom CSS
Collez le CSS suivant et ajustez background-color ou d’autres styles pour correspondre au pied de page de votre panier :

.upcart-footer {  
  padding-top: 0px !important;  
}  
  
.cartSummarySection {  
  background-color: #f6f4ef !important;  
  padding: 10px 23px;  
}  
  
.cartSummarySubtotal,  
.cartSummaryShipping,  
.cartSummaryEndTotal {  
  color: black;  
  width: 100%;  
  text-align: left;  
  font-weight: normal;  
  font-size: 16px;  
  padding: 0;  
}  
  
#CartPopup hr {  
  margin: 0px !important;  
}  
  
.alignLeft {  
  float: left;  
}  
  
.alignRight {  
  float: right;  
}

Résultat final

Une fois appliqué :

Un détail des coûts apparaît au-dessus du bouton de checkout
Les clients voient le sous-total, les frais de livraison (fixes ou FREE) et le total
Les frais de livraison s’ajustent dynamiquement en fonction de votre seuil

Cela augmente la transparence des coûts, renforce la confiance et peut réduire l’abandon au checkout.

Si vous êtes sur Upcart V2.0

Étape 1 : accédez au module de récapitulatif du panier

Activez d’abord les modèles personnalisés : dans Upcart > Cart Editor > Settings > Cart settings, dépliez Advanced Settings et cochez Access custom templates. Cette option est désactivée par défaut, et tant qu’elle n’est pas activée, l’onglet Cart summary n’affiche qu’un message « Custom templates aren’t enabled » sans éditeur.
Allez dans Upcart > Cart Editor > Cart summary > Custom template

Collez le code suivant :

Le code personnalisé pour la section se trouve de la ligne 52 à la ligne 73

<div>  
  <div className="upcart-internal-cart-summary upcart-public-cart-summary">  
    <div className="upcart-internal-cart-summary__discount-codes upcart-public-cart-summary__discount-codes">  
      <span className="upcart-internal-cart-summary__discount-label upcart-public-cart-summary__discount-label">  
        {props.totalSavingsText}  
      </span>  
  
      <div className="upcart-internal-cart-summary__slide-codes upcart-public-cart-summary__slide-codes">  
        {props.discountApplications.map((discountApplication) => (  
          <span  
            key={discountApplication.key}  
            className="upcart-internal-component-tag upcart-public-component-tag"  
          >  
            <span className="upcart-internal-component-tag__icon upcart-public-component-tag__icon">  
              <svg  
                xmlns="http://www.w3.org/2000/svg"  
                viewBox="0 0 20 20"  
                focusable="false"  
              >  
                <title>Discount tag icon</title>  
                <path  
                  fillRule="evenodd"  
                  d="M8.575 4.649a3.75 3.75 0 0 1 2.7-1.149h1.975a3.25 3.25 0 0 1 3.25 3.25v2.187a3.25 3.25 0 0 1-.996 2.34l-4.747 4.572a2.5 2.5 0 0 1-3.502-.033l-2.898-2.898a2.75 2.75 0 0 1-.036-3.852l4.254-4.417Zm4.425 3.351a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"  
                />  
              </svg>  
            </span>  
  
            <span className="upcart-internal-component-tag__text upcart-public-component-tag__text">  
              {discountApplication.title}  
            </span>  
  
            {discountApplication.type === "discount_code" && (  
              <button  
                type="button"  
                className="upcart-internal-component-tag__remove-button upcart-public-component-tag__remove-button"  
                onClick={props.handleRemoveDiscount}  
                aria-label="Remove tag"  
              >  
                {props.isRemovingDiscount ? (  
                  <div className="upcart-internal-component-loader upcart-public-component-loader" />  
                ) : (  
                  <svg  
                    xmlns="http://www.w3.org/2000/svg"  
                    viewBox="0 0 20 20"  
                  >  
                    <path d="M12.72 13.78a.75.75 0 1 0 1.06-1.06l-2.72-2.72 2.72-2.72a.75.75 0 0 0-1.06-1.06l-2.72 2.72-2.72-2.72a.75.75 0 0 0-1.06 1.06l2.72 2.72-2.72 2.72a.75.75 0 1 0 1.06 1.06l2.72-2.72 2.72 2.72Z" />  
                  </svg>  
                )}  
              </button>  
            )}  
          </span>  
        ))}  
      </div>  
    </div>  
  
    <div>  
      {props.showCartTotalDiscount && (  
        <span  
          className="upcart-internal-cart-summary__total-discount upcart-public-cart-summary__total-discount"  
          dangerouslySetInnerHTML={{  
            __html: props.formattedCartTotalDiscount,  
          }}  
        />  
      )}  
    </div>  
  </div>  
  
  {/* Custom code for summary section */}  
  <hr />  
  
  <div className="upcart-custom-cart-summary__container">  
    <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__subtotal">  
      Subtotal:  
      <span className="upcart-custom-cart-summary__subtotal-value">  
        ${(props.totalAfterAllDiscounts / 100).toFixed(2)}  
      </span>  
    </div>  
  
    <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__shipping">  
      Shipping:  
      <span className="upcart-custom-cart-summary__shipping-value">  
        $2.99  
      </span>  
    </div>  
  
    <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__cart-total">  
      Total:  
      <span className="upcart-custom-cart-summary__cart-total-value">  
        {/* totalAfterAllDiscounts excludes shipping — add the same 299 cents shown above. */}  
        ${((props.totalAfterAllDiscounts + 299) / 100).toFixed(2)}  
      </span>  
    </div>  
  </div>  
</div>

b. La partie pertinente est cette section des lignes 52 à 73 ; utilisez cette documentation pour décider quelle valeur vous prévoyez d’afficher à l’écran

  <hr />  
  
  <div className="upcart-custom-cart-summary__container">  
    <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__subtotal">  
      Subtotal:  
      <span className="upcart-custom-cart-summary__subtotal-value">  
        ${(props.totalAfterAllDiscounts / 100).toFixed(2)}  
      </span>  
    </div>  
  
    <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__shipping">  
      Shipping:  
      <span className="upcart-custom-cart-summary__shipping-value">  
        $2.99  
      </span>  
    </div>  
  
    <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__cart-total">  
      Total:  
      <span className="upcart-custom-cart-summary__cart-total-value">  
        {/* totalAfterAllDiscounts excludes shipping — add the same 299 cents shown above. */}  
        ${((props.totalAfterAllDiscounts + 299) / 100).toFixed(2)}  
      </span>  
    </div>  
  </div>

c. Allez dans Upcart > Cart Editor > Settings > Custom CSS, ajoutez ceci :

.upcart-custom-cart-summary__row {  
  display: flex;  
  flex-direction: row;  
  justify-content: space-between;  
}

Besoin d’aide ?

Si vous souhaitez adapter cette personnalisation pour plusieurs seuils de livraison ou une logique avancée, nous vous recommandons de travailler avec un Shopify Expert. L’équipe de support d’Upcart ne fournit pas d’assistance pour l’implémentation ou le débogage de code personnalisé.

Getting Started

Cart Modules

Cart Settings

Sticky Cart Button

Multicart

Customizations

Analytics

Integrations & Compatibility

Billing & Account

Troubleshooting

Ajouter une ligne de total final au-dessus du bouton de checkout

Vue d’ensemble

Si vous êtes sur Upcart V1.0

Étape 1 : ajouter du HTML personnalisé

Étape 2 : ajouter du CSS personnalisé

Résultat final

Si vous êtes sur Upcart V2.0

Étape 1 : accédez au module de récapitulatif du panier

Besoin d’aide ?

​Vue d’ensemble

​Si vous êtes sur Upcart V1.0

​Étape 1 : ajouter du HTML personnalisé

​Étape 2 : ajouter du CSS personnalisé

​Résultat final

​Si vous êtes sur Upcart V2.0

​Étape 1 : accédez au module de récapitulatif du panier

​Besoin d’aide ?

Vue d’ensemble

Si vous êtes sur Upcart V1.0

Étape 1 : ajouter du HTML personnalisé

Étape 2 : ajouter du CSS personnalisé

Résultat final

Si vous êtes sur Upcart V2.0

Étape 1 : accédez au module de récapitulatif du panier

Besoin d’aide ?