App features
- Customers issue documents themselves from the Thank you page, order status page and emails
- Invoice registration number (Japan) and tax breakdowns by rate (8% / 10%)
- Set your company logo, stamp and theme color
- Print from the admin one order at a time or in bulk
- Documents in Japanese and English
- Pro plan: remarks by payment method or tag, issued tags and issue limits
- Hydrogen plan: issue documents on headless (Hydrogen) stores too
*Note
Supports new customer accounts.
Partially supports classic customer accounts (supported themes: Dawn, Rise and Studio).
This article explains how to fine-tune font sizes, colors, spacing and more on your documents with CSS. It's intended for setups done by a web agency or someone familiar with CSS.
Note: this feature is available on the Pro and Hydrogen plans (you can try it for free on development stores). For details on plans, see "Pricing plans".
In this article
- How to add custom CSS
- How to find where to apply CSS (selectors)
- Where the CSS applies
Where to find it: Shopify admin → Apps → "SAKU Receipt" → "Settings" in the left menu → "Custom CSS"
What you need before you start
- SAKU Receipts is installed
- The Pro or Hydrogen plan (you can try it for free on development stores)
- Basic CSS knowledge (or a web agency or someone familiar with CSS to do it for you)
- Your browser's developer tools (in Chrome, right-click → "Inspect")
1️⃣ Enter your CSS
Enter CSS in "Custom CSS" at the bottom of the Settings page. The preview on the right updates as you type, so check the look and then click "Save". You're done when the change shows in the preview.
The CSS you enter is reflected in the preview on the right right away.
For example, to make the title larger with wider letter spacing and the company name a little lighter, write the following.
h1.title { font-size: 34px; letter-spacing: 14px; }
.company-name { color: #555555; }In this example, here is what you can and can't change.
| Part | How to treat it |
|---|---|
Values such as 34px, 14px and #555555 |
You can change these to any size or color you like |
Property names such as font-size, letter-spacing and color |
Choose them to match what you want to change |
Selectors such as h1.title and .company-name (before the braces { }) |
These must match the class names of the document elements. If you change them, the CSS applies to a different element or has no effect. See 2️⃣ for how to look them up |
{ }, : and ; |
Part of CSS syntax. If you delete them, you can't save |
2️⃣ Find the selectors
- Open your browser's developer tools (in Chrome, right-click → "Inspect").
- Select the element you want to change in the document preview on the right.
- Check the class name on that element and use it in your selector. Put a "." before the class name (for example, if the class name is company-name, the selector is
.company-name). - Write it in Custom CSS and check that the change shows in the preview.
3️⃣ Where the CSS applies
- Your CSS applies only inside SAKU Receipts documents (inside
.receipt-print-container). It doesn't affect any other pages of your store. - It applies the same way to the preview, printing from the admin, and the customer-facing documents.
-
@importandscriptare removed when you save. - To go back to the default look, clear the field and save.
Troubleshooting
-
I can't save
If your CSS has a mistake (such as a missing closing brace), the message "Custom CSS has a syntax error and can't be saved" appears. Fix the part shown and save again. -
My CSS doesn't take effect
Check in the developer tools that your selector matches the document element. If another rule overrides yours, make your selector more specific.
For settings that don't need CSS, such as colors and logos, see "Setting up the document format".
