Checkout Checkout (Braintree) Checkout (Stripe)

Cart Display

Coupon Field

Remove Coupon

Subtotal Field

Subtotal w/ discounts

Total Line Item Value

Total Compare Value

Total Savings

Total Savings %

Total

Discount

Primary Variant Selectors

          
          
        
          
            .checkout-selected-variant {
              background-color: yellow;
            }
In this example, the button tracking stock is disabled because there is no inventory.

Current Variant Target

          
          
        
          
            .checkout-variant-target.checkout-selected-variant {
              color: green;
              background-color: #fff;
            }
small widgets checkout-variant-target 39507333447866
medium widgets checkout-variant-target 39507333480634
large widgets checkout-variant-target 39507333513402
subscription widgets checkout-variant-target 39518512808122
subscription-later widgets checkout-variant-target 39983260598458
Bundle Widget 40194513993914

Timers

Giving a checkout-timer a data-timer-persistence-id will cause the timer to persist over page loads and across pages.

Next URL Button for upsells

Product Information

Actual Price

Actual Price per Unit (5/per)

Compare Price

Compare Price per Unit (5/per)

Compare Savings

Compare Savings per unit (5)

Compare Savings %

Product Title

Variant Title

Full Title

Variant Image

Variant Quantity Selector

Variant 39507333447866

Variant Qty Button 39507333513402

Add On Buttons

          
          
        
          
            .checkout-selected-addon {
              background-color: yellow;
            }

Remove Variant

          
          
        
          
            .checkout-selected-addon {
              background-color: yellow;
            }

Split Testing

          
          
        
          
            .checkout-split-test {
              display: none;
            }
Hello1
Hello2
Split choices are preserved across reloads and page changes.

Track Stock

          
          
        
          
            .checkout-track-stock.checkout-in-stock {
              display: inline-block;
              color: green;
            }

            .checkout-track-stock.checkout-out-of-stock {
              display: inline-block;
              color: red;
            }
Out Of Stock
In Stock