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
    • 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
  • Prerequisites
  • Instructions
  1. Getting started
  2. Share "app-generated" barcodes with customers

Place barcodes on the customer page

Display barcodes on your Shopify online store

PreviousShare barcodes via bulk messaging servicesNextSynchronise "merchant-issued" custom barcodes with the app

Last updated 2 months ago

The guide is for illustrative purposes only and requires knowledge of HTML and Liquid. The exact steps depend on your online store's theme and requirements.

Prerequisites

  1. Familiarise yourself with Shopify's theme code editing guide.

  2. (Optional) I recommend duplicating your theme and making changes to it first. Once you're happy with the results, please apply the same changes to the live store.

Instructions

  1. Start editing your theme code

  2. Find the relevant account.liquid file. Usually, it's the customers/account.liquid template, or account.liquid section, or main-account.liquid section.

  3. Place the code snippet to show a barcode image and mobile wallet download buttons. 

{% comment %} REMOVE THE BELOW BLOCK IF BARCODIFY UNINSTALLED {% endcomment %}
<div>
  <p>For faster checkout with your customer account in our physical store please show this QR code.</p>
  <img style="margin-top: -12px; margin-left: -12px;" src="https://select-customer-barcode-prod.herokuapp.com/public-api/v1/qrcodes/{{shop.permanent_domain}}/{{customer.id}}" />
  
  <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>
</div>
{% comment %} END OF THE MANUALLY ADDED BLOCK {% endcomment %}

  1. Click Save and Preview store (buttons at the top right)

  1. Navigate to the account page and verify the barcode and mobile wallet buttons appear on the page as expected.

    • If they don't, you've likely edited the wrong file. Revert the changes and find the correct file. Shopify online store themes differ, and the file may be called something else. If you believe there's an issue with the app, a quick way to verify this is to add a dummy text snippet to the same file, e.g. 

    • <p>Can you see this?</p>

    • If they do but are placed incorrectly, you'll need to place the code snippet into a different position in the same file, save and preview store again until you're happy with the changes.