Layout Option: Headless

Introduction

Gift Card Pro is fully compatible with Shopify’s headless environments. Whether you’re using Hydrogen, Next.js, or another frontend framework, Gift Card Pro can still generate and deliver digital gift cards—as long as the required data is passed through the checkout.

In traditional setups, Gift Card Pro handles form rendering and logic through a proxy page. In a headless implementation, you’ll bypass this and instead collect the required data on your frontend, then pass it as line item properties when creating the cart or checkout.

How It Works

When Gift Card Pro is first enabled, it creates a base product in your Shopify admin with variants for each gift card amount. In a standard setup, customers are redirected to a hosted proxy page where they complete the gift card form. Once submitted, all form data—like recipient name, email, message, delivery time, etc.—is attached to the cart as hidden line item properties.

In headless environments, you must replicate this logic manually and ensure the correct line item properties are included when the product is added to the cart.

Sample line item properties:

_gcp_recipient_name  
_gcp_recipient_email  
_gcp_recipient_phone  
_gcp_message_text
_gcp_delivery_time  
_gcp_selected_card_image

For a complete list of supported properties, refer to the official snippet:
Gift Card Pro Form Snippet – GitHub

Delivery and Notifications

Once an order is placed, Gift Card Pro scans the line item properties and generates the appropriate gift card using Shopify’s API. Gift card delivery can be handled in one of two ways:

• Using our built-in email system, customizable from within the Gift Card Pro admin.
• Triggering external email flows (e.g., Klaviyo) via Shopify order webhooks or custom logic.

Support

If you have questions or need help testing or validating your integration, reach out to our team. We’re happy to assist with code reviews, API guidance, and ensuring your headless setup is fully compatible with Gift Card Pro.

Let me know if you’d like to include an example API mutation for adding the gift card to the cart with properties.