Place barcodes on the legacy customer page

Display barcodes on your Shopify online store

The guide is for stores using the legacy customer account pages, as the new customer accounts pages do not support Liquid customisations. To place barcodes on the new customer account page, please check out this tutorial. Learn more about the differences between customer accounts and legacy customer accounts.

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/barcodes/qr/{{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.