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:

• Recharge Checkout on Shopify
• 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. Add the following code to the product form {%- form 'product', product, data-productid: product.id, id: product_form_installment_id, class: 'installment caption-large' -%}:

{% if product.title contains 'Gift' %}
                  <p class="line-item-property__field">
                   <label for="sender-name">Your name</label><br>
                    <input id="sender-name" form="{{ product_form_id }}" type="text" name="properties[__rc_gift_sender_name]"><br><br>

                    <label for="your-name">Recipient First Name</label><br>
                    <input id="your-name" form="{{ product_form_id }}" type="text" name="properties[__rc_gift_recipient_first_name]"><br><br>
                                      <label for="your-lastname">Recipient Last Name</label><br>
                    <input id="your-lastname" form="{{ product_form_id }}" type="text" name="properties[__rc_gift_recipient_last_name]"><br><br>
                                      <label for="youremail">Recipient Email</label><br>
                    <input id="youremail" form="{{ product_form_id }}" type="text" name="properties[__rc_gift_recipient_email]"><br><br>
                                      <label for="giftnote">Gift note</label><br>
                    <textarea id="giftnote" form="{{ product_form_id }}" type="text" name="properties[__rc_gift_recipient_note]"></textarea><br><br>
                                      <label for="datepick">When do you want to notify them?</label><br>
                    <input id="datepick" form="{{ product_form_id }}" 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 %}

5. Save your code changes.

The code above contains conditional logic to only display the code when product.titleis gift. You may need to change this depending on your product setup.

The code provided does not have any styling applied, and displays the standard gift subscription:

Apply inline styling, or use a stylesheet, to match the widget style to your theme. For example, you could use the following code to change the color and size of the widget's textboxes, as well as the font:

{% if product.title contains 'Gift' %}
  <p class="line-item-property__field">
    <label for="sender-name" style="font-weight: bold;">Your name</label><br>
    <input id="sender-name" form="{{ product_form_id }}" style="width: fit-content; min-width: 150px; background-color: #f0f0f0; padding: 5px; border: 1px solid darkgray; border-radius: 5px;" type="text" name="properties[__rc_gift_sender_name]"><br><br>

    <label for="your-name" style="font-weight: bold;">Recipient First Name</label><br>
    <input id="your-name" form="{{ product_form_id }}" style="width: fit-content; min-width: 150px; background-color: #f0f0f0; padding: 5px; border: 1px solid darkgray; border-radius: 5px;" type="text" name="properties[__rc_gift_recipient_first_name]"><br><br>

    <label for="your-lastname" style="font-weight: bold;">Recipient Last Name</label><br>
    <input id="your-lastname" form="{{ product_form_id }}" style="width: fit-content; min-width: 150px; background-color: #f0f0f0; padding: 5px; border: 1px solid darkgray; border-radius: 5px;" type="text" name="properties[__rc_gift_recipient_last_name]"><br><br>

    <label for="youremail" style="font-weight: bold;">Recipient Email</label><br>
    <input id="youremail" form="{{ product_form_id }}" style="width: fit-content; min-width: 150px; background-color: #f0f0f0; padding: 5px; border: 1px solid darkgray; border-radius: 5px;" type="text" name="properties[__rc_gift_recipient_email]"><br><br>

    <label for="giftnote" style="font-weight: bold;">Gift note</label><br>
    <textarea id="giftnote" form="{{ product_form_id }}" style="width: fit-content; min-width: 150px; background-color: #f0f0f0; padding: 5px; border: 1px solid darkgray; border-radius: 5px;" type="text" name="properties[__rc_gift_recipient_note]"></textarea><br><br>

    <label for="datepick" style="font-weight: bold;">When do you want to notify them?</label><br>
    <input id="datepick" form="{{ product_form_id }}" style="width: fit-content; min-width: 150px; background-color: #f0f0f0; padding: 5px; border: 1px solid darkgray; border-radius: 5px;" 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 %}

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.

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