Using Your Theme’s Product Form with Gift Card Pro

Gift Card Pro offers the ability to embed the applications purchase form directly into your themes product form, ensuring a consistent purchase experience with other products. Some considerations must be made when choosing this option, as to ensure that everything functions correctly.

The following verifications steps should be completed prior to going live:

  1. Ensure the application is being embedded correctly
  2. Ensure that the product form is being submitted by your theme correctly

Getting Started

To embed the application in your product form, navigation to Shopify Admin -> Apps -> Gift Card Pro -> Configuration -> Appearance, and enable the option to “Match your theme”, then click save. This will update the product that Gift Card Pro creates to ensure that it does not redirect to the proxy page purchase form located at https://yourstore.com/a/gc/gift-card/. If the product page is still redirecting back, please ensure to press the save button an additional time.

Ensure the application is being embedded correctly

Navigate to the applications home page by going to Shopify Admin -> Apps -> Gift Card Pro, and find the link to the purchase form. This will now be a direct link to the product page. Click on the link, and make sure that the form appears like the screenshot at the top of this article. If the application is not loading, please manually add the following code directly above your add to cart button in your Shopify theme.

<div class="giftCardPro"></div>

Reload the page, and verify that the application has now loaded.

Ensure the form is submitting correctly

Now that the form is loading correctly, please ensure that all of the details are being submitted to the cart. If you have installed your cart properties snippets, you will see all of the details of the gift card directly beneath the product title.

If you do not see these properties, you can verify that everything is working correctly by placing a test order, or by viewing your cart.json data at https://{yourstore}.myshopify.com/cart.json. The highlighted values in the below screenshot should be present in your cart data after it has added to the cart. If your cart item properties are empty, your product form must be fixed to ensure compatibility with this feature. Please ensure that your theme uses the Javascript FormData API to submit your product form, as this will ensure full compatibility with all applications and services.

Customizing with Javascript and the Gift Card Pro Event API

Should you want to customize the behaviour of the product form, automate the population of values, or otherwise interact with the form programatically, Gift Card Pro offers an Events API to allow you to run custom scripts based on certain actions taken within the purchase form. This works for all purchase form themes, including embedding directly in your Shopify theme.

More details can be found in our Javascript API ⚒️ documentation.

Creating a Completely Bespoke Purchase Form

If embedding the form directly does not provide quite enough flexibility for you, it is possible to create a completely bespoke purchase experience, while leveraging Gift Card Pro’s delivery tools. Development knowledge is required, and extra precautions must be taken to ensure all required and conditionally required fields are inserted.

More details can be found in our Creating a Custom Purchase Flow ⚒️ article.

Can't find the answer in our documentation?
Contact Support