Shopify Order Printer App: Customising The Layout & CSS

Using the Shopify Order Printer App but need to make some adjustments? We hear you. This is a great app that allows you to customize the invoice templates a bit… but sometimes you need that little extra customization to make it your own.

The App itself doesn’t have any fancy buttons, settings or options to change colors, adjust widths, adjust logo placement and so-on — so, to make adjustments like these, you’ll need some custom formatting (called Custom CSS). Where to insert it? How does it look? What are some common adjustments? That’s where we come in.

This post will show you exactly where and how to insert custom CSS for the Shopify Order Printer App, as well as give you a starting point for some of the most common change requests.

Step 1:

Get the Shopify Order Printer App. It’s free. If you’re reading this, you most likely already have the app. (The main difference is — if you don’t have ANY order printer apps and just use Shopify’s default print screen, it’ll be a plain, normal invoice with no branding. Using the Shopify Order Printer App or a similar app, you can customize the way it looks). Already got the app? Great, see below.

Step 2:

Open an invoice. Log in to your Shopify Store, then go to Admin > Orders. Click on any order (click on the order number, NOT the person’s name or it will open their customer account. E.g. where you see a 4-number sequence in an order, click on it. It doesn’t matter which order).

Step 3:

Open the invoice template. Up the top right, you’ll see 3 dots. Click on this, then “Print with Order Printer”.

On the right, you’ll see your templates. Next, to the one you want to edit — most likely it’ll be called “Invoice” – click “Edit”.

Before moving ahead from this step, I’d STRONGLY recommend making a backup of this, in case you have any missteps or need to revert back to the default.

To do this, firstly do a CTRL+A to copy ALL, then paste it into a text file and save it onto your hard drive.

Step 4:

Scroll to the very BOTTOM of the template. This is where we’re going to create a stylesheet that you can add your custom styles too. Paste this in there if you’d like to center align your logo:

<style>

.top-logo {
display: inline;
margin-left: 5%;
max-height: 130px;
}

</style>

Step 5:

Add any other custom styles. First, you can now preview this by clicking save. When you save, you’ll see the same order, but with your new styles applied. If you’re happy with it, then, good to go. If you’d like to adjust it still to add more styles, repeat steps 3 and 4 (editing the template, then saving) until you’re happy with it.

To add your own styles, I’d highly recommend getting the FireBug tool for Firefox or using Google’s Chrome Inspector. This is the tricky part for us to create in an article, as every site and need will be different. Above, though, now that you have a stylesheet (Everything inside <style> and </style>), you can create whichever styles you like, and apply them to your template.

Thank you for visiting our Shopify Insider Blog @ Blackbelt Commerce; Please check out these other great resources that will help you improve your store: How To Back Up Your Shopify Store, SEO For Your Shopify Store and Shopify Plus + When & How To Transition, 6 ways to boost your shopify the ultimate guide on best shoify Apps-2019.   As always, please send me a note I will be sure to answer @ [email protected]

Questions: Have a specific style you’re trying to apply but can’t quite get right? Feel free to reply here and we’ll do our best to answer.