SAKU Thanks Custom: How to add images and text to the Thank you page

This article explains how to use "SAKU Thanks Custom" to show a thank-you message or images (such as a QR code for your LINE account, a popular messaging app in Japan) on the "Thank you page" customers see after they complete a purchase.

The Thank you page (the page shown when a purchase is complete) is labeled "Thank you" in Shopify's checkout editor. They are the same page.

There are just two main steps: (1) create "blocks" (pieces of content to show) in the app, and (2) place them on the Thank you page in the checkout editor.

Text, image, custom HTML and recommended products blocks are available on the Free plan (you can create and show up to 2 blocks). If all you need is a LINE QR code, the Free plan is enough.

In this article

• How to read the app's Home page and the setup guide
• How to create text and image blocks (colors, sizes, variables and choosing images)
• How to reorder blocks and place them on the Thank you page
• How many blocks you can use on the Free plan
• What to check if something doesn't appear correctly

Where to go: Shopify admin → Apps → "SAKU Thanks Custom" (Home page)

What you need before you start

• "SAKU Thanks Custom" installed in your store.
• Plan: text, image, custom HTML and recommended products blocks work on the Free plan (you can create and show up to 2 blocks). Only the coupon block needs the Pro plan.
• If you use an image block: an image in your store's "Files" (for example, a LINE QR code). If it isn't there yet, you can upload it in step 4.

The overall flow

1. Create "blocks" in the app (steps 2 to 4).
2. Check the block order and the "Active" status (step 5).
3. Place the app block on the Thank you page in the checkout editor and press "Save" (step 6).
4. Back on the app's Home page, check that step 2 of the guide is complete (step 7).

1️⃣ Open the app and check the setup guide

Open "SAKU Thanks Custom" from "Apps" in the Shopify admin's left menu. The first page you see is the "Home" page (headed "SAKU Thanks Custom"). The app's left menu has three items: "Blocks", "Help" and "Pricing".

Further down the Home page is the "Setup guide". Under "First-time setup", the steps are listed in order. Your progress is shown at the top right, for example "0 of 4 steps completed".

• On the Free plan, there are two steps: "1. Create a block" and "2. Show the block on the Thank you page".
• On the Pro plan and on development stores, "3. Add the coupon block to the Order status page" and "4. Send the coupon by email" (both "Optional") are added, for four steps in total.
• The first unfinished step opens automatically. To open another step, click the arrow at the right end of its row.

The basic features work on the Free plan without any billing setup. This article covers steps 1 and 2.

2️⃣ Choose a block type

Press "Create block" in step 1 on the Home page. You can also open "Blocks" in the left menu and press "Create block" at the top right.

The "Create block" page opens, and five types are listed under "Choose block type".

On the Free plan, you can create up to 2 blocks. If you try to create a third, you'll get an error when you save (for details, see How to reorder, enable, disable, duplicate and delete blocks). On the Free plan, choosing Coupon takes you to the Pricing page.

First, click "Text". The page heading changes to "Create block (Text)". You can't change a block's type after it's created.

Recommended products, Custom HTML and Coupon blocks are each covered in separate articles.

3️⃣ Create a text block

If you only want to add a QR code image, skip this step 3 and go to step 4.

The form is on the left and the "Preview" is on the right. As you type, you can check how it looks in the preview.

Fill in the fields from top to bottom.

• "Block name (internal)" under "Basic settings" (required, up to 100 characters): a name to help you tell blocks apart. It isn't shown on the Thank you page.
• "Show this block on the Thank you page" under "Basic settings": on by default. If you turn it off, the block is created but doesn't appear on the Thank you page.
• "Display title" under "Content" (optional): the heading. You can use bold and links.
• "Body" under "Content": the toolbar has "Bold", "Link", "Bulleted list" and "Numbered list". Select the text first, then press a button.
• "Color" and "Size": choose the text color and size.
• "Center this block" under "Appearance": when on, both the title and the body are centered (off by default).

For "Color", you can choose Default, Subdued, Accent (store's brand color), Blue, Green, Orange or Red. For "Size", choose Heading, Normal or Small. By default, the title is "Default color, Heading" and the body is "Default color, Normal". When the size is "Heading", the color setting has no effect.

Press "Link" and an input box appears with "Enter a link URL (https://...)". Only URLs starting with https are accepted.

The title can be up to 200 characters, and the body up to 5,000 characters. If the body is empty, "Enter body text" appears; if it's too long, "Body must be 5,000 characters or fewer" appears.

You can use the following "variables" in the title and body. They are replaced with the actual values for each buyer.

Any other variable is left blank. In the preview, sample values are used (the store name is "Sample store").

Type the variables directly into the text. For example, if you write "Thank you for your order {{ order_name }}.", the buyer sees "Thank you for your order #1001."

When you're done, press "Save" at the bottom of the page. Press "Cancel" to go back to the list. If you have unsaved changes, an "Unsaved changes" badge appears. When you save, you return to the "Block management" list.

If you try to leave with unsaved changes, you're asked whether to discard them. On narrow screens, the preview moves below the form. Under the preview it says "This is an approximate preview. The final display follows the Thank you page design." While the body and other fields are empty, a hint such as "Enter body text to show a preview" appears.

4️⃣ Create an image block (QR code or banner)

Press "Create block" again, and this time choose "Image". The page heading is "Create block (Image)".

• Enter a "Block name (internal)" (for example, LINE friend banner).
• Under "Image" in "Content", press "Select from files". Until you choose one, "No image selected" is shown.
• Shopify's "Files" picker opens. Choose one image already saved in your store. If the image isn't in your store yet, upload it from the picker and choose it from your computer. When the upload finishes, select the image and press the picker's confirm button.
• Once you've chosen an image, the button changes to "Change image" and a small thumbnail appears.
• "Image alt text" (up to 200 characters): a description used when the image can't be shown or is read aloud by a screen reader. If left blank, the alt text set on the file is used automatically.
• "Link URL (optional)": the page that opens when the image is clicked. Only URLs starting with https are accepted (for example, the URL of your LINE Official Account).
• "Open link in a new tab": on by default.

Images are chosen from your store's "Files". You can't enter an image URL directly. Right after you add a file, you may not be able to choose it until processing finishes. Wait a moment and try again.

The image's aspect ratio is measured automatically when you save and is used when it's shown on the Thank you page.

Next, adjust how the image looks under "Appearance", below the image settings.

• "Image width (%)": enter 10–100 (100 by default). This is a percentage of the block width; 100 fills the full width. Numbers outside this range are corrected to 10–100 automatically.
• "Image alignment": choose Left (the default), Center or Right.

If an error appears, it will be one of these: "Select an image", "Enter a valid URL that starts with https" (when the image or link URL isn't valid), or "Alt text must be 200 characters or fewer".

Press "Save" and you're done.

5️⃣ Check the block order and "Active" status

When you save, you return to the "Block management" list. Blocks are shown on the Thank you page from top to bottom.

• To change the order, drag the dotted icon (the handle) at the left edge of each block. You can also click the handle and press the up or down arrow key, or use the arrow buttons above and below the handle. When the order changes, "Block order saved" appears.
• If a block has a green "Active" badge, it's shown on the Thank you page. Press "Disable" to make it "Inactive" and remove it from the Thank you page. To show it again, press "Enable".
• Use "Edit" to change the content and "Duplicate" to make a copy. Copies are created as "Inactive". To delete a block, press "Delete", then "Delete" again when asked "Delete this block?".
• In the "Preview" on the right, switch between "Desktop" and "Mobile" to check how it looks.

For more on reordering, duplicating and deleting, see How to reorder, enable, disable, duplicate and delete blocks. To show different blocks on mobile and desktop or by customer tag, see How to show or hide blocks by device (mobile/desktop) or customer tag.

That's all you need to do in the app. Back on the Home page, step 1 now has a green check mark.

6️⃣ Place it on the Thank you page in the checkout editor

Open step 2 on the Home page, "Show the block on the Thank you page". Below the description are two buttons: "Open Thank you page" and "Open block management".

Press "Open Thank you page". Shopify's checkout editor opens in a new tab, with the Thank you page selected and the list of apps open on the left.

Press the "+" to the right of "SAKU Thanks Custom", and under "Add to:" choose "Thank you".

Once added, "SAKU Thanks Custom" and "Thank you" appear on the left.

Finally, press "Save" at the top right of the checkout editor. If you don't save, nothing changes in your store.

"SAKU Thanks Custom" has no settings in the editor. You decide which blocks to show in the app's "Block management".

If the step 2 button doesn't open the editor, go to "Settings" → "Checkout" → "Customize" in the Shopify admin. Use the page selector at the top of the screen to choose the "Thank you" page, add "SAKU Thanks Custom" from the Apps icon on the left, and press "Save".

The preview in the editor is slightly different from the real Thank you page. Customer tag rules are ignored and all "Active" blocks are shown (only the first two on the Free plan).

7️⃣ Check that step 2 of the guide is complete

Go back to the app's Home page. When both of the following are true, step 2 is checked automatically:

• You have at least one "Active" block.
• The app block for the Thank you page is placed in the checkout editor (the app detects this automatically).

Only when the app can't detect this can you tick the checkbox yourself to mark the step as complete. A check you added by hand can be undone by clicking the completed icon.

When all steps are done, the heading changes to "Setup complete", with a "Completed" badge and the message "All steps are done. Your blocks are live on the Thank you page. You can edit them anytime from block management." The buttons are "Open block management" and "Open Thank you page".

What your store shows after setup

Place an actual order and check the Thank you page (the order complete page). For how to do this, see step 7 of Grow your email list from the Thank you page. Blocks are stacked vertically from top to bottom, in the same order as in Block management, with standard spacing between them. If there are no blocks to show, nothing is displayed.

Below is a real Thank you page for an order placed without logging in. It shows the thank-you message (with the order number), the LINE banner, recommended products and shipping information. Because this was a guest order (with a payment method that hadn't been paid yet), the coupon block isn't shown.

• Text blocks: the title and body are shown. Paragraphs, bold, italics, links and bulleted lists are supported. Variables such as the order number are replaced with the values for that order.
• Image blocks: shown at the size and alignment you set. If you set a link, the whole image becomes a link, and the "Open link in a new tab" setting is applied. If the image URL is invalid, the block isn't shown at all.
• You can check these regular blocks with test orders too. Only coupons have extra conditions (see What to check when the coupon isn't shown or issued).
• "Desktop" and "Mobile" are decided by the width of the area where the block is shown, not the browser window. If the area is wider than 450px it counts as desktop; at 450px or less it counts as mobile.

Troubleshooting

• Step 2 of the guide isn't checked
  Check (1) that not all of your blocks are "Inactive", and (2) that you added the app block in the checkout editor and pressed "Save". (3) If the app can't detect it, you can mark the step as complete with the checkbox. (4) If the published checkout configuration can't be retrieved, the link takes you to the top of the editor. In that case, choose "Thank you" with the page selector.
• Pressing "Open Thank you page" doesn't open the list of apps
  You may have landed on the top of the editor. As described above, choose "Thank you" with the page selector, then add "SAKU Thanks Custom" from the Apps icon on the left.
• My blocks don't appear on the Thank you page
  Usually it's one of these: the app block wasn't placed, the editor wasn't saved, the block isn't "Active", or it's the third or later block on the Free plan. See What to check when blocks don't appear for the order to check things in.
• I can't create a third block
  On the Free plan, you can create up to 2 blocks. Delete a block you don't need, or upgrade to the Pro plan (plan differences and how to change plans).
• The image picker doesn't open, or I can't choose an image
  If the picker isn't available, nothing happens. There's no way to enter a URL directly. Reload the page and try again. A file you've just added may not be selectable until processing finishes.
• The app is shown in English (or Japanese)
  The app follows the language of your Shopify admin: it's shown in Japanese when the admin is set to Japanese, and in English otherwise. Change the admin language to switch. The built-in wording on the Thank you page also follows the buyer's language (English for any language other than Japanese). Text you entered in blocks yourself is shown as you wrote it.
• "Unable to open app" appears
  Open the app again from the Shopify admin. This app has no login screen where you type your store name.