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

  1. Open the Gift Card Hero app from your Shopify admin.
  2. Go to the Developers section in the app menu.
  3. Scroll down to the Headless mode section.
  4. Enable the toggle for Headless mode.

  5. Click Save.

Step 2: Copy Integration Code

  1. After saving, you will see a code snippet.

  2. 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>
  • [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 is en )

How to Find Your Gift Card Product ID

To retrieve the Product ID for your gift card:

  1. Go to Shopify Admin → Products.
  2. Search for your gift card product and click to open it.
  3. Look at the URL in your browser’s address bar.
  4. The number at the end of the URL is your Product ID.

    Example:

https://yourstore.myshopify.com/admin/products/1234567890 
  1. 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.