Open a Specific Tab

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

Open the modal — commands.show()

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.

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:

<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():

// `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).