> For the complete documentation index, see [llms.txt](https://galmis.gitbook.io/barcodify-customer-selector/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://galmis.gitbook.io/barcodify-customer-selector/getting-started/share-app-generated-barcodes-with-customers/place-barcodes-on-the-legacy-customer-page.md).

# Place barcodes on the legacy customer page

Display barcodes on your Shopify online store

{% hint style="danger" %}
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](/barcodify-customer-selector/getting-started/share-app-generated-barcodes-with-customers/place-barcodes-on-the-new-customer-page.md). Learn more about the [differences between customer accounts and legacy customer accounts](https://help.shopify.com/en/manual/customers/customer-accounts). 
{% endhint %}

{% hint style="info" %}
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.
{% endhint %}

## Prerequisites

1. Familiarise yourself with [Shopify's theme code editing guide](https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code). 
2. (Optional) I recommend [duplicating your theme](https://help.shopify.com/en/manual/online-store/themes/managing-themes/duplicating-themes) 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](https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code#edit-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. ![](https://1376568054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9rBqY6UYwTDjKCP2k2QI%2Fuploads%2FmtU4IXGpiTLc9MAm1hPC%2Fimage.png?alt=media\&token=5ce88cda-9d77-4d2c-ac06-30f974a21196) ![](https://1376568054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9rBqY6UYwTDjKCP2k2QI%2Fuploads%2FKA0wuvpTaVqW7mK70BIX%2Fimage.png?alt=media\&token=0899350b-029f-4c41-add1-bef316f51331)
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 %}
```

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

<figure><img src="https://1376568054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9rBqY6UYwTDjKCP2k2QI%2Fuploads%2FNEX7ypL2cgJKhl1oS5qG%2Fimage.png?alt=media&amp;token=80b2b230-38f0-4aba-b0df-73e819b53034" alt=""><figcaption></figcaption></figure>

5. Navigate to the account page and verify the barcode and mobile wallet buttons appear on the page as expected.&#x20;
   * 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.&#x20;
   * ```
     <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.

<figure><img src="https://1376568054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9rBqY6UYwTDjKCP2k2QI%2Fuploads%2FundK8BQxKKfzmM8tsJgE%2Fimage.png?alt=media&amp;token=37690f32-89b4-4ad0-bc10-a80b7d6b635d" alt=""><figcaption></figcaption></figure>