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
• Troubleshoot the embed