> For the complete documentation index, see [llms.txt](https://orbit-b2b.gitbook.io/orbit-b2b-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://orbit-b2b.gitbook.io/orbit-b2b-docs/b2b-prices-app-embed/theme-adapters.md).

# Theme support & custom selectors

The B2B Prices embed auto-detects which theme is active and picks the right CSS selectors for that theme's price element, sticky bar, and collection card. Five themes have built-in adapters; everything else falls through to a generic adapter that covers most Shopify themes.

## Built-in adapters

| Theme                  | PDP price selector chain                                                                                                                                                                                           | Card adapter                                                           |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------- |
| **Dawn**               | `.price__regular .price-item--regular`, `product-price`, `[data-product-price]`                                                                                                                                    | `.product-card`, `.card-wrapper`                                       |
| **Horizon**            | `product-price .price-item--regular`, `product-price`, `[data-product-price]`                                                                                                                                      | `.product-card`, `.card-wrapper`                                       |
| **Craft**              | `[data-product-price-wrapper] .money`, `[data-product-price-wrapper]`                                                                                                                                              | `.grid-product__content`                                               |
| **Refresh**            | `.product-info__price .price`, `.product-info__price .price-regular`                                                                                                                                               | `.product-card`                                                        |
| **Trade**              | `.product-single__price`, `[data-product-price]`                                                                                                                                                                   | `.product-card`                                                        |
| **Generic** (fallback) | `[data-product-price]`, `product-price`, `.price__regular .price-item--regular`, `.product__price .price-item`, `.product__price`, `.price-item--regular`, `.product-single__price`, `.product-form__price .price` | `.product-card`, `.card-wrapper`, `[data-product-card]`, `.grid__item` |

Detection happens once when the embed first runs. The adapter is chosen by:

1. Looking for a theme-specific DOM marker (e.g. `<product-info>` for Dawn, `[data-section-type='main-product-information']` for Horizon)
2. Checking `window.Shopify.theme.name` against a regex (`/Dawn/i`, `/Horizon/i`, etc.)
3. Falling through to the generic adapter if neither matches

## When the adapter misses

If you're on a custom theme or a heavily modified version of a popular theme, the auto-detect might not find the right price element. Symptoms:

* B2B prices don't show on PDP or cards at all
* Retail prices still visible alongside B2B (the embed couldn't find the element to replace)

Fix it without touching app code by setting selector overrides in **Theme editor → App embeds → Orbit B2B Wholesale → Theme selector overrides (advanced)**:

| Field                                | What to enter                                                     |
| ------------------------------------ | ----------------------------------------------------------------- |
| **PDP price selector**               | CSS selector for the main price element on product detail pages   |
| **Listing card selector**            | Each card on collection / search pages                            |
| **Listing card link selector**       | The `<a>` element inside the card that points to the product      |
| **Listing price container selector** | The wrapper around the price text inside the card                 |
| **Listing price text selector**      | The actual text node inside the container that displays the price |

Leave any field blank to use the built-in adapter chain for that field.

## Finding the right selector

1. Right-click the price element on your storefront → **Inspect**
2. In DevTools, look at the highlighted `<element>` and its ancestors
3. Find a stable class or attribute (avoid `:nth-child`, IDs that look auto-generated, or anything starting with a hash)
4. Copy that as a CSS selector — e.g. `.my-product-card__price-main`
5. Test in DevTools console: `document.querySelector('.my-product-card__price-main')` should highlight your price element
6. Paste into the override field in the theme editor → Save theme

## Operator override via metafield

For agencies / operators who want to push selectors programmatically (e.g. as part of an onboarding script for a customer), the same fields are also writable as a shop metafield:

```
namespace: orbit_wholesale
key: theme_override
type: json
value: {
  "pdpPriceSelector": ".my-product-card__price-main",
  "listCardSelector": ".my-product-card",
  "listLinkSelector": "a.my-product-card__link",
  "listPriceContainerSelector": ".my-product-card__price-wrapper",
  "listPriceTextSelector": ".my-product-card__price-text"
}
```

Block schema settings (set in theme editor) take precedence; metafield acts as a fallback when block settings are empty. So operators can push a metafield safety net without overriding what the merchant set manually.

## Adding new theme adapters

If you're a developer with access to the app code and want to add a built-in adapter for a popular theme, the adapter chain lives in `extensions/theme-app-extension/assets/wholesale-shared.js`. Add an entry to the `ADAPTERS` object with `detect()` plus the selector arrays, and order it before `generic`.

## Next

* [How variant + qty changes affect the price](/orbit-b2b-docs/b2b-prices-app-embed/variant-qty-reactivity.md)
* [Troubleshoot the embed](https://gitlab.com/thoaingo.vnkingnet/wholesale/-/tree/docs/docs/gitbook/troubleshooting/b2b-prices-embed.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://orbit-b2b.gitbook.io/orbit-b2b-docs/b2b-prices-app-embed/theme-adapters.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.