Creating Donation Product (with Desired Amount option) in SIMPLE Theme

[Aaron_I]

I am very new to .liquid (Ruby) coding and have just started a store that requires customer enter their own amount on a donation product (not in the cart). I found this tutorial online (https://byaman.com/creating-donation-product-desired-amount-option-shopify) but it was written 4 years ago for the timber theme [which is no longer supported or available by Shopify].

Today I’ll be demonstrating how to create Donation product in shopify which will have option to add desired donation amount. To accomplish this we’ll create a donation product with different variants (with single option “Amount”) each variant will have different price. And we’ll create a product template product.donation.liquid and assign this template to the newly created product. and we’ll make small changes to cart page template (to hide quantity selector and price option for variant).

Here is the demo.

I am not sure how to apply this to the SIMPLE theme that I am using so any suggestions on translating/re-writing the code would be helpful. Thanks in advance.

------------------------------------------------------------------------------------------------------------

Here are the implementation steps.

[You can also check the final code files on github: https://github.com/amandeepsinghvirdi/donation-product-shopify]

Step 1: Create donation product with different variants. See the picture below:

Step 2: Create a new product template (product.donation.liquid) and then assign it to newly created product.

Step 3:I am using timber framework for example. Open Product template and try to locate this code

1 2 3 4 5

<label for="Quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}</label>  <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">  <button type="submit" name="add" id="AddToCart" class="btn">    <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span> </button>

and then replace the above code with this one.

1 2 3 4 5 6 7 8 9 10 11 12 13

<!-- End: Donation Product Starts -->  <div id="other-amount" style="display:none;">    <label for="OtherAmount">Enter Amount:</label>    <input type="text" id="OtherAmount"  />  </div>  <input type="hidden" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector" />    <div id="addto-cart-wrap">      <button type="submit" name="add" id="AddToCart" class="btn">        <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>      </button>    </div> <!-- End: Donation Product Code -->

Step 4: Now try to locate OptionSelectors callback function. Which looks like this:

1 2 3 4 5 6 7

var selectCallback = function(variant, selector) {     timber.productPage({       money_format: "{{ shop.money_format }}",       variant: variant,       selector: selector     });   }; // selectCallback Ends

and replace it with this one:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

var selectCallback = function(variant, selector) {   timber.productPage({     money_format: "{{ shop.money_format }}",     variant: variant,     selector: selector   });   // Donation Product Code Starts   variantName = (variant.title).toLowerCase();      if(variantName == 'other'){       $('#other-amount').show(0);       $('#OtherAmount').prop('required', true).val('');       $('#ProductPrice').hide(0);   } else {       $('#other-amount').hide(0);       $('#OtherAmount').prop('required', false).val('');       $('#Quantity').val(1)       $('#ProductPrice').show(0);   }      // Donation Product Code Ends    }; // selectCallback Ends

Above code will try to match “other” variant every time a variant is changed. And if its found then it will show up a text box to enter the desired amount.

Step 5: Now put this js code under document ready function. This code will update the pricing and quantity box. “Other Variant” has pricing as 1. So when someone will enter desired amount, we’ll update the product quantity and also show the price.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// Donation Product Code Starts     $('#OtherAmount').keyup(function(){         console.log($(this).val());         otherAmountValue = $(this).val();           if(otherAmountValue == 0){             alert('Please enter some value');             $(this).val('');             return false;           }         AmountPriceFormat = '$'+otherAmountValue;         $('#Quantity').val(otherAmountValue);         $('#ProductPrice').show(0).text(AmountPriceFormat);     }); // Donation Product Code Ends

Step 6 (optional): If you want to hide your quantity and donation product price on cart page then follow this step. Try to locate this code in cart.liquid template.

1 2 3 4 5 6 7 8

<td data-label="{{ 'cart.label.price' | t }}">   <span class="h3">     {{ item.price | money }}   </span> </td> <td data-label="{{ 'cart.label.quantity' | t }}">   <input type="number" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="0"> </td>

and replace it with this one:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<!-- Donation Products Code Stars -->             {% if item.url contains 'donation-product' %}               <td data-label="{{ 'cart.label.price' | t }}"></td>               <td data-label="{{ 'cart.label.quantity' | t }}"></td>                        {% else %}             <td data-label="{{ 'cart.label.price' | t }}">               <span class="h3">                 {{ item.price | money }}               </span>             </td>             <td data-label="{{ 'cart.label.quantity' | t }}">               <input type="number" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="0" />             </td>                        {% endif %}     <!-- Donation Products Code Ends -->

And thats it.

[sacred-simona]

I created a new snippet (a new HTML Code which is a Donate button for PayPal) in my theme's coding. The steps I did are: I went to the Online Store on the left of the admin, then clicked on Actions of the right of the page. From there, a dropdown opened and I clicked on Edit.

But now how do I add the snippet to my home page?

[Dan_GRHF]

Hey @Aaron_I 

Are you a shopify expert? Do you offer services to other stores. I was looking at your code and unfortunately haven't been able to figure out how to modify it for my needs. 

We are a non-profit and would love to offer this option on our site.

If you can help at all let me know. Thought i would ask you since it is your code before looking for another shopify expert.

Thanks

[mfelling]

@Aaron_I did you ever solve this? I am a director of a non-profit that needs a donation button to type in any amount donor wants on a donation product page or as part of a donation product template. Seems straightforward to replace price with a box and hide the quantity selection?

[Aaron_I]

@mfelling- Yes we did. I am not a .liquid or shopify expert and ended up hiring a 3rd shopify expert to create a custom donation product for our site (Based on the coding I found above). I was sure there would be a least one theme out there that delivered this as out of the box option but I am yet to find one. Unfortunately, as its just another "product" it acts much the same as a t-shirt or shoe item and customising is very limited without engaging additional 3rd party help. If you change theme you have to rebuild the customisation so that is a downside. Good Luck.

[Aaron_I]

@Dan_GRHFNo I am not a shopify expert. I couldn't figure out the above code either and had to engage a 3rd party shopify expert.