Barcodify - Customer Selector
  • Getting started
    • Introduction
    • Design mobile wallet passes
    • Share "app-generated" barcodes with customers
      • Share barcodes in person
      • Share barcodes via Shopify notifications
      • Share barcodes via bulk messaging services
      • Place barcodes on the customer page
    • Synchronise "merchant-issued" custom barcodes with the app
      • Enter barcodes individually
      • Import barcodes
      • Populate barcodes from customer metafield
    • Bulk-export customers
    • Analytics
    • Add customers to the POS cart
    • Legacy (slower) ways to add customers
      • Shopify POS "Add customer" Smart Grid action
      • The app's Smart Grid actions
  • Troubleshooting
    • FAQs
      • Can I use one scanner to add products and customers?
      • What scanner should I get for customer barcodes?
    • Known issues & workarounds
      • "Add customer" POS extension no longer works
      • Expected a valid shop query parameter
      • Something went wrong. Please check your cart or try again.
  • Legal
    • Terms of Service
    • Privacy Policy
    • Sub-processors
Powered by GitBook
On this page
  • Share a plain Code 128 (1D barcode) image
  • Share a plain QR code (2D barcode) image
  • Share the "Add to Apple Wallet" button
  • Share the "Add to Google Wallet" button
  • Other use cases
  • Examples
  • QR code
  • Testing
  1. Getting started
  2. Share "app-generated" barcodes with customers

Share barcodes via Shopify notifications

PreviousShare barcodes in personNextShare barcodes via bulk messaging services

Last updated 5 months ago

Embed customer IDs using the

To send barcodes via automated Shopify notifications, edit your existing . Similarly, place the barcodes on your website by editing its .

The guide requires some basic understanding of HTML and Liquid.

Please don't confuse . If you wish to send barcodes via a bulk email campaign, .

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

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>

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.

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

Liquid template language
Shopify notification template(s)
theme code
Shopify Notifications with Shopify Email
check out instructions for Shopify Email
localised images
Add to Apple Wallet Guidelines
localised images
Add to Google Wallet Guidelines