> For the complete documentation index, see [llms.txt](https://help.dollarlabs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.dollarlabs.io/dollarback-store-credit/widgets-and-storefront/open-the-widget-from-a-menu-link.md).

# Open the widget from a menu link

By default the cashback widget lives behind a floating launcher in the page corner. Some stores would rather not have a floating button at all: it can sit on top of chat widgets, cookie banners, or your own navigation. This recipe removes the launcher and opens the same panel from a permanent entry point you control, such as a header menu item or an icon in your announcement bar.

The panel itself does not change. Customers still get the full Home / Offers / Referral experience; only the way they open it moves.

{% hint style="info" %}
Keep the **Cashback Widget** app embed enabled. The embed renders the panel; this recipe only hides the launcher button. If you disable the embed, there is nothing left to open.
{% endhint %}

## How it works

The storefront bundle exposes `window.dollarlabs.dollarback.openWidget()`, which opens the panel from any JavaScript on the page. So the recipe is three small steps:

1. Hide the floating launcher with widget custom CSS.
2. Add a menu item that acts as the new entry point.
3. Add a few lines of JavaScript that call `openWidget()` when that menu item is clicked.

## Step 1. Hide the floating launcher

1. Go to **DollarBack admin → Customization → Cashback widget** and open the **Advanced** tab.
2. In the **Custom CSS** field, add:

```css
.dbw-trigger {
  display: none;
}
```

3. Save.

The launcher button doubles as the panel's close button, so with it hidden customers close the panel by clicking anywhere outside it or pressing Escape. If you want the button to reappear as a close control while the panel is open, use this instead:

```css
.dbw-trigger {
  display: none;
}
.dbw-root:has(.dbw-panel--open) .dbw-trigger {
  display: flex;
}
```

## Step 2. Add the menu item

1. In Shopify admin, go to **Online Store → Navigation** and open the menu you want (usually the main menu).
2. Add a menu item named for example **Rewards**, and set its link to `#rewards`.
3. Save the menu.

The `#rewards` link is just a marker for the script in the next step; on its own it does nothing. Any anchor value works as long as the script below matches it.

## Step 3. Wire the click to the widget

Add this script to your theme. The easiest home for it is a **Custom Liquid** section or block placed in the theme's footer; pasting it into `theme.liquid` just before `</body>` also works.

```html
<script>
  document.addEventListener("click", function (event) {
    var link = event.target.closest('a[href$="#rewards"]');
    if (!link) return;
    event.preventDefault();
    if (window.dollarlabs && window.dollarlabs.dollarback && window.dollarlabs.dollarback.openWidget) {
      window.dollarlabs.dollarback.openWidget();
    }
  });
</script>
```

This listens for clicks on any link ending in `#rewards` (your new menu item), stops the browser from jumping to the anchor, and opens the panel. The guard around the call means a click during the first moments of page load, before the DollarBack bundle has finished loading, is safely ignored instead of throwing an error.

If you are wiring up your own button rather than a menu link, you can call the API directly:

```html
<button onclick="window.dollarlabs.dollarback.openWidget({ tab: 'offers' })">
  View rewards
</button>
```

## Optional: deep-link into a specific tab or view

`openWidget()` accepts an options object, so different menu items can open different parts of the panel:

| Call                              | Opens                                                                  |
| --------------------------------- | ---------------------------------------------------------------------- |
| `openWidget()`                    | The Home tab                                                           |
| `openWidget({ tab: "offers" })`   | The Offers tab                                                         |
| `openWidget({ tab: "referral" })` | The Referral tab                                                       |
| `openWidget({ view: "redeem" })`  | The redeem rewards view                                                |
| `openWidget({ view: "history" })` | The reward history view                                                |
| `openWidget({ configId: "..." })` | The Offers tab, scrolled to that cashback offer with a brief highlight |

The full API, including the equivalent `dollarback:open-widget` event, is documented in the [Storefront window API](/dollarback-store-credit/developer-tools/storefront-window-api.md) reference.

## No-code alternative: link to the loyalty page

If you would rather not add any script, point the menu item at your loyalty page instead. It is a full page with the same balance, earning, and redemption content, and a plain menu link reaches it with no JavaScript. See [Set up the loyalty page](/dollarback-store-credit/widgets-and-storefront/set-up-the-loyalty-page.md).

## Verify it works

1. Open your storefront: the corner launcher should be gone.
2. Click the new menu item: the panel should open in place instead of navigating.
3. Click outside the panel (or press Escape) to close it.
4. Sign in as a test customer and repeat; the panel should show their balance as usual.

## Common issues

* Clicking the menu item jumps to the top of the page instead of opening the panel: the script isn't on the page (the Custom Liquid section was removed or is only on some templates), or the `href` in the script doesn't match the menu item's link.
* Nothing happens at all: the **Cashback Widget** app embed is off. The launcher CSS only hides the button; the embed must stay enabled. See [A widget isn't showing on my store](/dollarback-store-credit/troubleshooting-and-faq/widget-isnt-showing.md).
* The launcher is still visible: the CSS was added somewhere else, such as the theme editor. It must go in the **Custom CSS** field under **Customization → Cashback widget → Advanced**, which loads with the widget itself.

## Related articles

* [The floating cashback widget](/dollarback-store-credit/widgets-and-storefront/the-floating-cashback-widget.md)
* [Set up the loyalty page](/dollarback-store-credit/widgets-and-storefront/set-up-the-loyalty-page.md)
* [Storefront window API](/dollarback-store-credit/developer-tools/storefront-window-api.md)
* [Activate widgets in your theme](/dollarback-store-credit/getting-started/activate-widgets-in-your-theme.md)