> ## 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.

# Add AIOD widgets to product pages, cart pages, and cart drawers

> Choose AIOD widget locations and configure theme-specific selectors for product pages, carts, and side cart drawers.

AIOD widgets can appear on product pages, the full cart page, or a theme's side cart drawer. Available locations depend on the widget and template.

<img src="https://mintcdn.com/aiod-4861190f/i-rrNz8paXSQjZm3/images/help/settings-overview.png?fit=max&auto=format&n=i-rrNz8paXSQjZm3&q=85&s=43a466e6cac8988d994444212b7f1b0d" alt="AIOD settings hub showing Widget Selector Settings" width="1619" height="971" data-path="images/help/settings-overview.png" />

## Choose locations in the discount

Open the discount's widget settings and find **Where should the widget appear?**. Depending on the template, the available choices include:

* **Side Cart Drawer/ Cart Page**
* **All product pages**
* **Specific product pages**

Selecting **Specific product pages** reveals **Select products**.

## Configure theme selectors

If a widget is missing or appears in the wrong place:

1. Open **AIOD Discount & Gift** > **Settings**.
2. Select **Widget Selector Settings**.
3. Enter the correct CSS selector for the relevant surface.
4. Choose **Above**, **Below**, **Inside top**, or **Inside bottom** where a position menu is available.
5. Click **Save Settings**.

AIOD provides general selectors for **Product Page**, **Cart Page**, **Side Cart Header**, **Side Cart Footer**, and a **Shadow DOM Selector (Side Cart Drawer)**. It also provides widget-specific selector groups.

Theme markup varies. Ask the theme developer or AIOD support for the correct selector instead of copying a selector from another store.

Read [Settings: Widget Selector Settings](/docs/app/settings#widget-selector-settings) and [Discount Widgets](/docs/app/discount-widgets) for the complete controls.