Überblick

Diese Anpassung fügt eine übersichtliche Kostenaufstellung über dem Checkout-Button hinzu, die Zwischensumme, Versand und Gesamtsumme auf Basis eines festen Versandtarifs anzeigt. Sie hilft Kunden, ihren Endbetrag vor dem Checkout zu verstehen, was das Vertrauen stärkt und Zögern reduziert. Wichtig: Diese Methode funktioniert nur mit festen Versandtarifen. Wenn dein Store dynamischen Versand verwendet, können die Ergebnisse ungenau sein.

Wenn du Upcart V1.0 verwendest

Schritt 1: Benutzerdefiniertes HTML hinzufügen

Gehe zu Upcart > Cart Editor > Settings > Custom HTML
Wähle im Dropdown Select HTML Location die Option Above checkout button
Füge den folgenden Code ein und aktualisiere die Variablen entsprechend den Versandkosten und dem Schwellenwert deines Stores:

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

Legacy-Hinweis: window.upcartOnCartLoaded-Callbacks funktionieren weiterhin, sind aber veraltet und geben Konsolenwarnungen aus. Verwende upcartSubscribeCartLoaded für alle neuen Skripte.

Schritt 2: Benutzerdefiniertes CSS hinzufügen

Gehe zu Upcart > Cart Editor > Settings > Custom CSS
Füge das folgende CSS ein und passe background-color oder andere Styles an deinen Warenkorb-Footer an:

.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;  
}

Endergebnis

Nach der Anwendung:

Eine Kostenaufstellung erscheint über dem Checkout-Button
Kunden sehen Zwischensumme, Versand (fest oder FREE) und Gesamtsumme
Die Versandkosten passen sich dynamisch an deinen Schwellenwert an

Das erhöht die Kostentransparenz, stärkt das Vertrauen und kann Checkout-Abbrüche reduzieren.

Wenn du Upcart V2.0 verwendest

Schritt 1: Gehe zum Cart-Summary-Modul

Aktiviere zuerst benutzerdefinierte Templates: Klappe in Upcart > Cart Editor > Settings > Cart settings die Advanced Settings auf und aktiviere Access custom templates. Die Option ist standardmäßig deaktiviert, und solange sie aus ist, zeigt der Cart-Summary-Tab nur die Meldung „Custom templates aren’t enabled“ ohne Editor an.
Gehe zu Upcart > Cart Editor > Cart summary > Custom template

Füge den folgenden Code ein:

Der benutzerdefinierte Code für den Abschnitt befindet sich in den Zeilen 52 bis 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. Der relevante Teil ist dieser Abschnitt in den Zeilen 52–73. Verwende dieses Dokument, um zu entscheiden, welchen Wert du auf dem Bildschirm anzeigen möchtest

  <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. Gehe zu Upcart > Cart Editor > Settings > Custom CSS und füge dies hinzu:

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

Brauchst du Hilfe?

Wenn du dies für mehrere Versand-Schwellenwerte oder erweiterte Logik anpassen möchtest, empfehlen wir die Zusammenarbeit mit einem Shopify-Experten. Das Support-Team von Upcart bietet keine Unterstützung bei der Implementierung oder Fehlerbehebung von benutzerdefiniertem Code.

Erste Schritte

Warenkorb-Module

Warenkorb-Einstellungen

Sticky-Warenkorb-Button

Multicart

Anpassungen

Analytics

Integrationen & Kompatibilität

Abrechnung & Konto

Fehlerbehebung

Eine Endsummen-Zeile über dem Checkout-Button hinzufügen

Überblick

Wenn du Upcart V1.0 verwendest

Schritt 1: Benutzerdefiniertes HTML hinzufügen

Schritt 2: Benutzerdefiniertes CSS hinzufügen

Endergebnis

Wenn du Upcart V2.0 verwendest

Schritt 1: Gehe zum Cart-Summary-Modul

Brauchst du Hilfe?

​Überblick

​Wenn du Upcart V1.0 verwendest

​Schritt 1: Benutzerdefiniertes HTML hinzufügen

​Schritt 2: Benutzerdefiniertes CSS hinzufügen

​Endergebnis

​Wenn du Upcart V2.0 verwendest

​Schritt 1: Gehe zum Cart-Summary-Modul

​Brauchst du Hilfe?

Überblick

Wenn du Upcart V1.0 verwendest

Schritt 1: Benutzerdefiniertes HTML hinzufügen

Schritt 2: Benutzerdefiniertes CSS hinzufügen

Endergebnis

Wenn du Upcart V2.0 verwendest

Schritt 1: Gehe zum Cart-Summary-Modul

Brauchst du Hilfe?