Where to find it: Online Store → Themes → Customize → App embeds → Netwise: B2B Pricing → set Storefront pricing to Keep store default → Custom CSS.
What the wholesale price looks like
Wherever NetWise shows a wholesale price, it builds this small block:
<div class="nw-collection-price">
<span class="nw-collection-price__compare">$10.00</span> <!-- original, struck out -->
<span class="nw-collection-price__current">$2.00</span> <!-- wholesale price -->
</div>
That block appears on product pages, collection pages, search results, product recommendations, and quick view.
Selectors you can use
Selector | What it targets |
.nw-collection-price__current | The wholesale price |
.nw-collection-price__compare | The original price, struck out |
.nw-collection-price | Both prices together (the row) |
.nw-collection-price__msrp-label | The MSRP label, when your price list uses one |
.nw-product-price-mount | The block we insert on product pages |
.nw-collection-price-mount | The block we insert on product cards |
Common examples
Make the wholesale price stand out
.nw-collection-price__current {
font-weight: 700;
font-size: 20px;
color: #b12704;
}
Soften the struck-out original
.nw-collection-price__compare {
color: #888888;
font-size: 13px;
}
Change the spacing between the two prices
.nw-collection-price {
gap: 12px;
}
Stack them vertically instead of side by side
.nw-collection-price {
display: flex;
flex-direction: column;
gap: 2px;
}
Add breathing room around the price
.nw-product-price-mount {
margin-top: 6px;
margin-bottom: 10px;
}
Style product pages and cards differently
The same CSS applies everywhere by default. To target one place, wrap the rule in :host(...):
/* Product pages only */
:host(.nw-product-price-mount) .nw-collection-price__current {
font-size: 24px;
}
/* Product cards only */
:host(.nw-collection-price-mount) .nw-collection-price__current {
font-size: 15px;
}
Things worth knowing
You don't need !important. Your CSS is applied last, after NetWise's own styles, so a normal rule wins.
The one exception is alignment. NetWise copies your theme's text alignment onto the block, so overriding it needs !important:
.nw-product-price-mount {
text-align: left !important;
}
This box is the only place these rules work. The wholesale price is rendered in an isolated container, so the same CSS added to your theme's stylesheet or theme.liquid will have no effect on it. It must go in this box.
Use simple selectors. Rules that reach in from your theme's own classes won't match:
/* Will NOT work — .product__info is outside the price block */
.product__info .nw-collection-price__current { color: red; }
/* Works */
.nw-collection-price__current { color: red; }
You can also style your own theme from here. Rules that target your theme's elements work normally, so this box does double duty:
.product__title h1 {
font-size: 32px;
}
The struck-out price only appears when there's something to strike. If a product's wholesale price is the same as its normal price, .nw-collection-price__compare isn't rendered at all — so test that rule on a product with a real discount.
The cart and checkout aren't affected. Those pages are rendered by your theme and Shopify, using your own price markup, so NetWise adds nothing there to style.
Mistakes are contained. Invalid CSS is ignored by the browser and can't break your theme. One thing to watch: a missing closing brace } will stop the rest of your rules in this box from working, so check your braces if a rule further down stops applying.
If a rule isn't working
Check you're logged in as a wholesale customer. Retail visitors see your normal prices, and there's no wholesale price on the page to style.
Check the product is in a published price list. Products outside your price lists keep their normal price and normal markup.
Check you saved the theme. Custom CSS applies after you press Save in the theme editor.
Check for a descendant selector. See "Use simple selectors" above — this is the most common cause.
Test on a discounted product if you're styling .nw-collection-price__compare.