Place barcodes on the customer page
Display barcodes on your Shopify online store
Last updated
Display barcodes on your Shopify online store
Last updated
Familiarise yourself with Shopify's theme code editing guide.
(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.
Start editing your theme code
Find the relevant account.liquid
file. Usually, it's the customers/account.liquid
template, or account.liquid
section, or main-account.liquid
section.
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 %}
Click Save and Preview store (buttons at the top right)
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.