> ## Documentation Index
> Fetch the complete documentation index at: https://aiodapp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Settings

> Settings tab for AIOD widget selectors, free gift behavior, custom CSS or JavaScript, storefront currency locale, and side cart initialization delay.

Use **Settings** when a merchant wants to configure global AIOD storefront behavior rather than a single discount template.

## Entry point

In Shopify admin, open **Apps** > **AIOD Discount & Gift** > **Settings**.

The **Settings** hub shows four settings areas:

| Area                         | Description shown in AIOD                        |
| ---------------------------- | ------------------------------------------------ |
| **Widget Selector Settings** | Select exact locations to display widgets.       |
| **Free gift settings**       | Configure gift messages and more.                |
| **Custom JS / CSS**          | Add custom JavaScript or CSS to your store.      |
| **Global Settings**          | Configure settings that apply across your store. |

Click a settings area to open its form. Subpages include a back control, observed as **Go back** or **Go to Home Screen**, that returns to the settings hub.

## Widget Selector Settings

Open **Settings** > **Widget Selector Settings**.

Use this page to add CSS selectors that control where AIOD widgets appear on the storefront. AIOD shows this note:

"NOTE: Here you can add the specific selectors to display the widgets at those locations in your store. It's recommended that you take help of a Developer to get the correct selectors or contact our support team."

### Global placement selectors

The first sections set general placement targets.

| Section                                    | Field            | Placeholder observed          | Position default observed      |
| ------------------------------------------ | ---------------- | ----------------------------- | ------------------------------ |
| **Product Page**                           | **CSS Selector** | `e.g: .product-form__buttons` | **Below**                      |
| **Cart Page**                              | **CSS Selector** | `e.g: .cart__footer`          | **Above**                      |
| **Side Cart Header**                       | **CSS Selector** | `e.g: .cart-drawer__header`   | **Below**                      |
| **Side Cart Footer**                       | **CSS Selector** | `e.g: .cart-drawer__footer`   | **Above**                      |
| **Shadow DOM Selector (Side Cart Drawer)** | **CSS Selector** | `e.g: #upCart`                | No position dropdown observed. |

Each **Position** dropdown has:

* **Above**
* **Below**
* **Inside top**
* **Inside bottom**

### Widget Specific Selectors

The **Widget Specific Selectors** section contains expandable widget groups.

Observed groups:

* **Gift Banner**
* **Progress Bar**
* **Discount Callout**
* **Offer Message Widget**
* **Volume Bundle Widget**
* **BXGY Widget**
* **Upsell Widget**

Click a group heading to reveal its selector fields.

A group is collapsed when it has no configured selector. If at least one selector in a group is already configured, AIOD opens that group automatically.

### Gift Banner selectors

When **Gift Banner** is expanded, AIOD shows:

| Field                  | Placeholder observed          | Position default observed |
| ---------------------- | ----------------------------- | ------------------------- |
| **PDP Selector**       | `e.g: .product-form__buttons` | **Below**                 |
| **Side Cart Selector** | `e.g: .cart-drawer__footer`   | **Above**                 |
| **Cart Page Selector** | `e.g: .cart__footer`          | **Above**                 |

### Progress Bar selectors

When **Progress Bar** is expanded, AIOD shows:

| Field                  | Placeholder observed        | Position default observed |
| ---------------------- | --------------------------- | ------------------------- |
| **Side Cart Selector** | `e.g: .cart-drawer__footer` | **Below**                 |

### Discount Callout selectors

When **Discount Callout** is expanded, AIOD shows:

| Field                  | Placeholder observed          | Position default observed |
| ---------------------- | ----------------------------- | ------------------------- |
| **PDP Selector**       | `e.g: .product-form__buttons` | **Below**                 |
| **Side Cart Selector** | `e.g: .cart-drawer__footer`   | **Above**                 |
| **Cart Page Selector** | `e.g: .cart__footer`          | **Above**                 |

### Offer Message Widget selectors

When **Offer Message Widget** is expanded, AIOD shows:

| Field                  | Placeholder observed          | Position default observed |
| ---------------------- | ----------------------------- | ------------------------- |
| **PDP Selector**       | `e.g: .product-form__buttons` | **Below**                 |
| **Side Cart Selector** | `e.g: .cart-drawer__footer`   | **Above**                 |
| **Cart Page Selector** | `e.g: .cart__footer`          | **Above**                 |

### Volume Bundle Widget selectors

When **Volume Bundle Widget** is expanded, AIOD shows:

| Field            | Placeholder observed          | Position default observed |
| ---------------- | ----------------------------- | ------------------------- |
| **PDP Selector** | `e.g: .product-form__buttons` | **Below**                 |

### BXGY Widget selectors

When **BXGY Widget** is expanded, AIOD shows:

| Field                  | Placeholder observed          | Position default observed |
| ---------------------- | ----------------------------- | ------------------------- |
| **PDP Selector**       | `e.g: .product-form__buttons` | **Below**                 |
| **Side Cart Selector** | `e.g: .cart-drawer__footer`   | **Above**                 |
| **Cart Page Selector** | `e.g: .cart__footer`          | **Above**                 |

### Upsell Widget selectors

When **Upsell Widget** is expanded, AIOD shows:

| Field                  | Placeholder observed          | Position default observed |
| ---------------------- | ----------------------------- | ------------------------- |
| **PDP Selector**       | `e.g: .product-form__buttons` | **Below**                 |
| **Side Cart Selector** | `e.g: .cart-drawer__footer`   | **Above**                 |
| **Cart Page Selector** | `e.g: .cart__footer`          | **Above**                 |

### Save Widget Selector Settings

Click **Save Settings** to save selector changes.

The observed **Save Settings** button is disabled until a setting changes. When a change is made, Shopify also shows an **Unsaved changes** toolbar with **Discard** and **Save**.

## Gift Settings

Open **Settings** > **Free gift settings**.

The page title is **Gift Settings**.

Use this page to control global gift add/remove popup messages, popup styling, typography, manual gift quantity behavior, and cart auto reload behavior for gifts.

### Gift Messages

The **Gift Messages** section says: "Configure the popup messages shown when a gift is added or removed from the cart. NOTE: Changes apply to all gifts."

Controls:

| Control                                    | Observed value or behavior                                                                |
| ------------------------------------------ | ----------------------------------------------------------------------------------------- |
| **Disable gift add/remove popup messages** | Checkbox. When checked, the gift message fields and popup style controls are hidden.      |
| **Gift Added Message**                     | Text input. Placeholder observed: `Free gift added to your cart!`.                        |
| **Gift Removed Message**                   | Text input. Placeholder observed: `Free gift removed from cart as you no longer qualify.` |

### Popup Styles

The **Popup Styles** section customises the gift notification banner shown to customers.

The section is visible only when **Disable gift add/remove popup messages** is unchecked.

#### Gift added popup

The **Gift added popup** section is shown when a free gift is added to the cart.

Controls:

* **Live preview**
* **Background color**
* **Border color**
* **Text color**
* **Border radius (px)** slider

Observed defaults:

| Setting                | Default observed |
| ---------------------- | ---------------- |
| **Background color**   | `#d4edda`        |
| **Border color**       | `#c3e6cb`        |
| **Text color**         | `#155724`        |
| **Border radius (px)** | `10px`           |

#### Gift removed popup

The **Gift removed popup** section is shown when a free gift is removed from the cart.

Controls:

* **Live preview**
* **Background color**
* **Border color**
* **Text color**
* **Border radius (px)** slider

Observed defaults:

| Setting                | Default observed |
| ---------------------- | ---------------- |
| **Background color**   | `#d1ecf1`        |
| **Border color**       | `#bee5eb`        |
| **Text color**         | `#0c5460`        |
| **Border radius (px)** | `10px`           |

### Typography

The **Typography** section says: "These settings apply to both popups."

Controls:

| Control              | Default observed |
| -------------------- | ---------------- |
| **Text size** slider | `14px`           |
| **Bold text**        | Unchecked.       |

This section is visible only when **Disable gift add/remove popup messages** is unchecked.

### Manual gift quantity

The **Allow quantity increase for manual gifts** checkbox appears on **Gift Settings**.

AIOD explains: "Will allow the user to increase the quantity but discount will only be applied according to the rules."

This checkbox remains visible when **Disable gift add/remove popup messages** is checked.

### Cart auto reload function

The **Cart auto reload function (For Developers)** field appears on **Gift Settings**.

Use this field to provide JavaScript that AIOD calls after a gift is added to or removed from the cart. Merchants or theme developers can use it to refresh the cart page, cart drawer, or cart UI without requiring a full page reload after each gift add or delete action.

Example code pattern:

```js theme={null}
window.cart.reload()
```

This is only an example. The exact function depends on the merchant's theme and cart drawer implementation.

AIOD explains: "This function will be called to update/reload the cart each time the gift is added or removed."

### Save Gift Settings

Click **Save Settings** to save gift setting changes.

The observed **Save Settings** button is disabled until a setting changes. When a change is made, Shopify also shows an **Unsaved changes** toolbar with **Discard** and **Save**.

## Custom JS / CSS

Open **Settings** > **Custom JS / CSS**.

The page title is **Custom JS / CSS (For Developers)**.

Use this page to add global custom storefront CSS or JavaScript for AIOD behavior.

Controls:

| Field                 | Placeholder observed             |
| --------------------- | -------------------------------- |
| **Custom CSS**        | `/* Your custom CSS here */`     |
| **Custom JavaScript** | `// Your custom JavaScript here` |

AIOD warns: "JavaScript will run on your store on each load. Use with caution."

Click **Save Settings** to save custom CSS or JavaScript.

The observed **Save Settings** button is disabled until a setting changes.

## Global Settings

Open **Settings** > **Global Settings**.

Use this page to configure storefront behavior that applies across AIOD rather than to one discount template.

### Set custom locale

**Set custom locale** controls how currency is formatted in the strikethrough widget.

| Field      | Placeholder observed | Behavior                                                                                                          |
| ---------- | -------------------- | ----------------------------------------------------------------------------------------------------------------- |
| **Locale** | `For example, en-US` | Enter the locale AIOD should use for currency formatting. The field is blank when no custom locale is configured. |

The value is saved without leading or trailing spaces. Clearing the field removes the custom locale.

### Side cart initialization delay

**Side cart initialization delay** tells AIOD how long to wait after detecting the side cart before it initializes widgets.

| Field     | Input                      | Behavior                                                                                                     |
| --------- | -------------------------- | ------------------------------------------------------------------------------------------------------------ |
| **Delay** | Number with an `ms` suffix | Enter `0` or a positive whole number of milliseconds. The field is blank when no custom delay is configured. |

### Save Global Settings

Click **Save Settings** to save global settings.

The observed **Save Settings** button is disabled until a setting changes. When a change is made, Shopify also shows an **Unsaved changes** toolbar with **Discard** and **Save**.

## Support

Settings pages show **Contact support:** followed by the AIOD support email.