SAKU Thanks Custom: What you can and can't do with the Custom HTML block

If you're not comfortable with HTML and CSS, don't use this block — use a "Text" block instead. It lets you add bold, links and bulleted lists at the press of a button (see "How to add images and text to the Thank you page"). This article is for people who can write HTML.

[Terms] A "block" is one piece of content shown on the Thank you page (you create blocks in the app's "Block management"). The "app block" is "SAKU Thanks Custom", which you place in Shopify's checkout editor. Once the app block is in place, the blocks you've created appear on the Thank you page.

This article explains how to use the "Custom HTML" block, which shows your own HTML content on the Thank you page. There are limits on the tags and styling (CSS) you can use, so check here what is and isn't possible. The Custom HTML block is available on the Free plan too (you can create and show up to 2 blocks).

In this article

• How to create a Custom HTML block
• The tags, variables and CSS you can use
• How to fix input errors
• How it looks on the Thank you page

Where to go: Shopify admin → Apps → "SAKU Thanks Custom" → "Blocks" → "Create block" → "Custom HTML"

1️⃣ Create a "Custom HTML" block

Open "Blocks" in the left menu → "Create block", and under "Choose block type" click "Custom HTML" (described as "Shows HTML using allowed tags."). The page heading is "Create block (Custom HTML)".

Enter a "Block name (internal)" under "Basic settings" (required, up to 100 characters). It isn't shown on the Thank you page. "Show this block on the Thank you page" is on by default. This block has no "Display title" field; write the title inside the HTML body instead.

The red box shows "Basic settings", where you enter the block name and turn display on or off (the screen shows a coupon block as an example; Custom HTML has the same "Basic settings").

2️⃣ Enter the "HTML body"

Enter your HTML in "HTML body" under "Content" (an 8-line field, up to 10,000 characters). Only these 8 tags can be used:

Example:

<p><strong>About shipping</strong></p>
<ul>
<li>Orders usually ship within 2–3 business days.</li>
<li>If you have any questions, please <a href="https://example.com/contact">contact us</a>.</li>
</ul>

• Tags that aren't allowed, such as script, are removed when you save.
• Liquid ({% %}, {{ product.title }} and so on) can't be used.
• Only the following 3 variables can be used. They are replaced with the actual values for each buyer.

Any other variable is left blank. The preview uses sample values.

3️⃣ Style it with "CSS" (optional)

You can enter styling in "CSS (scoped to this custom HTML block)" under "Appearance" (a 6-line field, up to 5,000 characters). This CSS only applies inside this HTML block.

Because of how Shopify's checkout works, only certain styles can be used.

Which properties work depends on the selector. :host supports background, border, padding, border-radius and gap; p supports text color, font size and removing italics; strong and em support text color, weight and italics; a supports text color only (default color only). For example, a { color: red; } has no effect.

The values you enter are rounded to fixed steps that match the checkout design. For example:

• color: you can use color names such as black, gray, blue, green, orange and red (plus some hex colors). Other colors have no effect.
• background: only a few values, such as white, gray and transparent, can be used.
• padding, border-radius, gap: numbers such as "12px" are rounded to the nearest step.
• font-size: 14px or less becomes "small"; anything larger becomes "base" (normal).
• Only bold works for font-weight, and only normal works for font-style.

url(), calc(), var() and similar functions can't be used.

Example:

:host { padding: 12px; background: gray; border-radius: 8px; }
strong { color: red; }

CSS isn't applied in the preview (it says "CSS is not reflected in the preview. It is scoped only to this HTML block."). Check how the CSS looks on the Thank you page.

4️⃣ Save and check for errors

Press "Save" at the bottom of the page. If an error appears, fix it as follows.

[Don't forget] Next, you need to place "SAKU Thanks Custom" on the Thank you page. If you don't, nothing appears. If you haven't placed it yet: (1) press "Open Thank you page" in step 2 of the setup guide on the "Home" page, (2) on the page that opens, press the "+" to the right of "SAKU Thanks Custom" and choose "Thank you" under "Add to:", then (3) press "Save" at the top right. For details, see step 6 of "How to add images and text to the Thank you page".

What your store shows after setup

The Thank you page shows paragraphs, lists, bold, italics and links made with the allowed tags. Your CSS is converted into settings that match the checkout design and applied to borders, backgrounds, padding, text colors and so on.

Troubleshooting

• I wrote Liquid but it doesn't work
  Liquid can't be used in Custom HTML. The only variables you can use are {{ order_name }}, {{ confirmation_number }} and {{ shop_name }}.
• My CSS has no effect
  The only selectors you can use are :host, p, strong, em and a. Which properties work depends on the selector (for example, a { color: red; } has no effect). Colors and numbers are rounded to fixed steps. CSS isn't shown in the preview, so check it on the Thank you page.
• script and style tags disappear
  For security, any tags other than the allowed ones are removed when you save. Put your styling in the "CSS" field.
• A link doesn't work
  Only link URLs that start with https are valid.