Hi,
I am hoping someone can help me figure out how to change our receipts from what the visual editor changed them to today. Mainly I am looking to change the placement of the QR code and possibly add separator lines in between items. This is for our POS receipts. I do not know code but should be able to handle directions on what to do. Since Shopify decided to change the layout on us all of a sudden and the only way to get it back is with code! UGH!!! Help please!
A couple of these split into “easy in the visual editor” vs “needs the code editor,” so worth separating them out.
The QR code — you can set a custom QR (label + link) in the visual editor itself: Point of Sale → Settings → Customization → Printed receipts. That’s a no-code toggle. Repositioning it further than the built-in placement, though, isn’t something the visual editor exposes.
Separator lines between line items — this is the harder one, and I’d rather be straight with you than send you in circles. The product/line-item part of the receipt (the “transaction body”) is managed by Shopify itself, and the visual editor doesn’t allow custom CSS or design changes there. So there’s no toggle for item dividers.
The only place with more control is the receipt code editor (HTML/CSS/Liquid), at Point of Sale → Settings → Customization → Printed receipts → the sections icon → Edit code. Two catches to know before you go down that road: it’s POS Pro only, and even in there, Shopify still controls a lot of the transaction-body content. So dividers between items may or may not be reachable depending on how much of that section is exposed — worth opening the code editor to see the actual template before assuming it’s doable.
If you’re not on POS Pro, the honest answer is that the item-separator change likely isn’t available today, and the QR is limited to the visual editor’s built-in placement.
Are you on POS Pro? That changes which of these two you can actually pull off.
First, the most likely reason your changes aren’t showing up: the editor has a banner that the POS app needs to be on version 11.10 or later for the new receipt template to actually print. Anything below that keeps printing the old template, so edits in the visual editor won’t appear on the paper receipt. And if you’ve got more than one device, any device still on an older version prints the old layout while updated ones print the new one, so it’s worth updating every device, not just one. That alone might explain a lot of what you’re seeing.
On the QR code: in the visual editor it lives as a block under the Footer section (alongside Return policy, Signature, Customer information). Select that block and you can set its label and link, and try moving it within the footer there. Repositioning it outside the footer isn’t something the visual editor exposes, so that part would still need the code editor (POS Pro).
On separator lines between items: this is the honest limitation. The items section (“Content” in the editor) is the transaction body Shopify manages, and there’s no “add block” or divider option on it the way there is for the header and footer. So item dividers aren’t reachable in the visual editor. Even in the code editor, Shopify controls most of that section, so I’d set expectations low on that specific one.
If you update to 11.10 and the QR still won’t sit where you want, say so and we can look at the code-editor route.
We were already above version 11.10 and are currently on the newest at 11.12 The “QR Code” is actually called the “Order Code” which is at the top of the receipt and it won’t let me move it to the bottom.
That explains it, thanks. So this is the “Order code” block, and it’s locked to the Header.
Why you can’t drag it down: the visual editor only reorders blocks within a section, and the predefined Order code block belongs to the Header, so it won’t cross into the Footer. That’s a real editor limitation, not you.
The workaround, staying no-code where possible:
- In the Header, hide the Order code block with the eye/visibility icon so it stops printing at the top.
- In the Footer, add a custom Liquid block and put the order number there with:
Order number: {{ order.name }}The order object is available in the receipt template, so{{ order.name }}prints the order number (e.g. #1425).
One thing worth knowing so the result doesn’t surprise you: the built-in “Order code” block actually prints the receipt number, which is register-prefixed and looks different from the order number (something like #1-1288 vs #1425). So the footer version using order.name will show the plain order number, not the exact same code that was at the top. If you specifically need that register-prefixed receipt number at the bottom, that’s where it gets trickier and the POS Pro code editor gives you fuller control.
If you’re on POS Pro, the most reliable version of this is the code editor (three-dot menu, Edit code, footer.liquid), where dropping {{ order.name }} into the footer is a well-trodden path. If the custom Liquid block in the visual editor gives you any trouble with the variable, tell me which editor you’re in and we’ll sort it.
I built and tested on new receipt visual editor
Mostly doable
Move the Order code to the bottom
- In the left panel, open the Header section.
- Click the Order code block, then click the eye icon next to it to hide it. That stops it printing at the top.
- Open the Footer section and click Add block, then choose Custom Liquid.
- Paste this into the block:
Order number: {{ order.name }} - Click Save. The order number now prints at the bottom.
Notes:
- The built-in Order code prints the register receipt number (like #1-1288).
{{ order.name }}prints the plain order number (like #1425).- If you specifically need that exact register-prefixed number at the bottom, that format isn’t available without code.
Separator lines between items
- This one isn’t possible in the visual editor.
- The items list (the Content section) is locked by Shopify. It has no divider option and no Add block, so there’s no way to add lines between items.
Regards,
Ajay
Well I tried this but it never changed the receipt. I even tried just hiding the order name (which is actually the QR code, I attached a screenshot of what I am talking about) and it still wouldn’t change the receipt. Also here is a picture comparing our old receipt (left) and the new receipt (right). We want the huge QR code at the bottom again and if possible the dotted lines between the items again. We do have POS Pro but I can’t find the code editor anywhere.
Thanks so much for your help!
Thanks for the screenshots, they clear up a lot.
Two separate things are going on here.
First, the big QR at the bottom. In your editor screenshot there are two different blocks. The one at the very top is the “Order code” block, and it lives in the Header, that’s the QR that jumped to the top on the new template. Lower down in the left panel, under Footer, there’s a separate block just called “QR code.” So you don’t need the Custom Liquid workaround for this. Hide the “Order code” block in the Header (the eye icon), then click the “QR code” block under Footer and turn it on. That puts a QR back at the bottom, which is what you’re after. The footer QR encodes the order lookup, so it should match what your old receipt did.
Second, and this is probably why nothing changed when you tested: look at the blue banner at the top of that same screenshot, “Update POS app to 11.10 to apply receipt templates.” Even though your app shows 11.12, the new template only prints once the POS device itself has pulled and applied it. So after you make the change in admin, on the actual iPad/POS hardware, fully close and reopen the POS app (or sign out and back in) so it syncs the template, then print a real test receipt on the thermal printer, not just the on-screen preview. The preview and the printed output can differ, and edits made in admin don’t always show on the device until it re-syncs.
On the dotted lines between items, this part I can’t fix for you. The item list (the Content section) is locked and managed by Shopify, so there’s no divider option in either the visual editor or the code editor right now. That one isn’t something you can turn back on yourself. It’s a fair request though, so it’s worth sending to Shopify as product feedback so it’s on their list.
If the footer QR still doesn’t appear after a full app restart on the device, it’s worth opening this with Shopify POS support directly with those two receipt photos, since at that point it’s likely a template-sync issue on their end rather than a setting you’re missing.
Here’s the exact click-by-click, since your screenshot shows the footer QR block is already there.
Getting the big QR back at the bottom:
- In the receipt editor, open the Header section and click the “Order code” block (that’s the QR that moved to the top).
- Hide it with the eye icon. That clears the QR off the top.
- Scroll down to the Footer section. There’s a separate block there called “QR code,” sitting near Customer information, Transaction details, and Return policy. Click it.
- Turn that “QR code” block on. That puts a QR back at the bottom, so you don’t need the Custom Liquid order-number workaround at all.
- Click Save.
Now the step that’s easy to miss, and probably why nothing changed when you tested:
- See the blue banner at the top of your editor screenshot, “Update POS app to 11.10 to apply receipt templates.” Even though your app reads 11.12, the new template only prints once the POS device pulls it. Saving in admin isn’t enough by itself.
- On the actual iPad or POS hardware, fully close the POS app (swipe it away, not just background it) and reopen it. If it still looks old, sign out and back in. That forces the template to re-sync to the device.
- Then print a real test receipt on the thermal printer, not the on-screen preview. The printed paper is the real test, since the preview and the print can differ.
On the dotted lines between items, that one you can’t restore yourself. The item list (Content section) is locked and managed by Shopify, so there’s no divider option in the visual or code editor right now. Worth sending as product feedback, but there’s no setting for it today.
If you get through steps 1 to 8 and the footer QR still won’t print after a full app restart, that’s the point to take it to Shopify POS support with the two receipt photos, since it’d likely be a template-sync issue on their end.
Thank you for your help! Although when I click on the QR Code it doesn’t really have anything that looks like it turns it on. I attached a screenshot of what happens when I click on it. I am going to log out of the shopify app and try to print the receipt again though. I am also curious as to whether we actually have POS Pro because everyone is saying I should have an edit code in the printed receipts but I do not see that. In my subscriptions it says I have a POS Pro subscription, thats why I assumed I had POS Pro. Is that right? If so then why am i not seeing the edit code?
Thanks,
Your screenshot cleared up two things I got wrong, so let me correct them.
That Footer “QR code” block isn’t the order QR. It’s a generic one, you type in a URL and a label (yours shows https://example.com / “Scan for more”), and it makes a static QR to whatever link you enter. It doesn’t have an on switch, and it won’t reproduce your old order-lookup QR. So that block is a dead end for what you want.
On POS Pro and the missing code editor, you’re not wrong, you do have it. Here’s what’s happening: with a POS Pro subscription you’re entitled to the receipt code editor (full Liquid, where the real control is). The reason you can’t see it is that the new visual editor is currently active, and activating the visual editor hides the code editor. They’re an either/or, not both at once.
So the fix is to switch editor styles. In Settings, in the printed receipts area, there’s an option to change which editor you’re using (visual vs code). Switch it to the code editor. That gives you back the Liquid receipt, where you can put the order QR back at the bottom, and it’s also where you’d get your dotted dividers between items back, since the code editor isn’t limited the way the visual one is. Shopify’s help page for this is titled “Selecting and switching editor styles to customize printed receipts.”
One heads-up: switching to the code editor is the more advanced path, it’s raw Liquid/HTML. If your old receipt had custom code, it may not have migrated automatically and you might be rebuilding parts of it. But it’s the only way to get both the bottom order QR and the item dividers, which the visual editor can’t do.
Same device step still applies after any change: fully close and reopen the POS app (or sign out and back in) so it pulls the template, then print a real test receipt, not the preview.
I read on Shopify that you can switch between the visual editor and the code editor until you activate the visual one. I must have unknowingly activated it because I see nowhere to get the code editor back. I think I’m stuck now.
Yeah, it looks like that switch is one-way. Shopify’s help page says once the visual editor is activated, the code editor is removed and can’t be restored on your end, so you’re past that point now.
That means the dividers and the old bottom QR can’t come back through self-serve, since both lived in the code editor. Your one shot is Shopify support: open a ticket, tell them you activated the visual receipt editor without knowing it was permanent, and ask if they can revert your store to the code editor. Attach the two receipt photos. They document it as permanent, so no guarantees, but support sometimes has a back-end option we can’t see. Worth asking directly.
So after talking to Shopify again, I no longer have access to the code editor since I did not already have any custom codes, it automatically changed me over to the new visual editor. Can anyone help me with code to try to move the qr code back to the bottom of the receipt like in my picture of the receipt on the left. I would also like to have the dotted lines in between the items if possible too like in the left receipt. I don’t fully understand code but am decent with directions and can certainly copy and paste! Thanks!
The QR you can fix yourself. The visual editor does let you add a Custom Liquid block to the footer, so you can put the order QR back at the bottom.
In the receipt editor, Footer section, Add block, choose Custom Liquid. Paste this:
{% if order.qr_code_content != nil and order.qr_code_content != blank %}
{{ order.qr_code_content | qrcode }}
{% endif %}
That’s the same order-lookup QR your old receipt had. Save, then on the POS device fully close and reopen the app so it pulls the template, and print a real test receipt.
The dotted dividers between items are still a no. Those live in the locked item/Content section, and a footer Custom Liquid block can’t reach it. Only the old code editor could, and that’s gone. So the QR is doable, the dividers aren’t.
Thank you so much, I really appreciate it! I will give this a try!