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
properties:{
"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
}
}
]
})
});