Here’s a simple tip to make your Shopify invoices from Pixel Printer looking a bit more professional. If you use a logo, you know that it prints out all blocky. To add a bit more detail and a crisper look you should use a bigger image and scale it down in HTML.
As a guide, you should use an image about 3-4 times bigger. Screen graphics (PNG and JPEG) are roughly 72dpi (dots per inch). For crisp printing you need 300 and up. Some scaling is required.
Example:
If the logo you currently use is 200px wide and 100px tall, you should get a bigger version of this logo. Try 800 x 400px. The rule is simple: multiply each dimension by the same amount, in this case, 200x4 = 800 and 100x4 = 400. This guarantees that the logo has the same proportions. I think it’s better to use an integer scaling factor to help browsers out a bit, otherwise it might look worse on screen. Upload this new logo in shopify into the files area. In Pixel Printer, restrict the image in HTML to the original size like so:
<img href=”MY-800x400-LOGO.PNG” width=”200” height=”100” />
Replace “MY-800x400-LOGO.PNG” with the URL Shopify gives you after you upload the file. Note, if you don’t specify the width and height, you will get a huge image on your invoice, which is not what you want.
When you look at the logo on your screen it may look worse than it did before. This is not a problem because we use PixelPrinter for printing invoices, not looking at them on screen.
Try printing and you’ll see that your logo now has all the crispy details you expect. If this tip doesn’t work for you, try using Firefox.
Tags:
shopify
technical
graphics
tutorial