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.

On this page:

Overview
Deposit button on the product page
Deposit button for other pages

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

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: 19/09/2024