Page break in Order Printer

Solved
Highlighted
Excursionist
14 1 7

Hi there,

I am looking for a way to add a page break in the Order Printer template. The goal is to have the packing slip on the front page and some company info on the back page.

I have tried a couple of things without any luck. Like this: 

https://stackoverflow.com/questions/1664049/can-i-force-a-page-break-in-html-printing

 

Is there a way to do it?

0 Likes
Highlighted
Excursionist
14 1 7

This is an accepted solution.

I figured it out. In the Order Printer template there is some CSS in the bottom of the code.

Within the .header {} there is a line:

display: -webkit-box;

When i commented that part out the page would break.

I am not fluent enough in CSS to know what webkit-box does. But it doesn't seem to break anything when i remove it.

0 Likes
Highlighted
Shopify Partner
17 1 0

Hi Brando

 

I'm trying to do the same thing. Where exactly do you locate the .header { } ? I can't seem to find it in the code.  I'm assuming you're referring to the Order Printer template right?

 

thanks!

Adrian

0 Likes
Highlighted
Excursionist
14 1 7

Hey @Adrian23 ,


The Order Printer template can be found here:

https://brando-no.myshopify.com/admin/settings/packing_slip_template

 

Towards the end of the file you should find:  <style type="text/css">

Within this style segment you should be able to locate: .header

0 Likes
Highlighted
Tourist
3 0 1

The following worked for me:

 

Insert

page-break-after: always;

just inside .wrapper style.

For example:

 .wrapper {
    width: 831px;
    margin: auto;
    padding: 4em;
    font-family: "Noto Sans", sans-serif;
    font-weight: 250;
    page-break-after: always;
  }

 

This will make the top div "wrapper" to break page after closing div. You can code after the wrapper div, put your text, etc. Wherever, it will print on another page. 

0 Likes