Vanity Pricing

"Vanity Pricing," also known as "charm pricing" or "rounded pricing" is a way for you to control how your prices are displayed to your shoppers.

The Reach Vanity Pricing functionality allows shop owners to convey value and motivate customers with specific rounding or display rules attached to their prices.

❗️

Before you start

Make sure you reach out to your Reach Account Manager to discuss your rounding rules, fixed foreign pricing, charm values, and discounted sale pricing.

Add Auto Rounding to my prices

First, ensure that your currency settings is updated as recommended here https://docs.withreach.com/docs/setup#section-currency-settings

Then, with the attribute data-auto_round_prices="true" added to your "reach-script", you should be able to have all prices within your website rounded.

Note: cart pages require special attributes, check here for cart integrations https://docs.withreach.com/docs/vanity-pricing-1#section-cartliquid

<!-- Reach Localize Script -->
<script
   id="gointerpay_localize"
   src="https://assets.rch.io/{Merchant Id}/localize.js"
   data-merchant_id="{Merchant Id}"
   data-auto_round_prices="true">
</script>

For prices you do not want rounded after using the attribute above, you can add the data-variant-id="noround" within the tag of the price you don't want to round.

Product and Variant Tags

If you cannot for any reason do auto rounding for your store then you would have to do the vanity task manually by following the steps below.

In order to vanitize product pricing properly the Reach code needs to know what prices should be converted for the different variant product options.

❗️

These edits are usually made in the collection.liquid and product.liquid files but your store may have other places where the span.money tag exists.

Add data-product-id and data-variant-id attributes to the parent of any span.money tags for a product in your .liquid code.

• For any secondary prices such as sale prices, append a suffix to the data-variant-id with the format <variant_id>:<text> where text can be an identifier of your choosing.

<div data-product-id="{{ product.id }}" 
     data-variant-id="{{ product.selected_or_first_available_variant.id }}">
    {{ product.price | money }}
    
// Sale prices
<div data-product-id="{{ product.id }}" 
     data-variant-id="{{ product.selected_or_first_available_variant.id }}:compare">
    {{ product.compare_at_price | money }}

product.liquid

In product.liquid, add the data-gip-product-variant-select attribute with product ID as the value to the variant element if a product has multiple variants. <select data-gip-product-variant-select="{{ product.id }}"> ... Make sure that this change doesn't affect the selectCallback javascript function, which is sometimes used for switching between variants. function selectCallback(variant, selector) { var $price = $('span.money'); ... } cart.liquid The following section is for preparing your cart page or flyout carts for vanity pricing. For flyout carts or any additional carts there are extra steps required which are outlined below under Additional Carts. Not all of your cart code may exist in the .liquid files. Make sure you are looking at any code or extra elements created for your cart pages including javascript, .liquid, etc. In order to convert prices to the consumer currency, elements with prices in the cart page will need to be tagged with these classes: Class Location Notes gip-cart parent element of the cart line items There can only be one element on the page with this class or else the cart will not be valid. gip-cart-line-item main line item element If these cart elements exist in your cart.liquid page, you will need to add the corresponding classes to overwrite any existing inner html content with the converted prices. If no conversion is happening then the inner html content will be untouched. Add Class To the Cart Element Notes gip-cart-subtotal non-discounted subtotal gip-cart-discounted-subtotal discounted subtotal from discounts, auto discounts, and script discounts gip-cart-total-discounts total discounts amount from discounts, auto discounts, and script discounts gip-cart-additional-fee additional fees The amount must be contained in a child span.money element and these fees will be added to the cart total. <h3 class="gip-cart-additional-fee"><span class="money">$123.45</span></h3> gip-cart-total cart total Within the line item itself you will need to the following steps: Add gip-cart-line-item-qty class to the line item element that contains the quantity amount. Make it non-editable if you have an Update Cart button. // For carts with an editable quantity and an update cart button, // create a new hidden span: <span class='gip-cart-line-item-qty' style='display:none;'>{{ line_item.qty }}</span> // For carts that use Ajax to update the quantity immediately add // the 'gip-cart-line-item-qty' to the existing element: <input type='text' class='gip-cart-line-item-qty'/> Create a hidden span with class gip-cart-line-item-price and product/variant ID attributes and create a child element span.money with the original (non-discounted) item price. <span class="gip-cart-line-item-price" style="display:none;" data-product-id="{{ line_item.product_id }}" data-variant-id="{{ line_item.variant_id }}"> {{ line_item.original_price | money }} </span> Optional If you are using the gip-cart-line-item-compare-at-price-display or gip-cart-line-item-compare-at-total classes to display compare at prices, you will additionally need to add this: <span class="gip-cart-line-item-compare-at-price" style="display:none;" data-product-id="{{ line_item.product_id }}" data-variant-id="{{ line_item.variant_id }}:compare"> {{ variant.compare_at_price | money }} </span> Create a hidden span with class gip-cart-line-item-meta and the attributes data-original-price-cents and data-discounted-price-cents <span class="gip-cart-line-item-meta" style="display:none;" data-original-price-cents="{{ line_item.original_price }}" data-discounted-price-cents="{{ line_item.discounted_price }}"> </span> Optional Classes If these line item elements exist in your cart.liquid page, you will need to add the corresponding classes to overwrite any existing inner html content with the converted prices. If no conversion is happening then the inner html content will be untouched. Add Class Element that displays gip-cart-line-item-price-display non-discounted unit price gip-cart-line-item-compare-at-price-display compare at unit price gip-cart-line-item-discounted-price-display discounted unit price from discounts, auto discounts, and script discounts gip-cart-line-item-final-price-display final unit price gip-cart-line-item-total non-discounted line total gip-cart-line-item-compare-at-total compare at line total gip-cart-discounted-line-item-total discounted line total from discounts, auto discounts, and script discounts gip-cart-discount-amount unit discount amount gip-cart-line-discount-amount line item discount amount gip-cart-final-line-item-total final line total Additional Carts For any additional carts, like popup carts, you will need to do all of the same changes for the main cart for your other carts. In order to differentiate the carts use this class name structure gip-secondary-cart-* where '*' is the rest of the class name from above. For example, if on the cart page you had gip-cart-line-item, for the popup cart you would use gip-secondary-cart-line-item for that element. If your store has more than just the basic cart and popup cart you may use these class prefixes as well for those carts: gip-extra-cart-* gip-extra2-cart-* Apply Utility Classes Optional Add gip-convert-hide or gip-convert-display-none to set opacity to 0 or set display to 'none' respectively, if certain elements should be hidden permanently when currency conversion is running. Elements will be displayed if currency conversion is disabled (ie. domestic localize). Optional Add gip-extra-discount-display class to any elements that display the discount amount (from percentage or flat discount codes only) in checkout. This could be used for custom messages detailing how much was discounted. Checkout pages only.