Gift Card Pro UI Extensions

Introduction

Gift Card Pro provides UI extensions, which allow for your staff and customers to easily view the gift cards associated with an order. To leverage the extensions, you must first add them to their respective pages via the Shopify Admin.

Extension Overview:

1) Admin UI Extension

  • Added to Order page in Shopify Admin
  • Allows staff to view the gift cards associated with an order

2) Customer Account UI Extension – Order Status Page

  • Added to Customer Account storefront Order Status page
  • Allows gift card purchasing customers to view and resend the gift cards associated with their order

3) Customer Account UI Extension – Orders Page

  • Added to Customer Account storefront Order Status page
  • Allows gift card recipient customers to view the gift cards received by the email associated with their account

How to Get Started:

Admin UI Extension

1. In the Shopify Admin, access Orders and click on an order to view it

2. Scroll down to the “App Blocks” section of the Order page, which is above the order timeline

3. Click “+ App Block” and add Gift Card Pro’s “Issued Gift Cards” app block

Adding admin app block

4. Pin the App Block to ensure it is always visible on the Order page

Pinning admin app block

5. Now staff can easily view and access the gift cards associated with an order

Customer Account UI Extension

NOTE: Customer Account UI extensions are not available when using Shopify’s legacy customer accounts.

1. In the Shopify Admin, click Settings at the bottom left corner of the screen and access the “Checkout” tab

2. Click the “Customize” button beside your live checkout configuration

Accessing checkout/customer accounts editor

3. In the Checkout editor, click “Checkout” at the top center of the screen and change the selection to “Order status”

Changing to Order status editor view

4. On the Order status page, select “Sections” at the top left of the page, click the “Add app block” button under “Order details” and select Gift Card Pro’s “Gift Card Status” app block

Adding Order status page app block

5. Save your Order status page configuration

Example: Order status page app block in customer accounts

6. Next, change the page selection to “Orders”

Changing to Orders page editor view

7. On the Orders page, select “Sections” at the top left of the page, click the “Add app block” button under “Order list” and select Gift Card Pro’s “Gift Card Status” app block

Add Orders page app block

8. Save your Orders page configuration

Example: Orders page app block in customer accounts

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