> For the complete documentation index, see [llms.txt](https://discontx.arvest.digital/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://discontx.arvest.digital/getting-started/installing-the-app.md).

# Installing the App

The installation process consists of choosing a theme where you want to display the application and selecting the HTML elements where you want to add it.

{% tabs %}
{% tab title="Video: Shopify 2.0" %}
{% embed url="<https://www.youtube.com/watch?v=zQS-kr2SVQo>" %}
Installation walkthrough for Shopify Online Store 2.0
{% endembed %}
{% endtab %}

{% tab title="Video: Shopify 1.0" %}
{% embed url="<https://www.youtube.com/watch?v=bOSMuIzwtDk>" %}
Installation walkthrough for Shopify Online Store 1.0
{% endembed %}
{% endtab %}
{% endtabs %}

{% stepper %}
{% step %}

### Activation

The first thing to do is activate the application. Go to the “Main” page using the “General” button in the menu, then click “Activate”.
{% endstep %}

{% step %}

### Open the subscription modal

After activation, you need to pay for the application. Click the “See your plan” button.
{% endstep %}

{% step %}

### Choose your plan

In the modal window, review the available plans and click “Select” on the one that fits. You’ll be redirected to the payment page.
{% endstep %}

{% step %}

### Application payment

Fill in your bank details and click “Approve”. You’ll be redirected back to the application.
{% endstep %}

{% step %}

### Choose your Shopify version

If your theme has `.json` templates, that’s Shopify 2.0. If it has `.liquid` templates, that’s Shopify 1.0.

{% hint style="info" %}
We, and Shopify, recommend using Shopify 2.0 themes.
{% endhint %}
{% endstep %}

{% step %}

### Place the widget in your store

Choose one of the three methods below, depending on your theme version.
{% endstep %}
{% endstepper %}

## Placing the widget

{% tabs %}
{% tab title="Method 1 — Shopify 2.0" %}
Available only for Shopify 2.0 themes.

1. Go to your theme customizer.
2. Choose a cart template, then click “Add block” or “Add section”.
3. In the menu that appears, select “mCart – Multi discount”.
4. Save customizer settings. You will see the widget in your cart.
5. Click the “Save” button.

Done — you’ve successfully installed the widget in your store.
{% endtab %}

{% tab title="Method 2 — both versions" %}
Works on both Shopify 2.0 and 1.0 themes.

1. In “General”, choose “Your store version” as 1.0 (this option is only visible with 1.0 selected, but it works fine even on 2.0 themes).
2. Click the “Install application” button.
3. For the cart in a drawer, click “Install to minicart” and follow the steps in “Current theme”.
4. For a standard cart, click “Install to cart page” and proceed to your store’s cart.
5. Finish placing the widget:

{% stepper %}
{% step %}

### Select the widget location

Right-click the element where you want to place the widget. Right-clicking (instead of left-clicking) lets you still open the minicart and navigate the store while selecting.
{% endstep %}

{% step %}

### Select the price element

Right-click the item that displays the final order price, so the app knows where to show the discounted total.
{% endstep %}

{% step %}

### Confirm

Once both elements are selected, you’ll see a confirmation that settings have been updated and the page will close. Go to your cart to see the result.
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
Make sure your theme does not already include a block or section with our app (see Method 1) before using this method.
{% endhint %}

{% hint style="warning" %}
If during selection you see a message that the element does not match or has no class/id, select another element, set a class/id on it, or create a new element. If the widget doesn’t look right afterward, try selecting other elements or manually inserting CSS selectors.
{% endhint %}
{% endtab %}

{% tab title="Method 3 — manual" %}
Use this if the first two methods didn’t work for your theme.

Place `<div id="multi-discounts-form"></div>` in your cart page or minicart — the application will automatically integrate into this element.

Alternatively, specify the DOM element selector where you want to place the widget.

**Example:** to place the widget in `<div id="some-element"></div>`, on the Selectors page specify `#some-element`. For multiple locations, separate selectors with a comma, e.g. `#some-element, .minicart_some-element`.

{% hint style="info" %}
You also need to specify the ID or class of the element where the final order cost is displayed, so the app can show the discounted total. In the app control panel, go to the ‘Subtotal selectors’ tab and list the IDs/classes.

Example: for `<span id="cart_subtotal">22.55</span>`, set `#cart_subtotal` in the Subtotal selectors field. For multiple locations: `#cart_subtotal, .minicart_subtotal`.
{% endhint %}

{% hint style="warning" %}
The subtotal selector clears all information inside itself, so be careful when choosing it — the app can remove elements inside the block you specify.
{% endhint %}

If you have any difficulties installing the application, [contact us](mailto:support@arvest.digital).
{% endtab %}
{% endtabs %}

Once installed, you can customize the app widget in the ‘Custom CSS’ and ‘Custom JS’ sections.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://discontx.arvest.digital/getting-started/installing-the-app.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.