Headless integration
Gift Card Hero supports headless Shopify integrations, allowing you to embed gift card features into custom storefronts. Follow the steps below to enable and configure it.
Step 1: Enable Headless Mode
- Open the Gift Card Hero app from your Shopify admin.
- Go to the Developers section in the app menu.
- Scroll down to the Headless mode section.
Enable the toggle for Headless mode.
- Click Save.
Step 2: Copy Integration Code
After saving, you will see a code snippet.
- Click Copy to clipboard.
Step 3: Add the Code to Your Headless Template
Paste the copied code into your headless store’s template. Then, replace the following placeholders with actual values from your store:
[MONEY_FORMAT]
— Your store’s money format- Example:
<span class="money">${{amount}}</span>
- Example:
[PRODUCT_ID]
— The Product ID of your gift card product[MYSHOPIFY_DOMAIN]
— Your*.myshopify.com
store address[ADD_TO_CART_CALLBACK]
— JavaScript function that adds items to cart (the app provides item data)[LOCALE]
— Your store’s locale (default isen
)
How to Find Your Gift Card Product ID
To retrieve the Product ID for your gift card:
- Go to Shopify Admin → Products.
- Search for your gift card product and click to open it.
- Look at the URL in your browser’s address bar.
The number at the end of the URL is your Product ID.
Example:
https://yourstore.myshopify.com/admin/products/1234567890
- In this example,
1234567890
is your product ID.
Once you replace all placeholders with correct values, Gift Card Hero will be fully functional on your headless store.