> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://docs.downpay.app/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Dynamic Checkout Deposit Button

# 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**
    * 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.
| Value in code | Actual price |
| ---- |
| `1000` | $10.00 |
| `5000` | $50.00 |
| `10000` | $100.00 |
| `50000` | $500.00 |
| `100000` | $1,000.00 |
For example, to show a button only when the cart is between $500 and $1,000:
```
{% 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:
| Property | What it controls |
| ---- |
| `background` | Button background color |
| `color` | Button text color |
| `border` | Border color, width, and style |
| `border-radius` | Corner roundness |
| `padding` | Inner spacing |
| `font-size` | Text size |
To match your theme's existing checkout button, inspect your theme's button styles using your browser's developer tools and apply the same values.
## 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