Layout Option: Custom Purchase Flow
Whether you use the Shopify online store, or have a completely unique storefront, you can leverage Gift Card Pro’s delivery and scheduling tools within your own user interface. Any product can be used to issue a gift card with Gift Card Pro, so long as it contains the same properties added by the application using the standard form.
If you are using the Shopify online store, we recommend doing installation on a separate duplicate theme. Once changes are successfully made, the theme can then be published to apply those changes to your storefront.
Start by creating a new product to be used as your gift card. This product only needs to have the product type “Gift-Card-Pro” to function with the additional fields.
Learn more about gift card products and Shopify gift cards
As a part of the installation, two additional snippets will need to be added to your theme.
- gift-card-pro-form.liquid
- gift-card-pro-form.js
These snippets can be acquired from the Gift Card Pro Custom Form Snippet GitHub repository.
gift-card-pro-form.liquid should be added to your theme as a snippet. create a new snippet named gift-card-pro-form.liquid and copy the contents in.
gift-card-pro-form.js should be added to your theme as an asset. This can be uploaded or copied into a new asset named gift-card-pro-form.js
Make sure the snippets are added correctly now to avoid issues later on.
Find the add to cart button in your product template. It should look similar to this:
Next add the following liquid directly above your add to cart button, this should give your product all the required properties to create a gift card.
{% if product.type == "Gift-Card-Pro" %} {% render 'gift-card-pro-form' %} {% endif %}
Once an order is created in Shopify, Gift Card Pro will look for the properties in the item, and issue a gift card. If the “_gcp_delivery_time” property is set to “Send Later”, and a delivery date is selected, the Gift Card will be scheduled for that particular date and time.
If an error appears instead of the fields, please make sure gift-card-pro-form.liquid and gift-card-pro-form.js have been added to your theme correctly, and that the liquid tag rendering it is valid.
Once you have completed the order, the line item in Shopify should contain all of the properties added in the form:
To hide any “hidden” line item properties, please refer to the article Preventing “Hidden” Line Item Properties from Displaying on Your Store.