Dynamic Deposit Buttons Based on Cart Total

Display different deposit options on the cart page depending on the customer's cart value. For example, show a 25% deposit button for smaller orders and a 75% deposit button for larger ones.

Overview

By adding a small code snippet to your theme, you can conditionally render deposit checkout buttons that apply different selling plans based on cart total thresholds. This gives you full control over which deposit option is offered at each price range.
What you'll need:

• Access to your Shopify theme code
• One or more selling plans created in the Downpay app
• The Selling Plan IDs for each plan

Estimated setup time: 10–15 minutes

Step 1: Create a Draft Theme

Never edit your live theme directly. Always work on a copy first.

1. In your Shopify admin, go to Online Store → Themes
2. Click the three-dot menu (⋯) on your current live theme
3. Select Duplicate
4. A draft copy of your theme will appear in the theme list

Step 2: Open the Cart Template

1. On your newly created draft theme, click Actions → Edit code
2. In the left sidebar under Sections, find and open main-cart.liquid
3. • Some themes may use a different file name such as cart-template.liquid or main-cart-items.liquid. Look for the file that renders your cart page content.

Step 3: Add the Code Snippet

Paste the following code into your desired location within the cart template. A good placement is just above or below the existing checkout button.

<style>
  .downpay-cart-deposit-button { display: none; }

  .storefront-checkout-button {
    background: #fff;
    color: #000;
    border: 1px solid #25142c;
    border-radius: 5px;
    padding: 13px 23px;
    font: inherit;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: box-shadow 0.2s, transform 0.1s;
  }
</style>

{% if cart.total_price >= 1000 and cart.total_price <= 5000 %}
  <div class="downpay-custom-url-container">
    <button type="button" class="storefront-checkout-button" onclick="window.downpay.applySellingPlansAndCheckout('YOUR_1ST_SELLING_PLAN')">
      <span>Checkout with 25% deposit</span>
    </button>
  </div>
{% elsif cart.total_price >= 5000 and cart.total_price <= 10000 %}
  <div class="downpay-custom-url-container">
    <button type="button" class="storefront-checkout-button" onclick="window.downpay.applySellingPlansAndCheckout('YOUR_2ND_SELLING_PLAN')">
      <span>Checkout with 50% deposit</span>
    </button>
  </div>
{% elsif cart.total_price >= 10000 %}
  <div class="downpay-custom-url-container">
    <button type="button" class="storefront-checkout-button" onclick="window.downpay.applySellingPlansAndCheckout('YOUR_3RD_SELLING_PLAN')">
      <span>Checkout with 75% deposit</span>
    </button>
  </div>
{% endif %}

Step 4: Customize the Price Ranges

Shopify represents cart prices in cents. Adjust the values in the if / elsif conditions to match your desired thresholds.

{% if cart.total_price >= 50000 and cart.total_price <= 100000 %}

You can add as many elsif blocks as needed to cover additional price ranges.

Step 5: Add Your Selling Plan IDs

1. Open the Downpay app in your Shopify admin
2. Go to the selling plan you want to use
3. The Selling Plan ID is displayed at the top of the page (it is a numeric value)
4. In the code snippet, replace YOUR_1ST_SELLING_PLAN, YOUR_2ND_SELLING_PLAN, etc. with the corresponding IDs

Example:

onclick="window.downpay.applySellingPlansAndCheckout('692673544556')"

Step 6: Enable the Downpay App Embed

This step is required for the deposit buttons to function. If you do not see the option, please contact us.

1. Go back to Online Store → Themes
2. On your draft theme, click Customize
3. In the theme editor, open App embeds (the puzzle piece icon in the left sidebar)
4. Find Downpay Cart Deposit Button and toggle it on
5. Click Save

Step 7: Preview and Publish

1. Preview your draft theme by clicking Preview in the theme list
2. Add products to the cart at different price points to verify each button appears at the correct threshold
3. Confirm that clicking a deposit button takes you to checkout with the correct selling plan applied
4. Once everything looks good, go to Online Store → Themes and click Publish on your draft theme

Styling the Button

The included CSS provides a clean default style. You can customize the appearance by modifying the .storefront-checkout-button class in the <style> block:

Troubleshooting

Button doesn't appear on the cart page

• Verify that the cart total falls within one of your defined price ranges
• Confirm the code was added to the correct template file
• Make sure you saved the file after pasting the code

Button appears but nothing happens on click

• Check that the Downpay Cart Deposit Button app embed is enabled (Step 6)
• Verify that the Selling Plan IDs are correct and wrapped in quotes

Button shows for the wrong price range

• Remember that prices are in cents — double-check your threshold values
• Ensure your if / elsif conditions don't have gaps or overlaps

Updated on: 25/06/2026