Layout Option: Traditional Product Page
This layout option provides the customer the option to put together their gift card on a traditional product page.
To use this option, go to Gift Card Pro –> Configuration –> Appearance Settings –> and then choose Match Your Theme in the Form Theme.
Here is a preview of how it will look on your store:
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:
- Ensure the application is being embedded correctly
- 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.