Advanced: custom theme display

Miko B2B handles price display automatically through the App Embed. Most merchants don't need this section.

However, if you want to add custom wholesale-specific content in your theme, such as a wholesale badge, a personalised banner, or conditional content for specific groups, you can do so using Shopify's Liquid template language and a small JavaScript snippet.

Show a wholesale badge in your theme

In any Liquid template, use the customer's tags to conditionally show content:

{% if customer and customer.tags contains 'wholesale-gold' %}
  <div class="wholesale-badge">
    Gold Wholesale Account
  </div>
{% endif %}

Show different content for wholesale vs retail visitors

{% if customer and customer.tags contains 'wholesale-gold' %}
  <p>Your Gold Wholesale pricing is active on all products.</p>
{% elsif customer %}
  <p>Log in with your wholesale account to see your pricing.</p>
{% else %}
  <!-- Regular retail visitor, show nothing -->
{% endif %}

Access live wholesale pricing in JavaScript

If you want to build a fully custom price display (e.g. a custom quick-order form or a collection page with your own layout), you can query the Miko App Proxy from your theme's JavaScript to get the active customer's wholesale configuration:

fetch('/apps/b2b')
  .then(response => response.json())
  .then(data => {
    if (!data.isWholesale) return; // retail customer, do nothing

    console.log('Group:', data.groupName);
    // data.discountPercent, e.g. 25 (for 25% off)
    // data.customPrices    - object of variantGid → price
    //                        e.g. { "gid://shopify/ProductVariant/123": 45.00 }

    // Example: update a price element on the page
    const priceEl = document.querySelector('.product-price');
    const variantGid = priceEl.dataset.variantGid; // set this in your Liquid
    if (data.customPrices[variantGid]) {
      priceEl.textContent = '$' + data.customPrices[variantGid].toFixed(2);
    }
  });

Display wholesale price on a product page (collection grid)

In your product card Liquid snippet, pass the variant GID as a data attribute so your JavaScript can match it to the App Proxy response:

<!-- In your product card snippet (e.g. product-card.liquid) -->
<span
  class="price"
  data-variant-gid="{{ product.selected_or_first_available_variant.id | prepend: 'gid://shopify/ProductVariant/' }}"
>
  {{ product.price | money }}
</span>