Skip to main content

Loyalty & Rewards: Redeeming Points on Checkout

Samantha
  • Updated

Follow this guide to learn how to add a points redemption widget on the Shopify Plus checkout page.

Key Notes:

  • This guide is only applicable to Shopify Plus users
  • Starting August 2024, Shopify will discontinue support for the Checkout Slider widget due to compatibility issues; we recommend implementing the Variable Points Redemption widget to ensure you can still offer your customers the option to redeem points at checkout. 

In this Guide:

Variable Points Redemption using Shopify Checkout Extension

Shopify Checkout 6.png

Note:
- To use this feature, users need to be on a Shopify Plus plan and have the Shopify Checkout Extensibility enabled
- Users need to be on the Stamped Loyalty 2.0 dashboard 

  1. In your Shopify Plus admin dashboard, head to Settings > Checkout
  2. In the Checkout Customization section, click Customize beside the default checkout profile:

    Shopify Checkout 1.png

  3. This will bring you to the Shopify Checkout customization section in your Theme Editor. From here, click Add App Block and select the points-redemption block:

    Shopify Checkout 2.png
    Shopify Checkout 3.png

  4. You'll be prompted to enter the Discount Rule ID for the block, which can be found in the Redeeming Points section of your Stamped dashboard by finding the rule, clicking the ... and selecting Copy Rule ID:

    Shopify Checkout 5.png
  5. Don't forget to hit Save in the Theme Editor when you're done! 

Checkout Slider

Shopify Checkout 7.png
Note: Shopify is deprecating support for this widget starting August 2024.

  1. Create a snippet "stamped-checkout-slider" file with the following code content:
    • Replace "##storeHash##" with your store hash as it appears on the dashboard under Settings > API Keys
    • Replace "##REPLACE_WITH_CAMPAIGN_ID##" with the spending campaign's ID with the "variable" type. You will find the campaign ID in the tail-end of the URL of the settings page for the relevant spending rule:

    L_R_Redeem2.png

{% assign stamped_key_public = shop.metafields['stamped'].api_public %}
{% if customer %}
  {% assign stamped_key_secret = shop.metafields['stamped'].api_secret %}
  {% assign stamped_customer_accepts_marketing = customer.accepts_marketing %}
  {% assign stamped_customer_email = customer.email %}
  {% assign stamped_customer_first_name = customer.first_name %}
  {% assign stamped_customer_id = customer.id %}
  {% assign stamped_customer_last_name = customer.last_name %}
  {% assign stamped_customer_orders_count = customer.orders_count %}
  {% assign stamped_customer_tags = customer.tags | join: "," %}
  {% assign stamped_customer_total_spent = customer.total_spent %}
  {% assign auth_token = customer.id | append: customer.email | hmac_sha256: stamped_key_secret %}
{% endif %}


<div id="stamped-rewards-init" class="stamped-rewards-init"
  data-key-public="{{ stamped_key_public }}"
{% if customer %}
  data-customer-accepts-marketing="{{ stamped_customer_accepts_marketing | escape }}"
  data-customer-id="{{ stamped_customer_id | escape }}"
  data-customer-email="{{ stamped_customer_email | escape }}"
  data-customer-first-name="{{ stamped_customer_first_name | escape }}"
  data-customer-last-name="{{ stamped_customer_last_name | escape }}"
  data-customer-orders-count="{{ stamped_customer_orders_count | escape }}"
  data-customer-tags="{{ stamped_customer_tags | escape }}"
  data-customer-total-spent="{{ stamped_customer_total_spent | escape }}"
  data-key-auth="{{ auth_token }}"
{% endif %}
></div>
<div id="stamped-rewards-slider-range" class="order-summary__section" style="display:none;" data-type="apply-points">
	<div id="stamped-rewards-widget" data-widget-type="rewards-redeem-variable-slider" data-campaign-id="##REPLACE_WITH_CAMPAIGN_ID##" data-max-amount="{{checkout.total_price | divided_by:100.0}}"></div>

</div>

<script> 
function myInit(){ 
	StampedFn.init({ 
		apiKey: '{{stamped_key_public}}', 
		sId: '##storeHash##' 
	}); 
} 
</script> 
<script onload="myInit()" type="text/javascript" src="https://cdn1.stamped.io/files/widget.min.js">
</script>
<link rel="stylesheet" type="text/css" href="https://cdn1.stamped.io/files/widget.min.css">




<script type="text/javascript">
  StampedFn.on('stamped:init:starting', function(data){
    if(window.location.href.indexOf("checkout") > -1 && window.location.href.indexOf("thank_you") == -1) {
        if(jQueryStamped(window).width() < 999)
        {
          jQueryStamped("[data-trekkie-id='order_summary_toggle']").click();
        }
    }
    jQueryStamped('#stamped-rewards-slider-range').insertAfter('.order-summary__section.order-summary__section--product-list');
    jQueryStamped('#stamped-rewards-slider-range').show();
  });

  StampedFn.on('stamped:rewards:redeemed', function(data){
    var selectorCodeInput = 'input#checkout_reduction_code';
    var jquery;
        if (window.jQuery) {
          jquery = window.jQuery;
        } else if (window.Checkout && window.Checkout.$) {
          jquery = window.Checkout.$;
        }
  
    var couponCode = data.detail.rewardCampaignCoupon.couponCode;
    if (couponCode){
      jquery(selectorCodeInput).val(couponCode);
      
      var i = ["focus", "keypress", "input", "blur"];
      i.forEach(function(e) {
        var n = new CustomEvent(e,{
          bubbles: !0
        });
      	jquery(selectorCodeInput).get()[0].dispatchEvent(n);
	  })

      jquery('button.field__input-btn').click();
    }
  });
</script>

To install the dropdown selection widget for fixed discounts, replace the value for the attribute data-widget-type with rewards-redeem-select-options instead.

2. In the "Checkout.liquid" theme file, insert the following codes just before the </body> tag:

{% include 'stamped-checkout-slider' %}
  • If you cannot locate the checkout.liquid file in the theme editor, you'll need to contact Shopify to enable to file to be editable
  • Any variable discount coupon redeemed through the slider widget that remains unused after 24 hours will be automatically voided

Related articles