Using Gift subscriptions with Shopify 1.0 themes

This guide covers how you can update your Shopify 1.0 theme to work with Gift subscriptions.

📘

Platform:

• Recharge Checkout on Shopify
• Shopify Checkout Integration

Before you start

• Gift subscriptions are currently available to stores on the Recharge Pro plan or a custom pricing plan and can only be used on the Affinity customer portal theme or custom themes. 
• This guide only applies to merchants using Shopify 1.0 themes.
  • If you are using a Shopify 2.0 theme, you likely do not need to custom code the widget. Adding the Gift Widget to a 2.0 theme code is only necessary if your theme is heavily customized. Try accessing the Recharge gifting widget before hardcoding the widget.
• This guide requires custom code and is not supported by Recharge as per the design and integration policy. If you require further assistance, work with a third-party developer.

Customize the product template

Gift customer data is only created after you've configured the product correctly in Recharge as a gift product. Follow the instructions outlined in the Gift subscriptions to configure a product as a gift.

To customize the product template:

1. In your Shopify theme, open the product template file (product-template.liquid).
2. Locate the section where your product details are displayed. You’ll need to ensure this code is within the form and endform.
3. This code is set up to conditionally show the code block on products that have the title "Gift." Ensure that you name your products accordingly or modify the condition to match your criteria:

{% if product.title contains 'Gift' %}
<p class="line-item-property__field">
<label for="your-name">Recipient First Name</label><br>
<input id="your-name" type="text" name="properties[__rc_gift_recipient_first_name]"><br><br>
<label for="your-lastname">Recipient Last Name</label><br>
<input id="your-lastname" type="text" name="properties[__rc_gift_recipient_last_name]"><br><br>
</p>
<p class="line-item-property__field">
<label for="youremail">Recipient Email</label><br>
<input id="youremail" type="text" name="properties[__rc_gift_recipient_email]"><br><br>
</p>
<p class="line-item-property__field">
<label for="giftnote">Gift note</label><br>
<textarea id="giftnote" type="text" name="properties[__rc_gift_recipient_note]"></textarea><br><br>
</p>
<p class="line-item-property__field">
<label for="sender-name">Your name</label><br>
<input id="sender-name" type="text" name="properties[__rc_gift_sender_name]"><br><br>
</p>
<p class="line-item-property__field">
<label for="datepick">When do you want to notify them?</label><br>
<input id="datepick" type="date" placeholder="dd-mm-yyyy" value="" min="2023-01-01" max="2030-12-31" name="properties[__rc_gift_notification_scheduled_at]"><br><br>
</p>
{% endif %}

Customize the cart template

To customize the cart template:

1. In your Shopify theme, open the cart template file (cart-template.liquid).
2. Within the cart template, locate the {% for item in cart.items %} loop. This loop iterates through the items in the shopping cart.
3. After the block that displays {{ item.product.title }}, add the following code:

<p>Notify Date: {{ item.properties['__rc_gift_notification_scheduled_at'] }}</p>
<p>Sender Name: {{ item.properties['__rc_gift_sender_name'] }}</p>
<p>Gift Note: {{ item.properties['__rc_gift_recipient_note'] }}</p>
<p>Recipient Email: {{ item.properties['__rc_gift_recipient_email'] }}</p>
<p>Recipient First Name: {{ item.properties['__rc_gift_recipient_first_name'] }}</p>
<p>Recipient Last Name: {{ item.properties['__rc_gift_recipient_last_name'] }}</p>

Test the functionality

To test the gift subscriptions functionality:

1. After adding both code blocks, test gift subscriptions functionality by going to a gift product on your store. The inputs in the following image should display on your gift product. If the fields are not displaying, ensure that you have "Gift" in your product title.

   

2. Fill out the field, add the gift item to the cart, and view your cart. Line item properties should display, though the appearance may vary depending on the theme in use. The example theme used is Debut.

   

3. After the order is processed, the line item properties should be attached to the order in Shopify.

4. If the product was correctly set up as a gift product within Recharge, you should see the unredeemed gift in Recharge which will be attached to the new customer (gift recipient). You can click Actions, then select Redemption link to test the full recipient flow.