Custom Gift Card Value

Allow your customers to choose a custom value when purchasing gift cards.

Hila Butbul avatar
Written by Hila Butbul
Updated over a week ago

In this article we cover:

  1. What is the custom value option for gift cards?

  2. How to set up this up in your store.

Custom value for gift cards:

With this option, you can allow your customers to choose a custom value for gift cards, enabling even more personalization and customization in the gift card experience!

Please note:

  1. This option can be implemented on Shopify Plus stores only.

  2. The feature isn't compatible with Shopify POS.

  3. Rise uses discounts in order to enable the custom gift card value option, so in order for this feature to work seamlessly, we recommend excluding the gift card product from all discount codes.

  4. You will need a developer in order to implement this option.

Setting up the custom value option

  1. Adding the custom gift card variant:

  • Please head to your Shopify admin -> Products -> Rise gift card product.

  • In the gift card product, add a new variant and name it 'Custom Value' (or any other name you'd like to give the custom value variant).

  • Set a price for this variant. This price will be the maximum gift card value a customer will be able to purchase.

Save :)

2. Send the variant ID to our team:

Copy the variant ID from the end of the URL on the variant page in your Shopify admin.

Please send this number over to us via chat or at [email protected] so we can activate the feature on our end. Once activated you can proceed with the following steps.

3. Add scripts in 'Script Editor'

  • If you don't already have the 'Script Editor' app on your Shopify store, please install it from the Shopify app store.

  • Once installed, head to the apps section in your Shopify admin, and open the Script Editor app.

  • Here, click 'create script' on the top right hand side then in the 'Line items' section select 'Blank template'

    • If you already have a 'Line item' script, our script should work alongside your existing script, so you can simply add it there.

  • Name the script

  • Make sure that under channels make sure that "Online Store and Storefront API channels" is selected.

  • Click on the 'code' section and insert the following code above the existing code that appears in this section. Please change the YOUR_VARIANT_ID and the YOUR_PRODUCT_ID text in the code, to the variant ID you found earlier and the gift card product ID. 

Input.cart.line_items.each do |line_item|
  variant = line_item.variant
  if (variant.product.id == YOUR_PRODUCT_ID)
    if(Input.cart.discount_code)
      Input.cart.discount_code.reject(message: "Applying discounts on gift-card purchase is blocked.")
    end
    if (variant.id == YOUR_VARIANT_ID && line_item.properties.has_key?("_customAmount"))
      customAmount = line_item.properties["_customAmount"].to_f
      maxPrice = line_item.line_price
      lineItemCustomAmount = maxPrice - (maxPrice - Money.new(cents: customAmount * 100))
      line_item.change_line_price( lineItemCustomAmount * line_item.quantity , message: "gift-card amount equals to price")
end
end
end
Output.cart = Input.cart

It should look like this:

4. Add the custom value input box to your product page:

  • Please head to your Shopify admin -> Online store -> Navigate to the liquid page on which the Add to Cart button is customized. This is usually in the product-form.liquid, or product-template.liquid.

  • Above the 'Add to Cart' button's code, please insert the following snippet. Please change the 'GIFT CARD TITLE' text in the code to the tittle of your gift card product. Note that this is case sensitive according to the text you have inserted in the product title in your Shopify admin.

 {% if product.title contains "GIFT CARD TITLE" %}
<div>
  <p class="line-item-property__field">
     <label for="custom-amount">Select amount: </label>
      <input required class="required" id="custom-amount" type="number" min="1" max="999" name="properties[_customAmount]">
  </p>
</div>
{%endif%}

  • If you want to set a minimum value, you can do so through this code.

  • Please do not change the ID and name in this code!

Now the custom value option for your gift card is functional in your store. Having said that, in order to create a seamless experience there are a few more steps you need to follow.

1. Hide the custom value input box when the custom value is not selected.

When implementing the code above, the input box will appear even when the custom value is not selected. You will need to create a script that will make this input box appear only when the custom value option is selected.

2. Hide the discount information in your cart & checkout

Because Rise uses discount codes to create the custom value (essentially, creating the product as the max value you chose, and subtracting the difference using a discount code). This discount will appear in the cart and checkout, and you will need to create a script that hides it.

You can use the HIDE_ELEMENT text in the script you inserted in the 'Script Editor' to do so.

Related articles:

  1. Setting up your gift cards

  2. How customers interact with your gift cards

Got any feature requests?
Please add them to this feature request form.

Want to reach out?
Feel free to contact us at [email protected] or in the chat box

Did this answer your question?