> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://docs.downpay.app/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Angle3D Integration Setup

Learn how to use Angle3D’s configurator with Downpay. With this integration, you’ll be able to showcase 3D product views via Angle3D while offering flexible payment options through Downpay, enhancing the shopping experience for high-value or custom items.
---
---

###### On this page:

[Overview of the Integration](#1-overview-of-the-integration)
* Considerations
[Setting up Angle3D with Downpay](#1-setting-up-angle3d-with-downpay)
* [Installing and Configuring Angle3D](#2-installing-and-configuring-angle3d)
* [Installing and Configuring Downpay](#2-installing-and-configuring-downpay)
* [Linking Flexible Payment Options](#2-linking-flexible-payment-option)
[Separating Downpay and Angle3D on Product Pages](#1-separating-downpay-and-angle3d-on-product-pages)
---
---

# Overview of the Integration

The Angle3D and Downpay integration enables merchants to offer 3D product previews alongside flexible payment options. This setup is ideal for high-value or customizable products, where buyers benefit from a 3D view to assess details before committing to a partial or full deposit. By combining these apps, you create a more engaging and transparent shopping experience that fosters customer confidence and boosts conversions.

## Considerations
* When setting up Angle3D, the `binding type` must be either `Variant` or `Split Bundle` for Downpay partial payment to work.
* If you sell add-on products that affect the price of the main product, make sure all add-ons are added to the same purchase option as the main product. [Learn more here](https://docs.downpay.app/en/article/using-downpay-with-product-options-apps-8x5ak9/).
---
---

[Jump to top](#6-on-this-page)

# Setting Up Angle3D with Downpay

This section guides you through the steps to integrate Angle3D and Downpay, ensuring both apps work together seamlessly on your Shopify store.

## Installing and Configuring Angle3D
 
1. Install [Angle3D](https://apps.shopify.com/angle-3d-configurator?st_source=autocomplete) from the Shopify App store.

Configure Angle3D to add 3D views to your products:

1. Open the `Angle3D` app in your Shopify admin.
2. Upload 3D models.
3. Select the product(s) of your choice and create a 3D configurator.
4. Follow the steps for [storefront integration](https://www.youtube.com/watch?v=r43gJ0QQt3c).

## Installing and Configuring Downpay

1. Install [Downpay](https://apps.shopify.com/downpay) from the Shopify App store *(if you don't already have it)*.
2. Create a [purchase option](https://docs.downpay.app/en/article/1dt4jnn/).
3. Check out our [getting started](https://docs.downpay.app/en/category/1qvdvm1/) guide for additional support.

## Linking Flexible Payment Option

Next, link Downpay’s purchase option with products featuring 3D views:

1. Install [Downpay](https://apps.shopify.com/downpay) from the Shopify App store *(if you don't already have it)*.
2. Check out our [getting started](https://docs.downpay.app/en/category/1qvdvm1/) guide for additional support.
3. Open the `Downpay` app in your Shopify admin.
4. Create a [purchase option](https://docs.downpay.app/en/article/purchase-options-1dt4jnn/) and [select which product(s)](https://docs.downpay.app/en/article/purchase-options-1dt4jnn/#2-product-selection-type) you’d like to have it applied to.

Lastly, **enable the Downpay product block** within your theme.

1. Edit your theme and navigate to your custom template under the Products templates (this is the new template you created when you were setting up your store integration with Angle3D).

|| Our example is called "angle3D", but yours will be whatever you named it during setup.

 ![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/angle3d-helpdoc-themeselect_fxfw9s.jpg)

2. Add the `Downpay block` into the Apps section, below the `Angle 3D (Product page)` block.

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/angle3d-adddownpayblock_6iu3hj.jpg)

3. Once this is added, the purchase options should appear within the 3D configurator, as shown in the image below.

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/angle3d-withdownpay_ylhled.jpg)
---
---

# Separating Downpay and Angle3D on Product Pages

1. Access Your Theme Editor
* Log in to your Shopify admin dashboard.
* Navigate to Online Store > Themes.
* Click the Customize button next to your active theme.

2. Edit the Theme Code
* In the theme editor, click the three dots menu (⋮) in the top-right corner.
* Select Edit Code from the dropdown.

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2025-01-28-at-11075_1h8ktp.png =600x342)

3. Locate the **theme.liquid** File
* In the left-hand menu, find and open the theme.liquid file under the Layout section.

4. Add the Required Script
* Locate the <head> section of the file
* Add the following script right below the <head> tag:

```
<script>
window.downpay = window.downpay || {};
window.downpay.angle3d_integration_disabled = true;
</script>
```

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2025-01-28-at-11121_1iu0cms.png =600x344)

5. Save your Changes
* After adding the script, click the Save button in the top-right corner. The following result of the script:

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2025-01-28-at-11133_3mi0ik.png =600x419)

---
---
[Jump to top](#6-on-this-page)