Headless UI integration

Note: this customization require programming knowledge. You may need help from a theme developer. This isn't a supported customization.

If your headless site still uses Shopify on the backend, you can integrate Govalo with it and have your gift cards processed through our app. Below you will find the details for integrating Govalo with Shopify headless commerce.

Govalo makes it easy for merchants to create custom gifting experience because it uses native Shopify line item properties. Line item properties are used to collect custom information for an item added to the cart.

When a gift card is added to the cart, Govalo expects the following line item properties:

Property Description Format
Recipient Name The name of the person receiving the gift card Required (unless “_Send to Self”)
Recipient Email The email address for the person receiving the gift card Required (unless “_Send to Self”)
Gift Note The gift note from the sender Optional
Delivery Date The date to delivery the gift YYYY-MM-DD
_Card Image A URL to a picture of the gift card Optional
_Send To Self Indicates the gift is being sent by the customer to themself true or false
_Send Copy To Self Indicates whether the sender will also receive a copy of the gift card true or false
_Notify Sender Used to notify the sender when the gift card is redeemed true or false

* The _ prefix indicates fields that are often hidden from the Shopify checkout page.

Developers can add line item properties to the cart using the Shopify Ajax API. For example:

await fetch("/cart/add.js", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     body: JSON.stringify(
           items: [
                   quantity: 1,
                   id: 123456789, // the gift card variant ID
                   "Recipient Name": "Jane Doe",
                   "Recipient Email": "jane@example.com",
                   "Gift Note": "Happy anniversary",
                   "Delivery Date": "2022-12-28",         
                   "_Card Image": "https://some-url-to-image",
                   "_Send To Self": false,
                   "_Send Copy To Self": false,
                   "_Notify Sender": false
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us