Printed receipt code editor for your Shopify POS

You can customize your printed receipts using the code editor in your Shopify admin. The files that make up your receipts contain Liquid, Shopify's templating language. With the code editor, you can create more advanced customizations using HTML, CSS, and Liquid than with the visual editor.

You can change the receipt template and the section templates used on your printed receipts. The Receipts template files are the types of receipts that you can print in your store. Sections are parts of the receipts, such as the header or footer. Sections can be reused by multiple receipts.

Considerations for using the receipt code editor

Before you use the receipt code editor, review the following considerations:

Access restrictions

• You can use the code editor only from your Shopify admin on desktop.
• The code editor isn't available for any POS locations in Italy.

Where changes apply

• Code changes that you make apply to the selected location only.
• Customizations in the code editor apply only to POS Pro locations. If you use the code editor and have non-POS-Pro locations, then you can use the visual editor to customize the header and footer for those locations.
• You can customize printed receipts that have a template in the code editor such as, sales receipts, gift receipts, gift card receipts, and returns and exchanges receipts.

Code languages

• The files that make up your receipts contain Liquid, Shopify's templating language. Learn more about using Liquid.
• To edit the templates in the receipt code editor, you need to be familiar with HTML, CSS, and Liquid. Shopify Theme Support can help with minor adjustments within the scope of the Shopify Design Policy.

Customization limitations

• You can't preview receipts in different printer sizes from the code editor. To preview by printer size, use the visual editor.
• Product descriptions aren't available as a variable in receipt templates and can't be added to printed receipts.

Template maintenance

• If you customize a receipt with the receipt code editor, then your existing template might be missing new properties, such as selling_plan_name. To add the latest available properties to your template, you need to reset your receipt template to default. Resetting receipt templates to default removes any customizations you have made to them. Make a note of your customized code before you reset. After you reset the template, you need to manually reapply your customizations.

Access the code editor

You can edit your templates using the code editor. You must first switch to using the code editor from the default visual editor, and you can switch back to the visual editor at any time.

The steps for switching between the editors differ slightly depending on if all of your POS locations are eligible for the code editor, or if only some of your POS locations are eligible, for example, some of your POS locations don't use POS Pro or are based in Italy or France.

Steps:

Use custom files in your receipt template

You can use files, such as image assets, that you upload to your Shopify admin to customize your printed receipts.

A file must be uploaded to your Shopify admin before it can be used in a printed receipt. Learn more about file uploads.

Steps:

1. From your Shopify admin, go to Content > Files.

2. Beside the file that you want to include in your printed receipt code, click to copy the link.

3. Navigate to the code editor.

4. Include the asset link in your template.

Reset your receipt template to default

You can reset a receipt template to the default version using the code editor.

Steps:

Liquid variables available in the receipt code editor

You can use Liquid to customize your printed receipt template and receipt types.

The following data objects are available to the receipt code editor:

Receipt objects

shop

location

order

return

gift_card

Order object

id

created_at

source_identifier

change_due

balance_due

name

note

line_items

subtotal_price

total_price

total_tip_received

discounts

transactions

taxes_included

tax_lines

customer

shipping_address

shipping_groups

Return object

name

created_at

is_unverified

is_exchange

exchange_type

return_discount

return_subtotal

return_total

exchange_subtotal

exchange_total

total_cash_rounding_adjustment

total_adjusted_amount

net_total

return_line_items

exchange_line_items

return_tax_lines

exchange_tax_lines

shipping_refund_amount

tip_refund_amount

transactions

Shipping group object

destination

products

Line item object

id

name

variant_title

price

is_gift_card

discount

total_price

selling_plan_name

tax_rates

custom_attributes

variant_title

variant_id

variant_metafields

staff_member_description

product_metafields

Return line item object

Includes everything in line item object plus the following properties:

return_reason

return_reason_note

Liquid filters available in the receipt code editor

You can use Liquid filters to makes adjustments to information in your receipt templates. For example, you can change the formatting of currency or the captialization of specific text, such as a tax code.

To apply a filter, add a pipe character | and then the filter within the block of Liquid code between double curly brackets {{ }}. Filters can be applied only to blocks of Liquid code.

In the following example, the filter adjusts the tax code from lowercase to uppercase.

{{ tax_line.title | upcase }}

In the example code block, product is the object, title is its property, and upcase is the applied filter. The upcase filter changes the capitalization of the value of tax_line.title to uppercase. For example, if tax_line.title has a value of Hst, then the upcase filter changes the value to HST.

Refer to the Filters section from the Shopify Themes Liquid reference for details on how to use Liquid filters.

The following filters are available in the receipt code editor:

t

money

escape

barcode

qrcode

Example of a printed receipt template code customization

You can use Liquid to add conditional messaging. This functionality is similar to saving to a single location with the visual editor. For example, your business started with a single location, and you now have several new locations. You want to highlight your original store on your printed receipts.

You can add a custom message to the header.liquid template in the Sections folder of the code editor, and use Liquid to display the message only for your flagship location.

The following code checks for the name of the location, in this case your original location called "Home", and displays the message "Welcome to our original store, opened in 1972." if the location matches the name. Receipts printed from your other locations display the message "Welcome to our store." instead.

{% if location.name == 'Home' %}
  Welcome to our original store, opened in 1972.
{% else %}
  Welcome to our store.
{% end %}

Preview your code changes in the code editor

You can preview the changes to your printed receipts in the POS code editor in the Shopify admin.

Depending on which Liquid file is selected, the preview window highlights the design or section of the receipt affected by the file. By default, the preview window displays the content for your most recent POS order. You can select a specific order to use as your receipt content in the preview window for all Liquid files except for the gift-card.liquid file, which displays only the different locations as selectable preview options.

Steps: