Add Downpay to your theme
Create a Downpay purchase option, and enable a supported payment gateway before adding Downpay to your theme.
You will add Downpay to your theme by updating two pages:
Product Page
Cart Page
The following content blocks will be shown once Downpay is installed.
Product Page
Quick Install
Manual install
Cart page
Install
Cart drawer
Customization
Modify placement of product or cart embeds
Scheduled or draft products will not display Downpay until they become active.
Products will show the following once Downpay is installed, if they have a purchase option :
Click Enable product block or Enable product embed the in-app onboarding guide.
This will open your theme settings, and automatically add Downpay.
Click Online Store from your left navigation bar in the Shopify Admin.
Click Customize on your theme.
Navigate to the Product page template you are using from the dropdown menu at the top of the editor.
In the left navigation in the "Template > Product information" section, click Add block and select Downpay App.
Drag the Downpay block higher or lower depending on where you would like it to appear.
Click Save at the top right to finish setup.
Click Online Store from your left navigation bar in Shopify Admin.
Click Customize on the theme you wish to add Downpay blocks to.
Navigate to the Product page template you are using from the dropdown menu at the top center area of the editor.
Navigate to the embed section of the editor on the left hand side. and toggle the Downpay product embed on
7. Click Save at the top right to finish setup.
Still not showing? You may need to specify the placement of the embed.
Jump to top
Downpay's cart embed displays the subtotals that will be paid at checkout and the remaining balance due.
Using a cart drawer? Try this guide.
Click Online Store from your left navigation bar in Shopify Admin.
Click Customize on the theme you wish to add Downpay to.
Navigate to the Cart page template you are using from the dropdown menu at the top center area of the editor.
Navigate to the embed section of the editor on the left hand side. and toggle the Downpay cart embed on.
Click Save at the top right.
The totals will display only if a deposit product is in your cart.
Still not showing? You may need to specify the placement of the embed.
Jump to top
If you are using a cart drawer, this guide will help you add a subtotal line on your cart drawer liquid page for the Balance due today.
Check out our video guide or written walkthrough below.
Click Online Store from your left navigation bar in Shopify Admin.
Click the ... beside your theme and open two tabs in your browser: a Preview of your theme, and the Edit code page. We recommend making a duplicate of your theme and working on the unpublished duplicate for easier testing without risking your main live template.
In the Preview tab of your theme: Add a Downpay deposit product to your cart and open the cart drawer. We will use this as a way to test our code.
In the Edit code tab: Search for drawer to find the cart-drawer.liquid or similar file which contains the code for the drawer. This can usually be found in snippets on 2.0 themes.
Scroll through or search the file for the subtotal line and then duplicate of the elements that control the title of the line and the price. Click Save. We will be making changes to them, but for now we want to make sure a duplicate appears above our current subtotal line.
We will be incapsulating our duplicate subtotal line in an if statement and adjusting the copy and the subtotal that is displayed.
• The title of your subtotal line will be Due today or similar. You can also use the guide below to add an entry to your Locale to ensure the title is translated.
• The deposit subtotal will be {{ cart.checkout_charge_amount | money }}
Review the example below. Keep in mind that your classes may look different based on your theme's style.
Click save and refresh your preview to display the Due today total.
This guide will teach you how to add a new entry to your locale file for the Due today title instead of having it hardcoded.
Click Online Store from your left navigation bar in Shopify Admin.
Click ... beside the theme you wish to adjust and click Edit code.
Scroll down to the Locales folder of your theme and select your english locale. An example of the name would be en.default.json.
Scroll down to the Cart section of the file and add a new entry for the checkout_charge_amount in this format: "checkout_charge_amount": "Due today",
In your cart drawer where you have placed the due today subtotal, adjust the hard code "due today" to {{ 'sections.cart.checkout_charge_amount' | t }}. The location may be different depending on where you've placed your entry.
Jump to top
Edit the appearance, placement, and content of the Downpay content by adjusting the theme settings.
This is required to get Downpay embeds to appear for some custom or less popular themes.
The HTML element to insert after setting will allow you to move the cart subtotals content block around the cart page.
Modify content block placement by specifying a nearby unique element id or class. The format of element ids is #id, and the format for classes are .class
Jump to top
You will add Downpay to your theme by updating two pages:
Product Page
Cart Page
The following content blocks will be shown once Downpay is installed.
On this page:
Product Page
Quick Install
Manual install
Cart page
Install
Cart drawer
Customization
Modify placement of product or cart embeds
Product Page
Scheduled or draft products will not display Downpay until they become active.
Products will show the following once Downpay is installed, if they have a purchase option :
Quick Install
Click Enable product block or Enable product embed the in-app onboarding guide.
This will open your theme settings, and automatically add Downpay.
Manual Install
If you are using a 2.0 theme:
Click Online Store from your left navigation bar in the Shopify Admin.
Click Customize on your theme.
Navigate to the Product page template you are using from the dropdown menu at the top of the editor.
In the left navigation in the "Template > Product information" section, click Add block and select Downpay App.
Drag the Downpay block higher or lower depending on where you would like it to appear.
Click Save at the top right to finish setup.
If you are using a vintage theme:
Click Online Store from your left navigation bar in Shopify Admin.
Click Customize on the theme you wish to add Downpay blocks to.
Navigate to the Product page template you are using from the dropdown menu at the top center area of the editor.
Navigate to the embed section of the editor on the left hand side. and toggle the Downpay product embed on
7. Click Save at the top right to finish setup.
Still not showing? You may need to specify the placement of the embed.
Jump to top
Cart Page
Downpay's cart embed displays the subtotals that will be paid at checkout and the remaining balance due.
Install
Using a cart drawer? Try this guide.
Click Online Store from your left navigation bar in Shopify Admin.
Click Customize on the theme you wish to add Downpay to.
Navigate to the Cart page template you are using from the dropdown menu at the top center area of the editor.
Navigate to the embed section of the editor on the left hand side. and toggle the Downpay cart embed on.
Click Save at the top right.
The totals will display only if a deposit product is in your cart.
Still not showing? You may need to specify the placement of the embed.
Jump to top
Cart drawer
If you are using a cart drawer, this guide will help you add a subtotal line on your cart drawer liquid page for the Balance due today.
Check out our video guide or written walkthrough below.
Click Online Store from your left navigation bar in Shopify Admin.
Click the ... beside your theme and open two tabs in your browser: a Preview of your theme, and the Edit code page. We recommend making a duplicate of your theme and working on the unpublished duplicate for easier testing without risking your main live template.
In the Preview tab of your theme: Add a Downpay deposit product to your cart and open the cart drawer. We will use this as a way to test our code.
In the Edit code tab: Search for drawer to find the cart-drawer.liquid or similar file which contains the code for the drawer. This can usually be found in snippets on 2.0 themes.
Scroll through or search the file for the subtotal line and then duplicate of the elements that control the title of the line and the price. Click Save. We will be making changes to them, but for now we want to make sure a duplicate appears above our current subtotal line.
We will be incapsulating our duplicate subtotal line in an if statement and adjusting the copy and the subtotal that is displayed.
• The title of your subtotal line will be Due today or similar. You can also use the guide below to add an entry to your Locale to ensure the title is translated.
• The deposit subtotal will be {{ cart.checkout_charge_amount | money }}
Review the example below. Keep in mind that your classes may look different based on your theme's style.
{%- liquid assign items_with_plans = cart.items | where: 'selling_plan_allocation'-%}
{% if items_with_plans.size != 0 %}
<div class="drawer__bottom__meta body-size-3">
<p class="totals__total">Due today</p>
<p class="totals__total-value">{{ cart.checkout_charge_amount | money_with_currency }}</p>
</div>
{% endif %}Click save and refresh your preview to display the Due today total.
Translate due today
This guide will teach you how to add a new entry to your locale file for the Due today title instead of having it hardcoded.
Click Online Store from your left navigation bar in Shopify Admin.
Click ... beside the theme you wish to adjust and click Edit code.
Scroll down to the Locales folder of your theme and select your english locale. An example of the name would be en.default.json.
Scroll down to the Cart section of the file and add a new entry for the checkout_charge_amount in this format: "checkout_charge_amount": "Due today",
In your cart drawer where you have placed the due today subtotal, adjust the hard code "due today" to {{ 'sections.cart.checkout_charge_amount' | t }}. The location may be different depending on where you've placed your entry.
Jump to top
Customization
Edit the appearance, placement, and content of the Downpay content by adjusting the theme settings.
Modify placement of product or cart embeds
This is required to get Downpay embeds to appear for some custom or less popular themes.
The HTML element to insert after setting will allow you to move the cart subtotals content block around the cart page.
Modify content block placement by specifying a nearby unique element id or class. The format of element ids is #id, and the format for classes are .class
Jump to top
Updated on: 17/07/2024
Thank you!