Articles on: Advanced Setup

Create a custom pay with deposit button

If you'd like to offer a custom deposit button on another page of your site, you can create a custom button that will add the product to the cart with a deposit.

Overview

By default, Downpay offers a product block to use on the product page when selling products with partial payment. This block only works on the product page and brands may want to also offer a button on the collection or home page for example.

Creating a custom button only supports adding 1 quantity to the cart. Custom theme development may be required to add more functionality such as support for a quantity selector. The Downpay team does not provide this service at this time.

Below are a few guides to help you get started with making a custom deposit button for your product.

Deposit button on the product page

Ensure you have added the products to a Downpay purchase option and saved.

Navigate back into the purchase option and take note of the Selling Plan ID: listed at the bottom left of the page.

Navigate to the Shopify theme editor and choose the theme you wish to work on and click Customize.

Select Products in the top centre dropdown menu and a specific product template you wish to add the button on.

Select the product that is assigned in Downpay using the Change button in the left column beside Preview in order to see the button appear once the code is added.

In the left column, click Add block and select Custom liquid.

Use the code below and change the value= of the selling_plan input to the id of your purchase option. For example, if your ID is 1234567890, the line should read ` <input type="hidden" name="selling_plan" value="1234567890">.

{%- assign downpay_selling_plan_groups = product.selling_plan_groups | where: 'app_id', 'downpay' -%}
{% if downpay_selling_plan_groups.size > 0 %}

{% form 'product', product %}
<button type="submit" class="product-form__submit button button--full-width button--secondary" 
   <span> Pay with 20% deposit </span> 
</button>
 <input type="hidden" name="selling_plan" value="3398503031">
 <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
{% endform %}
{% endif %}

The code assumes certain CSS Classes such as button and product-form__submit. These may differ for your theme or you may wish to add another CSS class to this line to further customize the button.

The button will now appear if the product is assigned to a Downpay purchase option. You may click Save to make this button live on your site.

Jump to top

Featured product section

Follow the instructions in the previous example but add the custom liquid block to your Featured product section on your home page or other page as the image below shows.

html 

{%- assign downpay_selling_plan_groups = product.selling_plan_groups | where: 'app_id', 'downpay' -%}
{% if downpay_selling_plan_groups.size > 0 %}
{% form 'product', section.settings.product %}
<button type="submit" class="product-form__submit button button--full-width button--secondary" 
   <span> Pay with 20% deposit </span> 
</button>
 <input type="hidden" name="selling_plan" value="3522134228">
 <input type="hidden" name="id" value="{{ section.settings.product.variants.first.id }}" />
{% endform %}
{% endif %}

Product grid on Homepage / Product page

If you want to place a custom deposit button in the product grid on Homepage / Product page, you follow these instructions.

First, you should navigate to your Online Store and select Edit Code option from dropdown.

After that, navigate to the assets folder and create a file named custom-deposit-button.css or the name that you wish but make sure to change it in the code where you import it afterwards.

Paste this piece of code in it:

.custom-deposit-button {
  position: relative;
  top: 0;
  color: white;
  padding: 12px 10px;
  cursor: pointer;
  border: none;
  background-color: #0a0a0a;
  font-size: 14px;
  z-index: 9999;
}

.custom-deposit-button:hover {
  background-color: #393939;
}

Then create another file in the snippets folder named custom-deposit-button.liquid and paste the following code:

{{ 'custom-deposit-button.css' | asset_url | stylesheet_tag }}

{%- form 'product', product -%}
  {% assign downpay_plans = product.selling_plan_groups | where: 'app_id', 'downpay' | first %}
  {% assign downpay_plan_first = downpay_plans.selling_plans[0] %}
  <input id="selected-purchase-option" type="hidden" name="selling_plan" value="{{ downpay_plan_first.id }}">
  <input
    type="hidden"
    name="id"
    value="{{ product.selected_or_first_available_variant.id }}"
    {% if product.selected_or_first_available_variant.available == false
      or quantity_rule_soldout
      or product.selected_or_first_available_variant == null
    %}
      disabled
    {% endif %}
    class="product-variant-id"
  >
  <button
    id="ProductSubmitButton-{{ section_id }}"
    type="submit"
    name="add"
    class="custom-deposit-button"
    {% if product.selected_or_first_available_variant.available == false
      or quantity_rule_soldout
      or product.selected_or_first_available_variant == null
    %}
      disabled
    {% endif %}
  >
    <span> Custom deposit button </span>
  </button>
{% endform %}

Make sure to change the button name to match your deposit option since this way it will show as "Custom deposit button".

After you save everything, navigate to the snippets/card-product-.liquid and go to the line 572 like on the picture:

Paste the following code like in the picture :

<div style="position:relative; height:100%">
        {%- render 'custom-deposit-button', product: card_product -%}
   </div>

If everything is done well you should see this button on your products grid that will take you directly to the cart page upon adding a product with deposit.

Hiding Downpay purchase options block when using deposit buttons

If you decided to use Downpay deposit buttons then it would be wise to hide the Downpay purchase options block since it is not necessary in this scenario.

You can simply go to theme editor by pressing Customize button for your theme and remove the block.

The Downpay deposit button will take customers straight to the cart with deposit added to the item so that is why we do not need the Downpay purchase options block.
This way you won't confuse your customer by having 2 instances that have the same flow.

Deposit button for other pages

If you'd like to offer the deposit button on other pages or sections, you may need to use code above and adjust the form being applied or use the edit code functionality for your theme and add the code to specific liquid files depending on where you'd like to show this button.

Each theme is different and if you are not comfortable with adjusting files, we recommend working with a Shopify expert or agency to add this to your theme.

Jump to top

Updated on: 25/02/2025

Was this article helpful?

Thank you!