3a. 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 }}
    
// Compare at 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'); ... }