Customize your storefront
Change the floating button’s text and color, or open the storefront from your own buttons and links.
By default, OnAnthem adds a “Shop Merch” button to the bottom-right corner of your website. You can customize the button’s text and color directly in your dashboard.
You can also open the storefront from an existing link or button on your website, giving you control over where visitors access it and how that link or button looks.
Open the storefront from your own button or link
You can open the storefront from any button, link, or menu item on your website, using your own text and styling.
First, add data-display-type="dialog" to your existing embed code to hide the floating “Shop Merch” button. Keep your widget ID and publishable key unchanged.
<script async src="https://js.onanthem.com/v1/anthem-checkout.js"
data-widget-id="…"
data-publishable-key="…"
data-display-type="dialog">
</script>Then, add the following onclick code to your button or link so it opens the storefront when clicked:
<button class="your-class" onclick="window.AnthemCheckout && AnthemCheckout.open()">
Shop Merch
</button>If you’d like to keep the floating button alongside your own buttons, leave out data-display-type="dialog".
Your buttons will work once the OnAnthem script has loaded. Clicking before then won’t open the storefront.
Reference
Embed code attributes
| Attribute | Description | Default |
|---|---|---|
| data-widget-id | Required. Identifies your storefront. | — |
| data-publishable-key | Required. | — |
| data-display-type | button shows the floating button. dialog renders nothing until you call open(). | button |
| data-cta-text | Text for the floating button on this page. | Your saved call to action |
| data-merchant-default | Merchant whose tab the storefront opens on, for the floating button and open() alike. | Featured |
JavaScript
| Call | Description |
|---|---|
| AnthemCheckout.open() | Opens the storefront. |
| AnthemCheckout.open({ merchantId }) | Opens on that merchant’s tab, or switches to it if already open. |
| AnthemCheckout.close() | Closes the storefront. |
| AnthemCheckout.on(event, fn) | Listens for ready, opened, closed, order-complete, or error. |
| AnthemCheckout.off(event, fn) | Removes a listener. |