Articles on: Getting Started

Adding Downpay to OS 2.0 themes

Installing Downpay to your 2.0 theme storefront



In order for deposit purchase options to appear in your theme on your products, Shopify Payments or Paypal Express with approved Automatic Payment status must be enabled. Follow the guide here

It helps to also create your first deposit purchase option in Downpay before starting theme set up so that you're able to see the options easily. Review this guide.

On first setup, Downpay will scan your store's published theme to determine if you are running a legacy or 2.0 theme. Downpay will then suggest the correct setup instructions in app.


Downpay in-app onboarding

Downpay in-app onboarding page

Product Page



If you are running a new Online Store 2.0 theme that supports app blocks, you can add Downpay to your store in a the product page using the Shopify theme editor or the in-app onboarding guide's Enable product block.

Downpay product page 2.0 block

Steps



1. Click Online Store from your left navigation bar in Shopify Admin.

2. Click Customize on the theme you wish to add Downpay blocks to.

3. Navigate to the Product page template you are using from the dropdown menu at the top of the editor.

4. To add product options, hover near your add to cart button until you see a +. Click Add block and select the block named Downpay App. You may drag the Downpay block higher or lower depending on where you'd like it to appear.

Click the Downpay block itself to customize the wording and features that are displayed.

If you will also be enabling the cart embed, add a deposit product to your cart in the theme editor

5. Click Save at the top right to finish setup.

Video guide to set up 2.0 theme product block






Customizing the Downpay product block



If you would like to adjust the look and feel of the Downpay product block, simply click the Downpay block from your product template in your theme editor and you will see a variety of options including layout and wording that you will be able to customize.

Downpay product block customization

Make sure to click Save after you have made your customizations.

Cart Page



Downpay features a cart embed to help you display subtotals that will be paid at checkout and the remaining balance due.

Downpay cart subtotals



If you are using a cart side drawer instead of a cart page, contact us to get help with installation.

Steps



1. Click Online Store from your left navigation bar in Shopify Admin.

2. Click Customize on the theme you wish to add Downpay blocks to.

3. Navigate to the Cart page template you are using from the dropdown menu at the top center area of the editor. Make sure you have a deposit product in your cart otherwise the totals will not display on the page.

4. Navigate to the embed section of the editor on the left hand side. and toggle the Downpay product embed on

Downpay cart embed

Click the Downpay embed itself to customize the wording and features that are displayed.

7. Click Save at the top right to finish setup.

If the cart totals are not appearing on your cart page, ensure you have a product in the cart that has a Downpay deposit. If this is still an issue, contact us so that we may build support for your specific theme.

Customizing the Downpay cart embed



If you would like to adjust the look and feel of the Downpay cart embed, simply click the embed in your theme editor and you will see a variety of options including layout and wording that you will be able to customize.

Downpay cart embed customization

Make sure to click Save after you have made your customizations.

Modifying placement of the cart embed



In the Downpay cart embed, the HTML element to insert after will allow you to move the cart subtotals around the cart page. If we have not built support for your specific theme yet, this step may be required to get the subtotals to appear at all.

Two options to modifying the placement of the box are:
- Unique element id attribute - Element ids will be #id.
- Unique CSS Class: Classes will be inserted as .class

Updated on: 20/11/2023

Was this article helpful?

Share your feedback

Cancel

Thank you!