---
title: Open a Specific Tab
tags: [dropin, commands, tabs, frontend]
---

The Dropin can be opened directly to a specific screen — the benefits selection, "how to get points", account settings, and so on — from any button or link on your site. There is one API for this: `commands.show(tab)`.

> [!NOTE]
> `instance` throughout this page is the object returned by `dropInLoader.setConfig()`. See the [Frontend Embedding Guide](/content/dropins/frontend-embedding-guide) §2 for the minimal embed that gives you `instance`.

## Open the modal — `commands.show()`

```js
instance.commands.show();                       // default tab (auto-picks based on auth state)
instance.commands.show('transactionBenefits');  // jump straight to the benefits screen
instance.commands.hide();                        // close the modal
```

- With **no argument**, `show()` opens the modal and follows the normal state machine (guest → phone + OTP, member → dashboard).
- With a **tab name**, it opens straight to that tab (for a member) instead of the default view.

## Tab names

Pass one of these values to `commands.show(tab)`:

| Value | Opens |
|---|---|
| `dashboard` | Member dashboard home |
| `transactionBenefits` | Benefits selection for the current cart / transaction |
| `howToGetPoints` | "How do I earn points?" explainer |
| `renewal` | Membership renewal |
| `notifications` | Member notifications |
| `settings` | Account settings |

Any other value falls through to the default view.

## Wire many page elements to a tab

If several elements across the page should each open a tab — a "See my benefits" button, a "How do I earn points?" link, an account-menu item — you don't want a separate handler for each. Define a small **data-attribute convention** in your own markup and register **one** delegated click listener.

> [!IMPORTANT]
> `data-sc-open` below is **not** a Dropin attribute — it's a convention *you* define in your markup. The only Dropin call is `commands.show(tab)`. The attribute name is yours to choose.

This is the exact recipe used inside the **SimplyClub Shopify integration**. Nothing about it is Shopify-specific — copy or adapt it on WooCommerce, WordPress, or a custom site.

Mark each element with your chosen attribute:

```html
<button data-sc-open="transactionBenefits">See my benefits</button>
<a href="#" data-sc-open="howToGetPoints">How do I earn points?</a>
<li data-sc-open="settings">Account settings</li>
```

Then register one delegated listener that reads the attribute and calls `commands.show()`:

```js
// `instance` is the object returned by dropInLoader.setConfig().
document.addEventListener('click', (e) => {
  const trigger = e.target.closest('[data-sc-open]');
  if (!trigger) return;
  e.preventDefault();
  const tab = trigger.getAttribute('data-sc-open') || 'transactionBenefits';
  instance.commands.show(tab); // ← the only Dropin call
});
```

Whatever value you put in the attribute is passed straight to `commands.show()`, so it must be one of the tab names above (an empty attribute falls back to `transactionBenefits`).

> [!TIP]
> Because this uses **event delegation** (one listener on `document`, matching with `closest`), it also fires for elements added *after* the listener is registered — Shopify theme sections, AJAX mini-carts, or any dynamically rendered markup. You never have to re-bind when the DOM changes.