SAKU Receipts: How to add receipt buttons to the order status page (customer account)

This article explains how to add buttons to your customers' account page (the order status page) so they can download receipts, invoices, delivery notes and quotes. The steps depend on which type of customer accounts your store uses (new customer accounts or legacy customer accounts).

Customers can open their documents in three places: the order status page, the thank you page and the order confirmation email. This article covers the order status page. The thank you page and the order confirmation email are set up in separate articles.

The buttons are labeled "Receipt", "Invoice", "Delivery Note" and "Quotation".

A note on naming: the "order detail page" and the "order status page" are the same page — the page customers see when they open one of their orders. The "thank you page" is the page shown right after a purchase. In the editor, it's labeled "Thank you".

The overall flow

First, here is what happens for your customers once this is set up.

1. A customer logs in and opens the order status page (their account page).
2. Near the order information, the SAKU Receipts buttons ("Receipt", "Invoice", "Delivery Note", "Quotation") are shown.
3. The customer clicks a button, and the document for that order opens.

This article explains how to place these buttons on the order status page. With new customer accounts, you set it up in four steps.

1. Open the checkout editor
2. Add "SAKU buttons - Order page" to the order status page
3. Choose which documents to show, then save
4. Change the button color (optional)

With legacy customer accounts, follow the [Legacy customer accounts] steps further down.

Before you start

• SAKU Receipts (already installed)
• The type of customer accounts your store uses (new customer accounts or legacy customer accounts). If you don't know, don't worry — "First, tell which customer accounts you use" below shows you how to tell.

To check, go to "Settings" → "Customer accounts" in Shopify admin. The option selected there is the type your store uses.

First, tell which customer accounts you use

On the app's home page, open Step 2 of the "Setup Guide" and click "Open order detail page". The right editor for your store opens automatically in a new tab. Look at the screen that opens to decide which section below to follow.

• If you see a list of apps such as "SAKU buttons - Order page" on the left, and page names such as "Order status" and "Thank you" at the top, this is the checkout editor, which means you use new customer accounts. → Go to [New customer accounts] below.
• If you see the theme editor with your theme's name (such as Dawn), you use legacy customer accounts. → Go to [Legacy customer accounts] below.

Step 2 of the "Setup Guide" on the app's home page.

Note: You can also open the editor with the "Add to Theme" button under "Theme Settings" on the app's Settings page, but it may open a different page. This article uses the button in the Setup Guide on the home page.

[New customer accounts]

1️⃣ Open the checkout editor

The checkout editor is where you edit the checkout and customer account pages. If it is already open from the Setup Guide button, go on to Step 2.

① In Shopify admin, click "Settings" at the bottom left, then click "Checkout".

② Click the edit button for the checkout and customer accounts settings.
When the checkout editor opens, Step 1 is done.

Note: If you can't find it, use the Setup Guide button described above.

2️⃣ Add "SAKU buttons - Order page" to the order status page

① Use the page selector at the top of the screen to choose "Order status".
The editor switches to the customer account order status page. If you can't find it, choose "Customer accounts: Order status" in the page selector at the top.

② Click "Add block" under "Main".

③ In the list, click "SAKU buttons - Order page" from SAKU Receipt.
When the block is added to the list on the left, Step 2 is done. Drag the block up or down in the list to change where the buttons appear.

The red boxes show, in order, "Order status" in the page selector, "Add block", and "SAKU buttons - Order page".

3️⃣ Choose which documents to show, then save

① Click the block you added in the list on the left.
Its block settings open on the right.

② Turn on (True) the documents you want buttons for.

• Receipt: always shown. No setting needed.
• "Show Invoice (請求書表示)": turn on (True) to show the invoice button.
• "Show Delivery Note (納品書表示)": turn on (True) to show the delivery note button.
• "Show Quotation (見積書表示)": turn on (True) to show the quote button.
• All three are off (False) by default.

The buttons appear as full-width buttons in this order: "Receipt" → "Invoice" → "Delivery Note" → "Quotation".

The red boxes show the block in the list on the left, "Block settings" on the right, and "Save" at the top right.

③ Click "Save" at the top right.
Changes don't appear in your store until you save. When the save goes through, Step 3 is done.

4️⃣ Change the button color (optional)

To change the button color, go to "Settings" on the left of the checkout editor → "Colors" → "Buttons". This changes the color of all buttons on the order status page.

Note: Clicking a button inside the editor won't open a document. To check, log in with a real customer account and look at the order page.

[Legacy customer accounts]

1️⃣ Turn on "Print Buttons"

When the theme editor opens, select "App embeds" from the icons running down the left edge of the screen. Turn on "Print Buttons" in the list.

Note: With legacy customer accounts, the buttons appear only on the customer's order details page.

2️⃣ Choose the theme, documents and colors

Expand "Print Buttons" to see the following settings under the "SAKU App Settings" heading.

Unlike new customer accounts, you can choose whether to show each of the four documents, including the receipt.

3️⃣ Save

Click "Save" at the top right.

Note: Clicking a button inside the theme editor won't open a document. To check, log in with a customer account and look at a real order page.

Note: If you use a theme other than "Dawn" or "Rise", the buttons may not appear. You can find your theme's name under "Current theme" in "Online Store" → "Themes" in Shopify admin. If the buttons don't appear with a theme other than Dawn or Rise, send us your theme name at info@saku-apps.com.

What customers see in your store

When a customer logs in and opens an order, the document buttons appear near the order information. Below is an example with new customer accounts. (Because the order hasn't been paid yet, the receipt button is grayed out, while the invoice and quote buttons can be clicked.)

With new customer accounts, the buttons appear after the app checks the payment status. (If the status can't be checked, the regular buttons are shown.) The buttons don't appear while the check is in progress.

For orders that haven't been paid yet, such as cash on delivery or bank transfer orders, the receipt button is grayed out and shows "Receipt available after payment". The invoice and quote buttons can still be used. Once you confirm the payment and mark the order as paid in Shopify, the receipt button returns to normal when the page is reopened.

With legacy customer accounts, a row of buttons appears just above the order details table. On smartphone screens, the buttons are arranged in two columns.

For details, see "How to issue receipts for cash on delivery and bank transfer orders".

Note for Hydrogen (headless) stores (Hydrogen plan): The order status page buttons for new customer accounts automatically switch to a document entry point that also works for Hydrogen stores. The setup steps are the same as above. Theme "App embeds" can't be used on a custom account page built with Hydrogen, so ask the company that built your store to add the React button component. For the steps, see "Setup guide for Hydrogen (headless) stores".

Customers can download documents in three places: the order status page, the thank you page and the order confirmation email. We recommend setting up all three: Order status page / Thank you page / Order confirmation email

Troubleshooting

• The buttons don't appear
  Check the following:
  • Did you add the block (or "Print Buttons" for legacy customer accounts) in the checkout editor (the theme editor for legacy customer accounts) and click "Save"?
  • For legacy customer accounts, is your theme "Dawn" or "Rise", and is "Print Buttons" turned on in "App embeds"?
  • If you use new customer accounts, did you only turn on the theme's "App embeds"? (With new customer accounts, add the block in the checkout editor.)
  • The buttons can't be checked inside the editor. Log in with a customer account to check.
• The receipt button stays grayed out
  The order hasn't been paid yet. Once you've confirmed the payment, open the order in Shopify and choose "Collect payment" → "Mark as paid". The regular button appears when the page is reopened.
• Clicking a button in the editor doesn't open a document
  Documents can't be displayed in the editor. Log in as a customer and check on a real order page.