Share barcodes via Shopify notifications

Embed customer IDs using the Liquid template language

To send barcodes via automated Shopify notifications, edit your existing Shopify notification template(s). Similarly, place the barcodes on your website by editing its theme code.

The guide requires some basic understanding of HTML and Liquid.

Please don't confuse Shopify Notifications with Shopify Email. If you wish to send barcodes via a bulk email campaign, check out instructions for Shopify Email.

Share a plain Code 128 (1D barcode) image

Include the following snippet to your selected Liquid template. 

<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. 

<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.

<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. For more information, check the 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.

<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/enGB_add_to_google_wallet_wallet-button.png" /> </a>

To localise the text of the "Add to Google Wallet" button, replace enGB_add_to_google_wallet_wallet-button.png with the selected language's file name in the snippet above. To see available localisations, download localised images. For more information, check the Add to Google Wallet 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). 

<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.

<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.

<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

<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}}" />

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:

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

QR code

<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}}" />

Wallet buttons with QR code and custom text

            <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 %}

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.

PreviousShare barcodes in personNextShare barcodes via bulk messaging services

Last updated