Custom coding the Gift subscriptions widget for Shopify 2.0 themes

This guide is only needed for heavily customized themes where the gifting widget must be hardcoded.

📘

Platform:

• Shopify Checkout Integration
• Migrated Shopify Checkout Integration

Before you start

🚧

Note:

Adding the Gift widget to your theme code is only necessary if you cannot access the App Block for your theme. Try accessing the Recharge gifting widget before following the instructions in this guide.

• View your Shopify theme code and check that you have a file called product.json to confirm that you are using a 2.0 theme. The product.json file only exists in Shopify 2.0 themes. Review Using Gift subscriptions with Shopify 1.0 themes 1.0 if your store is using a 1.0 theme.
• 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.

Update your Shopify theme

Add the gift widget to the main-product.liquid file to hardcode the widget into your theme. Note that your theme may use a different name for the liquid file containing your product page info.

1. Log in to your Shopify admin and select Online Store from the navigation menu. Choose Themes from the list of nested menu items.

2. Select ... next to the theme you wish to update. Select Edit code from the menu options displayed.

3. Search for the main-product.liquid file located under Sections.

4. Locate the section where your product details are displayed.

5. Add the following code block. This code is configured to only show the widget on products with the word gift in their titles. Ensure that you name your products accordingly or modify the condition to match your criteria:

   {% if product.title contains 'Gift' %}
   <form id="gift_form">
     <label for="gift_recipient_first_name">Recipient first name</label>
     <input
       id="gift_recipient_first_name"
       type="text"
       name="properties[__rc_gift_recipient_first_name]"
       required
       maxlength="50"
       pattern=".*\S+.*"
     />
   
     <label for="gift_recipient_last_name">Recipient last name</label>
     <input
       id="gift_recipient_last_name"
       type="text"
       name="properties[__rc_gift_recipient_last_name]"
       required
       maxlength="50"
       pattern=".*\S+.*"
     />
   
     <label for="gift_recipient_email">Recipient email</label>
     <input
       id="gift_recipient_email"
       type="email"
       name="properties[__rc_gift_recipient_email]"
       required
       maxlength="320"
     />
   
     <label for="gift_message">Gift message</label>
     <textarea
       id="gift_message"
       name="properties[__rc_gift_recipient_note]"
       rows="3"
       maxlength="200"
     ></textarea>
   
     <label for="gift_sender_name">Sender name</label>
     <input
       id="gift_sender_name"
       type="text"
       name="properties[__rc_gift_sender_name]"
       maxlength="50"
     />
   
     <label for="gift_notification_scheduled_at">Send gift on</label>
     <input
       id="gift_notification_scheduled_at"
       type="date"
       name="properties[__rc_gift_notification_scheduled_at]"
     />
   </form>
   {% endif %}
   

6. Use min and max values in JavaScript to keep the date picker dynamic. This ensures that the Send gift on date is always valid based on the current date and your defined maximum months in the future.

7. Save your code changes.

❗️

Warning

Avoid nested or separate forms (ie. use <form id="product_form"> instead of <form id="gift_form"> to avoid errors with validation, and the submit process. To ensure the validation works use a single form for the entire page, or just for the area where you included the code above.

The code displays the standard gift subscription without any styling. Apply inline styling or use a stylesheet to match the widget style to your theme.

📘

Note

By default Recharge deliberately hides the product's gift properties on the customer's cart page. You can remove the underscore from them proerties in the code so that they are visible in the cart (e.g., change properties[__rc_gift_recipient_first_name] to properties[rc_gift_recipient_first_name]).

Trigger validation

Use JavaScript to trigger validation methods:

• checkValidity(): Checks whether the form is valid but does not display messages.
• reportValidity(): Checks validity and displays native browser validation messages

Test the widget

Try checking out with a gift product to confirm that the widget works as intended. Confirm that the rc_gift_properties are attached to the product correctly.

After completing your test order access the recipient's customer account in Recharge to view the unredeemed gifts, to test the full redemption flow.