This guide will explain how to change the default behaviour of the the quick add button usually found on collection pages to add the deposit option to cart instead of pay in full.

On this page:

Overview
Enabling deposit plan for quick add button

Overview

Many themes on Shopify have a 'quick add' button available on product collection pages. This button allows buyers to one-click add products to the cart. By default, this button is not aware of deposit plans (selling plans) and will add the product to the cart with the full payment option - or fail if the product is set up to only sell as a deposit.

For more details on selling plans and how Downpay uses here, read more in our add to cart troubleshooting guide.

Enabling deposit on quick add button

To ensure the quick add button adds a deposit purchase option to cart, a liquid snippet can be created in a theme so that if there is a selling plan on a product, the selling plan id is added to the quick add form, which will cause the product to be added to the cart using that selling plan:

Steps:

Navigate to the Online Store from the left navigation menu in the Shopify admin.
Beside the theme you wish to adjust, click the ... menu and select Edit code.
Scroll down to the Snippets folder in the left hand menu and select Add a new snippet
Name the snippet downpay-quick-add-product.
Copy the following code into the downpay-quick-add-product.liquid file you have created:

{%- liquid
  assign downpay_selling_plan_groups = product.selling_plan_groups | where: 'app_id', 'downpay'
  assign first_downpay_selling_plan = downpay_selling_plan_groups.first.selling_plans.first
-%}

{% if downpay_selling_plan_groups.size > 0 %}
  <input id="selected-purchase-option" type="hidden" name="selling_plan" value="{{ first_downpay_selling_plan.id }}">
{% endif %}

Insert the following render line into the product form that powers the add to cart button on your product collection page or similar. Make sure to change the called variant to match how the product form is calling products, usually "product".

{% render 'downpay-quick-add-product', product: product %}

Jump to top

Updated on: 15/05/2024