> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.upsell.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # How to use the birthday collector widget on Upsell.com | Shopify The Birthday Collector exists as a widget inside Upsell.com. It is available on the **Thank You** page and **Order Status** pages. Shopify Plus merchants can also deploy the widget on the **checkout** page. ${youtube}[How to use the birthday collector widget on Upsell.com (Flow Builder) 2025 Update! | Shopify](IlzQUnY6Ygc) || Please note that some minor differences may exist between certain pages and specific widgets || If you are a Shopify Plus merchant adding the widget to Checkout, note that the customer must complete their order for the data collected to be saved (to both the order and customer metafields - see later in this article) ||| Birthdays can be saved to Shopify as both **customer metafields** and **order metafields**. You will see values after a real order is completed ### Add the birthday collector widget 1. In the Upsell.com editor **click Add widget** on the page you want to edit ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/1-addwidget_1ig1jux.png) 2. Click **Birthday Collector** ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/2-birthday-collector-widget_xgs7uc.png) 3. In **Form name**, enter a clear internal name ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/3-form-name_3eae2p.png) 4. Click **Edit text** and write the customer-facing copy * You can add hyperlinks * You can change text size and alignment * You can use bold text formatting * You can use different colors ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/4-form-name-edit-text_19ftbe2.png) ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/5-insert-text-format-etc_ouzb32.png) 5. Click **Save** in the top-right-hand corner of the screen ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/6-save_11yp2p8.png) ### Configure the date field 6. Open the birthday widget and click the **Date picker** block ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/8-click-date-picker-block_1ul43gq.png) 7. Click **Configuration** ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/9-click-config_470a60.png) 8. Set **Field name (internal)** using a consistent convention that includes page, slot, and widget, for example `checkoutpage_condition1_slot1_birthdaycollector` ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/10-enter-field-name-internal_1fcoklb.png) 9. Turn **Title** on or off ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/11-checkbox-on-off_9lukxf.png) 10. If **Title** is on, enter the title customers will see above the field ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/titletext_xkbuau.png) 11. Set the **Label** shown on the input. Include a format hint, for example `Birthday (YYYY-MM-DD)` ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/13-label-field_1v9ds3f.png) 12. Choose whether the field is **Required** ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/14-required-field_wguqpn.png) 13. If **Required** is enabled, enter **Error text** for invalid or missing input, for example `Please enter your birthday in MM/DD format` ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/15-validation-text-if-not-ente_16hk4i2.png) 14. Click **Save** in the top-right-hand corner of the screen ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/16-save_fjmc46.png) ### Store birthdays in Shopify 15. Click **Data collection** ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/17-click-data-collection_gibhda.png) 16. Tick **Store as customer metafield** to save birthdays on the customer record ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/18-save-as-customer-data-metef_2xowze.png) 17. Tick **Store as order metafield** to save birthdays on the order record ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/19-save-as-order-metafield_ambviw.png) | We would recommend keeping both of these options enabled so that the data collected appears in both the customer and order metafields 18. Click **Save** in the top-right-hand corner ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/20-save_rv399y.png) ### Configure submit and after-submit behavior 19. Click on **Submit button** ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/19-submit_1w3zfk9.png) 20. Click on **Submit** ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/20-submit_14yz0ir.png) 21. Select **Button type** (primary, secondary, or plain) ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/21-button-type_15jyz8p.png) 22. Enter the text you would like to appear on your submit button ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/22-button-text_1s554cw.png) 23. Click to go back ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/23-go-back_lqx67i.png) 24. Click on the **After submission → Text** block ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/24-after-submission-text_nzmov7.png) 25. Enter the text that you want to show to your customers upon completion. Usual formatting applies. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/25-enter-and-format-text_kntbtm.png) 26. Click on **Save** ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/26-save_hvysii.png) ### Test the widget 27. Place a real test order in your store, that triggers the page where the widget is added ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/21-make-qualifying-order-in-li_cdqlmb.png) 28. Confirm the birthday field appears as configured ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/22-check-birthday-widget-appea_y4rao.png) 29. Enter a date using either:- * ‎ ‎ ‎ ‎ the **date picker** ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/23-enter-via-date-picker-or-ma_4j3gwy.png) ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/23b-enter-via-date-picker_1wxpehl.png) * Or type a date **manually** following the required format ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/23b-manual-date_13u7veu.png) * If the format is wrong, you will see your **Error text** ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/24-validation-when-incorrect-d_1q8duvk.png) 30. Click **Submit** ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/25-submit_dfym6u.png) 31. Confirm the success or thank you message appears ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/26-thank-you-message_1wz1kht.png) ||| Shopify Plus merchants using the widget on the checkout page, please note that if the customer does not complete the purchase, any data collected in the birthday collector will not be saved or accessible. | If you are incentivizing the submission of birthdays, you may wish to state that a submission will only count as a qualifying birthday if the order is placed ### View saved birthdays in Shopify #### Customer record 32. In Shopify admin, go to **Orders** ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/27-locate-collected-birthdays-_ocfyin.png) 33. Open the customer linked to the order and click **View customer** ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/29-view-customer_13gfvpw.png) || You can also access the same record directly from **Customers** in the Shopify menu 34. Under **Metafields**, click **View all** to see the saved birthday in the customer metafield ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/30-customer-metafield_ma0is0.png) ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/31-view-metadata-in-customer_1wnwa0j.png) 35. To always show this data on the customer page by default: * Click **View definitions** ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/34-viewdefinitionscustomer_d0izvj.png) * **Pin** the relevant metafield ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/35-clickpincustomer_1vi8a10.png) * The birthday metafield will now appear **automatically** on all **customer** pages ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/36-customerpagemetafieldshowin_jhybka.png) #### Order record 36. In Shopify admin, go to **Orders** ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/32-view-metadata-in-order_16zyz2o.png) 37. Open the order that collected the birthday ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/33-click-order_7f24pg.png) 38. Under **Metafields**, click **View all** to see the saved birthday in the order metafield ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/orders-viewmetadata_10t1wg3.png) ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/35-view-birthday-in-order_br72z5.png) 39. To always show this data on the order page by default: * Click **View definitions** ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/39-orderviewdefinitions_1o6fu0w.png) * **Pin** the relevant metafield ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/40-pinorder_19ymbc7.png) * The birthday metafield will now appear **automatically** on all **order** pages ![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/41-birthdayauto_ef1dyk.png) -- ### Well, that's a wrap! If this article did not solve your issue, our support team is available for you 24/7. Just click the live chat button at the bottom-right corner of this page. | 📢 Did you know we have a YouTube channel? Don't forget to [subscribe to the channel](https://www.youtube.com/channel/UCyhFu9538WtMSUcdFERO4JA) to keep in touch with us and our news and updates | 🙏 If you find our app useful, help other merchants find it by [leaving us an honest review on the Shopify App Store](https://apps.shopify.com/reconvert-upsell-cross-sell#modal-show=ReviewListingModal)! It means the world to us | 📧 Please let us know if you spot any typos, mistakes, or omissions via: care@upsell.com