This guide explains how to implement Swell's out-of-the-box Buy Products With Points feature on Shopify Plus, Bigcommerce, Magento, and SalesForce Commerce Cloud.
In addition to adding the markup below, you'll need to:
- Setup a Free Product redemption option in your Swell admin.
- Copy the variant id you entered into the Free Product redemption option (via the Swell Admin), and pass it as the value for the
data-variant-idin the JS markup below.
Need help?
Learn more about offering products as redemption options.
<!-- as a div but can easily be any HTML element -->
<div
class="swell-buy-product-btn"
data-variant-id="{{ product.selected_or_first_available_variant.id }}"
data-hide-logged-out="true|false"
data-confirm-title="Are you sure?"
data-confirm-content="You currently have *|point_balance|* points available. This product costs *|amount|* points to redeem."
data-confirm-btn-text="Yes, buy it"
data-error-type="red"
data-error-title="Whoops!"
data-error-content="Looks like you don't have enough points for this product. This product costs *|amount|* points and you only have *|point_balance|* points available."
data-error-okay-text="Ok"
data-success-type="green"
data-success-title="Success!"
data-success-content="Product was successfully added to your cart"
data-success-ok-btn="Keep Shopping"
data-success-cart-btn="View Cart"
data-success-cart-link="/cart"
data-box-width="400px"
data-mobile-box-width="90%">
BUY FOR <span class="swell-buy-points"></span> POINTS
</div>
<!-- as a div but can easily be any HTML element -->
<div
class="swell-buy-product-btn"
data-variant-id="<INSERT_VARIANT_ID>"
data-hide-logged-out="true|false"
data-confirm-title="Are you sure?"
data-confirm-content="You currently have *|point_balance|* points available. This product costs *|amount|* points to redeem."
data-confirm-btn-text="Yes, buy it"
data-error-type="red"
data-error-title="Whoops!"
data-error-content="Looks like you don't have enough points for this product. This product costs *|amount|* points and you only have *|point_balance|* points available."
data-error-okay-text="Ok"
data-success-type="green"
data-success-title="Success!"
data-success-content="Product was successfully added to your cart"
data-success-ok-btn="Keep Shopping"
data-success-cart-btn="View Cart"
data-success-cart-link="/cart"
data-box-width="400px"
data-mobile-box-width="90%">
BUY FOR <span class="swell-buy-points"></span> POINTS
</div>
<!-- as a div but can easily be any HTML element -->
<div
class="swell-buy-product-btn"
data-variant-id="<INSERT_VARIANT_ID>"
data-hide-logged-out="true|false"
data-confirm-title="Are you sure?"
data-confirm-content="You currently have *|point_balance|* points available. This product costs *|amount|* points to redeem."
data-confirm-btn-text="Yes, buy it"
data-error-type="red"
data-error-title="Whoops!"
data-error-content="Looks like you don't have enough points for this product. This product costs *|amount|* points and you only have *|point_balance|* points available."
data-error-okay-text="Ok"
data-success-type="green"
data-success-title="Success!"
data-success-content="Product was successfully added to your cart"
data-success-ok-btn="Keep Shopping"
data-success-cart-btn="View Cart"
data-success-cart-link="/cart"
data-box-width="400px"
data-mobile-box-width="90%">
BUY FOR <span class="swell-buy-points"></span> POINTS
</div>
<!-- as a div but can easily be any HTML element -->
<div
class="swell-buy-product-btn"
data-variant-id="<INSERT_VARIANT_ID>"
data-hide-logged-out="true|false"
data-confirm-title="Are you sure?"
data-confirm-content="You currently have *|point_balance|* points available. This product costs *|amount|* points to redeem."
data-confirm-btn-text="Yes, buy it"
data-error-type="red"
data-error-title="Whoops!"
data-error-content="Looks like you don't have enough points for this product. This product costs *|amount|* points and you only have *|point_balance|* points available."
data-error-okay-text="Ok"
data-success-type="green"
data-success-title="Success!"
data-success-content="Product was successfully added to your cart"
data-success-ok-btn="Keep Shopping"
data-success-cart-btn="View Cart"
data-success-cart-link="/cart"
data-box-width="400px"
data-mobile-box-width="90%">
BUY FOR <span class="swell-buy-points"></span> POINTS
</div>
Note:
Make sure to pass the relevant variant id value for the
data-variant-idparameter.