SAKU Receipts: How to add receipt buttons to the thank you page

This article explains how to add buttons for downloading receipts and other documents to the thank you page shown right after checkout. Customers can open their documents on the spot, right after their purchase.

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".

Step 2 of the Setup Guide is checked once you've added buttons to both the thank you page (this article) and the order status page ("How to add receipt buttons to the order status page (customer account)").

In this article

• How to add buttons to the thank you page
• How to choose which documents to show
• How the display differs by payment method

The overall flow

First, here is what your customers will see once this is set up.

1. A customer buys a product and completes payment (the checkout).
2. When the purchase is complete, the thank you page (the screen shown right after a purchase) displays SAKU Receipt buttons.
3. The customer clicks a button, and the document for that order (such as a receipt) opens. This also works for customers who aren't logged in (guest checkout).

In this article, you'll set up the buttons on the thank you page using Shopify's checkout editor. The setup has four steps.

1. Open the thank you page editor (the checkout editor)
2. Add "SAKU buttons - Thanks page"
3. Choose which documents to show
4. Save

Before you start

• SAKU Receipt (must be installed)
• Permission to use Shopify admin (you must be able to open "Settings" → "Checkout")

Where to go: Shopify admin → Apps → "SAKU Receipt" → "Setup Guide" on the app's home page, Step 2 → "Open thank-you page" (or "Settings" → "Checkout" in Shopify admin)

1️⃣ Open the thank you page editor

You edit the thank you page in Shopify's checkout editor. There are two ways to open it, and both lead to the same screen.

① From the app's home page:
In Shopify admin, open "Apps" → "SAKU Receipt". In the "Setup Guide" on the home page, open Step 2 and click "Open thank-you page". The checkout editor opens on the "Thank you" page in a new tab.

② From "Settings" (use this if the button doesn't appear):
In Shopify admin, open "Settings" in the left menu and click "Checkout". Then click "Customize" to open the checkout editor.

③ In the page selector at the top, choose "Thank you".
("Thank you" is the thank you page.)

④ When the "Thank you" page is shown in the editor, Step 1 is done.

2️⃣ Add "SAKU buttons - Thanks page"

Here you add the SAKU Receipt buttons (a block) to the thank you page. A block is a building piece you place on a page.

① On the left, click "Add block" under "Main".
The list of page components appears on the left of the "Thank you" page. Click "Add block" under Main to open the list of apps you can add.

② In the app list, choose "SAKU buttons - Thanks page".
Under "SAKU Receipt", click "+" next to "SAKU buttons - Thanks page" and choose "Thank you" as the place to add it. (The editor calls the thank you page "Thank you".)

The red boxes show, from top to bottom, the page selector ("Thank you"), "Add block" under Main, and "SAKU buttons - Thanks page".

③ When "SAKU buttons - Thanks page" appears in the list on the left, Step 2 is done.

3️⃣ Choose which documents to show

① Select the block you added.
In the list on the left, click "SAKU buttons - Thanks page".

② In the block settings on the right, turn on (True) the documents you want buttons for.

• Receipt: always shown. No setting needed.
• "Show Invoice (請求書表示)", "Show Delivery Note (納品書表示)", "Show Quotation (見積書表示)": buttons appear for the documents you turn on (True). All are off (False) by default.

The red boxes show the block in the list on the left, the settings on the right (Show Invoice and so on), and "Save" at the top right.

③ When the documents you want are turned on (True), Step 3 is done.

4️⃣ Save

① Click "Save" at the top right.
Changes don't appear in your store until you save.

② When your changes are saved, Step 4 is done.

When the condition for Step 2 is met (buttons added to both the order status page and the thank you page), Step 2 in the Setup Guide on the app's home page is checked automatically.

What customers see in your store

After a purchase is complete, the document buttons appear on the thank you page. They're also shown to customers who aren't logged in (guest checkout), and they can open documents from the buttons.

If the customer chose cash on delivery, a manual payment method such as bank transfer, or a pay-later option, the receipt button is grayed out and shows "Receipt available after payment". For card payments and similar methods, the regular button is shown. The invoice and quote buttons can be used even before payment.

To issue a receipt after confirming payment, see "How to issue receipts for cash on delivery and bank transfer orders".

Note for Hydrogen (headless) stores (Hydrogen plan): These buttons automatically switch to a document entry point that also works for Hydrogen stores. The setup steps are the same as above. For details, 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
  Make sure you clicked "Save" in the editor. Also note that the thank you page needs its own "SAKU buttons - Thanks page" block, separate from the order status page.
• Clicking a button in the editor doesn't open a document
  Documents don't open in the editor preview. Place a test order and check on the real thank you page.
• The receipt is grayed out for a bank transfer order
  This is expected, because the payment hasn't been completed with this payment method. Once you confirm the payment and mark the order as paid in Shopify, open the receipt from the order status page or the order confirmation email.