# Share barcodes via Shopify notifications

Embed customer IDs using the [Liquid template language](https://shopify.dev/api/liquid) 

To send barcodes via automated Shopify notifications, edit your existing [Shopify notification template(s)](https://help.shopify.com/en/manual/orders/notifications/edit-template). Similarly, place the barcodes on your website by editing its [theme code](https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code).

{% hint style="info" %}
The guide requires some basic understanding of HTML and Liquid.
{% endhint %}

{% hint style="danger" %}
Please don't confuse [Shopify Notifications with Shopify Email](https://community.shopify.com/c/shopify-discussions/shopify-email-versus-notifications/m-p/2379388). If you wish to send barcodes via a bulk email campaign, [check out instructions for Shopify Email](https://galmis.gitbook.io/barcodify-customer-selector/getting-started/share-app-generated-barcodes-with-customers/share-barcodes-via-bulk-messaging-services).
{% endhint %}

## Share a plain Code 128 (1D barcode) image

Include the following snippet to your selected Liquid template. 

```liquid
<img src="https://select-customer-barcode-prod.herokuapp.com/public-api/v1/barcodes/code128/{{shop.permanent_domain}}/{% if customer.id %}{{customer.id}}{% else %}{{'orders/' | append: order.id}}{% endif %}" />
```

## Share a plain QR code (2D barcode) image

Include the following snippet to your selected Liquid template.&#x20;

```liquid
<img src="https://select-customer-barcode-prod.herokuapp.com/public-api/v1/barcodes/qr/{{shop.permanent_domain}}/{% if customer.id %}{{customer.id}}{% else %}{{'orders/' | append: order.id}}{% endif %}" />
```

## Share the "Add to Apple Wallet" button

Add the following snippet to share the "Add to Apple Wallet" button with the Apple pass download link.

```liquid
<a download href="https://select-customer-barcode-prod.herokuapp.com/public-api/v1/wallet/apple/{{shop.permanent_domain}}/{% if customer.id %}{{customer.id}}{% else %}{{'orders/' | append: order.id}}{% endif %}"> <img src="https://barcodify-prod.s3.amazonaws.com/public/add-to-apple-wallet/Add_to_Apple_Wallet_rgb_US-UK.png" /> </a>
```

To localise the text of the "Add to Apple Wallet" button, replace `Add_to_Apple_Wallet_rgb_US-UK.png` with the selected language's file name in the snippet above. To see available localisations, download [localised images](https://barcodify-prod.s3.amazonaws.com/public/add-to-apple-wallet/add-to-wallet-localised-images.zip). For more information, check the [Add to Apple Wallet Guidelines](https://developer.apple.com/wallet/add-to-apple-wallet-guidelines/).

## Share the "Add to Google Wallet" button

Add the following snippet to share the "Add to Google Wallet" button with the Google pass link.

```liquid
<a href="https://select-customer-barcode-prod.herokuapp.com/public-api/v1/wallet/google/{{shop.permanent_domain}}/{% if customer.id %}{{customer.id}}{% else %} {{'orders/' | append: order.id}}{% endif %}"> <img src="https://barcodify-prod.s3.amazonaws.com/public/add-to-google-wallet/enUS_add_to_google_wallet_add-wallet-badge.png" /> </a>
```

To localise the text of the "Add to Google Wallet" button, replace `enUS_add_to_google_wallet_add-wallet-badge.png` with the selected language's file name in the snippet above. To see available localisations, download [localised images](https://barcodify-prod.s3.amazonaws.com/public/add-to-google-wallet/add-to-wallet-localised-images.zip). For more information, check the [Add to Google Wallet Guidelines](https://developers.google.com/wallet/generic/resources/brand-guidelines).

## Other use cases

Since barcodes are dynamically generated, you can embed any information. For example, you may want to pair QR codes with customer orders for local pick-up validation, legal requirements, etc.

Embed an order id instead of a customer id and use a second scanner in the search menu of Shopify POS (very top of the smart grid).&#x20;

```liquid
<img src="https://select-customer-barcode-prod.herokuapp.com/public-api/v1/barcodes/qr/{{shop.permanent_domain}}/{{order.id}}" />
```

Embed a link to the order "Thank you" page.

```liquid
<img src="https://select-customer-barcode-prod.herokuapp.com/public-api/v1/barcodes/qr/{{shop.permanent_domain}}/{{order_status_url | url_encode}}" />
```

Embed a link to the order admin page.

```liquid
<img src="https://select-customer-barcode-prod.herokuapp.com/public-api/v1/barcodes/qr/{{shop.permanent_domain}}/{{shop.permanent_domain | append: "/admin/orders/" | append: order.id | url_encode}}" />
```

Embed a link to the draft order admin page

```liquid
<img src="https://select-customer-barcode-prod.herokuapp.com/public-api/v1/barcodes/qr/{{shop.permanent_domain}}/{{shop.permanent_domain | append: "/admin/draft_orders/" | append: id | url_encode}}" />
```

Display barcodes to selected customers (e.g. based on a tag value)

```liquid
{% if customer.tags contains 'YOUR_TAG_VALUE' %}
    PASTE BARCODIFY CODE SNIPPET HERE 
{% endif %}
```

## Examples

If you wish your newly activated customer to receive his/her unique barcode automatically, edit the "Customer account welcome" template. For example, you could include the image after the *"You've activated your customer account. Next time you shop with us, log in for faster checkout."* message.

Before:

```liquid
<h2>{{ email_title }}</h2>
<p>{{ email_body }}</p>
```

<figure><img src="https://1376568054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9rBqY6UYwTDjKCP2k2QI%2Fuploads%2Fsu3i23R0lS0w2VFdO74y%2Fimage.png?alt=media&#x26;token=3f1897c4-950b-49f8-9f34-fdb964f1f53e" alt=""><figcaption></figcaption></figure>

### QR code

```liquid
<h2>{{ email_title }}</h2>
<p>{{ email_body }}</p>
<img src="https://select-customer-barcode-prod.herokuapp.com/public-api/v1/barcodes/qr/{{shop.permanent_domain}}/{{customer.id}}" />
```

<figure><img src="https://1376568054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9rBqY6UYwTDjKCP2k2QI%2Fuploads%2FGEDJAE7w3JXDE8lHNsPG%2Fimage.png?alt=media&#x26;token=1f010b9b-b068-4457-a04a-b0d40311b01c" alt=""><figcaption></figcaption></figure>

#### Wallet buttons with QR code and custom text

```liquid
            <h2>{{ email_title }}</h2>            
            <p>{{ email_body }}</p>            

            {% comment %}
              BARCODIFY CODE, DELETE BELOW IF UNINSTALLED
            {% endcomment %}
<p>This is your custom text</p>
            <table class="row actions">
              <tr>
            <div style="margin-left: -12px;">      
              <img src="https://select-customer-barcode-prod.herokuapp.com/public-api/v1/qrcodes/{{shop.permanent_domain}}/{{customer.id}}">
            </div>
            <div>
      <a
        download
        href="https://select-customer-barcode-prod.herokuapp.com/public-api/v1/wallet/apple/{{shop.permanent_domain}}/{{customer.id}}"
      >
        <img
          style="height: 42px;"
          src="https://barcodify-prod.s3.amazonaws.com/public/add-to-apple-wallet/Add_to_Apple_Wallet_rgb_US-UK.png"
        >
      </a>
              <a href="https://select-customer-barcode-prod.herokuapp.com/public-api/v1/wallet/google/{{shop.permanent_domain}}/{{customer.id}}">
        <img
          style="height: 42px;"
          src="https://barcodify-prod.s3.amazonaws.com/public/add-to-google-wallet/enUS_add_to_google_wallet_add-wallet-badge.png"
        >
      </a>
            </div>
              </tr>  
            </table> 
            {% comment %}
              BARCODIFY CODE, DELETE ABOVE IF UNINSTALLED
            {% endcomment %}
```

<figure><img src="https://1376568054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9rBqY6UYwTDjKCP2k2QI%2Fuploads%2FVj4fN4LqUgUNqFu3mZs9%2Fimage.png?alt=media&#x26;token=c8c99b0e-9fa5-4d5d-ae4b-83a2122ddcc7" alt=""><figcaption></figcaption></figure>

Similarly, you could add a barcode image to other templates, such as

* "Contact customer" - if you wish to email the QR code to the selected customer manually. Unfortunately, bulk email functionality is not supported.
* "POS and mobile receipt" - if you wish to email a barcode in a POS receipt.

and others...

## Testing

To test, I recommend creating a fake customer and invoking real Shopify notifications. Why?

1. Liquid template variables, e.g. {{shop.permanent\_domain}} are replaced by Shopify. Sending the code snippets from this guide via email manually will not work - Liquid variables will not be replaced with the underlying values and you should see the "Expected a valid Shopify query parameter" (the app would "see" {{shop.permanent\_domain}} instead of myshopify domain name such as my-shop.myshopify.com) error when trying to download mobile passes.
2. Sending a test email via the template preview will result in non-existent customer barcodes. No customers would be found by scanning such barcodes.