Skip to main content

Show b2b customer discounts on product cards and collection pages

Shopify only runs our discounts at the cart and beyond, so for collection pages we need to use this snippet to display the correct price

Daniel Andrade avatar
Written by Daniel Andrade
Updated over 3 weeks ago

To display customer specific prices prior to the cart we need to add the code below to your Shopify theme as a snippet. Then wherever you need to show customer specific pricing in the theme ie. product cards, collections etc. you can just reference the snippet as follows as noted in the comments at the top of the code below:

{% comment %}
Renders a list of product's price (regular, sale)

Accepts:
- product: {Object} Product Liquid object (optional)
- price_class: {String} Adds a price class to the price element (optional)
- show_compare_at_price: {Boolean} Renders the compare at price if the product matches the condition (optional)
- show_discount_percentage: {Boolean} Renders the discount percentage if the product matches the condition (optional)

Usage:
{% render 'conspire-apps-trade-price', product: product, show_compare_at_price: true, show_discount_percentage: true %}
{% endcomment %}

{% comment %}
TODO: Add options
- use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
{% endcomment %}

{%- liquid
assign customer_tier_id = customer.metafields['conspire-trade-discount'].tier.value
assign customer_tier_id_string = customer_tier_id | append: ""
assign shop_tiers = shop.metafields['conspire-trade-discount'].tier.value
assign excluded_products = shop.metafields['conspire-trade-discount'].excluded_products.value

assign selected_variant = product.selected_or_first_available_variant
assign price_rules = selected_variant.metafields.conspire-trade-discount.price_rules.value
assign product_qty = 1
assign compare_at_price = selected_variant.price
if selected_variant.compare_at_price
assign compare_at_price = selected_variant.compare_at_price
endif
-%}
{%- liquid
assign excluded = false
for excluded_product in excluded_products
if excluded_product contains product.id
assign excluded = true
break
endif
endfor

if excluded or selected_variant.price == 0
assign price = selected_variant.price
else
comment
calculate price
endcomment
for shop_tier in shop_tiers
if shop_tier.id == customer_tier_id_string
assign customer_tier = shop_tier
endif
endfor

unless customer_tier
assign price = selected_variant.price
else
if price_rules.size > 0
assign price_rule = price_rules | where: "tier_id", customer_tier_id | sort: "qty" | last
endif
if product_qty >= price_rule.qty
assign price = applicable_price_rule.price
else
assign discount_amount = customer_tier.discount_amount | default: 0
if customer_tier.discount_type == "percentage"
assign discount_price = selected_variant.price | times: discount_amount | times: 1.00 | divided_by: 100.00
else
assign discount_price = discount_amount | times: 100
endif
assign price = selected_variant.price | minus: discount_price
endif
endunless

endif
-%}
<div class="conspire-apps">
<div class="price {% if price_class %} {{ price_class }}{% endif %}">
<div class="price__grid grid gap-2">
{% if customer_tier %}
<span class="self-start">{{ customer_tier.name }} Price</span>
{% endif %}
<div className="flex gap-2 self-start">
<span className="text-2xl font-bold price__regular">
{% if settings.currency_code_enabled %}
{{ price | money_with_currency }}
{% else %}
{{ price | money }}
{% endif %}
</span>
{% if show_compare_at_price and compare_at_price > price %}
<s className="text-2xl text-gray-500 price__compare">
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
{% endif %}
</div>
{% if show_discount_percentage %}
<div className="price__discount-percentage">
{% if compare_at_price > price %}
<span>{{ compare_at_price | minus: price | divided_by: compare_at_price | times: 100 | floor }}% off</span>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>


​If you're looking to do the same on product pages, follow this guide leveraging our app block!

Did this answer your question?