How to add a "Reused Packaging Option" at checkout using Shopify

I customized Shopify's "Gift Wrap Option" tutorial so it's easier to follow if you want to use it for the specific purpose of giving customers a reused packaging option at checkout! Enjoy!

Step 1: Create a "Reused Packaging" product

1. Create a product named Reused Packaging, just as you would create any other product.

2. Make sure you uncheck "Track quantity" under Inventory.

3. (Optional) Add an image and description.

Step 2: Create a menu

1. From your Shopify admin, go to Online Store > Navigation > Add menu.

2. Name your menu Reused Packaging so that the handle assigned to the menu is reused-packaging

3. Click Add menu item

4. Name the menu item Reused Packaging and select the Reused Packaging product from the drop-down menu in the Link field.

5. Click Save menu

Step 3: Create a Code Snippet

1. From your Shopify admin, go to Online Store > Themes > ... > Edit Code

2. In the Snippets directory, click Add a new snippet.

3. Name your snippet reused-packaging and click Create snippet.

4. Paste the code below:

{% if linklists.reused-packaging.links.size > 0 and
linklists.reused-packaging.links.first.type == 'product_link' %}

<div
 id="is-reusedpackage"
 style="clear: left; margin: 30px 0"
 class="clearfix rte"
>
 <p>
 <input
 id="reused-packaging"
 type="checkbox"
 name="attributes[reused-packaging]"
 value="yes"
 {% if cart.attributes.reused-packaging %}
 checked="checked"
 {% endif %}
 style="float: none"
 />
 <label
 for="reused-packaging"
 style="display:inline; padding-left: 5px; float: none;"
 >
 I don't mind re-used packaging! 
 </label>
 </p>
</div>

{% assign id = linklists.reused-packaging.links.first.object.variants.first.id
%} {% assign reusedpackages_in_cart = 0 %} {% for item in cart.items %} {% if
item.id == id %} {% assign reusedpackages_in_cart = item.quantity %} {% endif %}
{% endfor %}

<style>
 #updates_{{ id }} { display: none; }
</style>

<script>

 Shopify.Cart = Shopify.Cart || {};

 Shopify.Cart.ReusedPackage = {};

 Shopify.Cart.ReusedPackage.set = function() {
 var headers = new Headers({ 'Content-Type': 'application/json' });

 var request = {
 method: 'POST',
 headers: headers,
 body: JSON.stringify({ updates: { {{ id }}: 1 }, attributes: { 'reused-packaging': true } })
 };
 fetch('/cart/update.js', request)
 .then(function() {
 location.href = '/cart';
 });
 }

 Shopify.Cart.ReusedPackage.remove = function() {
 var headers = new Headers({ 'Content-Type': 'application/json' });

 var request = {
 method: 'POST',
 headers: headers,
 body: JSON.stringify({ updates: { {{ id }}: 0 }, attributes: { 'reused-packaging': '', 'note': '' } })
 };
 fetch('/cart/update.js', request)
 .then(function() {
 location.href = '/cart';
 });
 }

 // If we have nothing but reused-package items in the cart.
 {% if cart.items.size == 1 and reusedpackages_in_cart > 0 %}
 document.addEventListener("DOMContentLoaded", function(){
 Shopify.Cart.ReusedPackage.remove();
 });
 // If we have more than one reused-package item in the cart.
 {% elsif reusedpackages_in_cart > 1 %}
 document.addEventListener("DOMContentLoaded", function(){
 Shopify.Cart.ReusedPackage.set();
 });
 // If we have a reused-package item in the cart but our reused-packaging cart attribute has not been set.
 {% elsif reusedpackages_in_cart > 0 and cart.attributes.reused-packaging == blank %}
 document.addEventListener("DOMContentLoaded", function(){
 Shopify.Cart.ReusedPackage.set();
 });
 // If we have no reused-package item in the cart but our reused-packaging cart attribute has been set.
 {% elsif reusedpackages_in_cart == 0 and cart.attributes.reused-packaging != blank %}
 document.addEventListener("DOMContentLoaded", function(){
 Shopify.Cart.ReusedPackage.set();
 });
 {% endif %}

 // When the reused-packaging checkbox is checked or unchecked.
 document.addEventListener("DOMContentLoaded", function(){
 document.querySelector('[name="attributes[reused-packaging]"]').addEventListener("change", function(event) {
 if (event.target.checked) {
 Shopify.Cart.ReusedPackage.set();
 } else {
 Shopify.Cart.ReusedPackage.remove();
 }
 }); 
 });
</script>

{% else %}

<p style="clear: left; margin: 30px 0" class="rte">
 You attempted to add a reused-packaging script to your shopping cart, but it
 won't work because you don't have a link list with handle
 <code>reused-packaging</code> which, in turn, contains a link to your
 reused-packaging product. Please review the steps outlined
 <a
 href="https://www.sugarplumpaper.ca/blogs/studio-bulletin/how-to-add-a-re-used-packaging-option-at-checkout-using-shopify"
 target="_blank"
 rel="noopener noreferrer nofollow"
 >here</a
 >.
</p>

{% endif %}  

 5. Save.

Step 4: Run the code on your checkout page!

1. Find the code that runs the cart page of your shop. It could be in either of the following places depending on your template:

• Sections > cart-template.liquid
• Sections > main-cart-items.liquid
• Templates  > cart.liquid

2. Find the closing </form> tag in the code and add the following line right above it:

{% render 'reused-packaging' %}

3. Save.

Source: https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-gift-wrap-option