Articles on: Getting Started

Adding Downpay to Vintage themes

Installing Downpay to your Vintage 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 Vintage 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 Vintage theme, Downpay will be available as an embed and can also be installed using the in-app onboarding guide's Enable product embed.

Downpay product embed

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 center area of the editor.

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

Shopify embed menu and Downpay product embed

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

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

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

Video Guide to setup Vintage theme product embed





Customizing the Downpay product embed



If you would like to adjust the look and feel of the Downpay product 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 product embed customization

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

Modifying placement of the product embed



In the Downpay embed, the HTML element to insert after will allow you to move the purchase option box around the product page. The box will be inserted after the selector that is in the box.

Two options to modifying the placement of the box are:
- Unique element id attribute
- Unique CSS Class

Steps



Locate the HTML element that you want to insert the box after

Find the unique CSS or element id attribute and then insert this into the box in the Downpay embed

Example
Let’s say you want to insert after this element under the cart button, find HTML element you want to insert under and determine it's unique css class or unique element id attribute.

In this example I want to insert the options below the add to cart button so my id would be addToCartForm-product-template. The classes are likely not unique and may cause issues.

<button type="submit" name="add" id="addToCart-product-template" class="btn btn--large btn--full">
    <span class="add-to-cart-text">Preorder</span>
</button>

As for syntax, classes will be inserted as .class and element ids will be #id.

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!