Change the layout of invoices and packing slips

Are you dissatisfied, for example, with the layout of your invoices? Then navigate to GENERAL > Design > Content editor, using the left menu of the back office. The content editor offers you the possibility to tailor the layout of your e-mail messages, invoices, packing notes and estimates to your wishes. This is done by means of HTML and CSS.

Note: HTML and CSS expertise is required. If you lack the experience, we strongly advise against using the content editor. SEOshop does not offer support for this.

Editing layout

Regardless whether you are editing packing notes or invoices, all editing sections work the same. Which is why we used editing an invoice as an example.

Navigate to GENERAL > Design > Content editor in the left menu and click Invoice. You will be taken to the edit page of the invoice in question. In the big black area you will see the invoice code. At the right at the top of it, you will see a number of drop-down menus:

  • Editor theme: Dark or Light – Here you can choose the background color while editing your code. By default, it is set to Dark (black). If you prefer a white background, select Light in the drop-down menu.
  • Indent mode: Tabs or Spaces – To keep the code neatly arranged, tabs are used frequently. Tabs are text indents that are used to indicate the code level. This applies to both tabs and spaces. This drop-down menu is used to determine tab behavior. If you select the Tab option, indents are used (as you may be familiar with in Word or other text editing software). If you remove a tab, the entire indent will be erased. An example: To create a text indent, you can use tabs. If you select the Space option, indents are divided into a number of spaces. When using Spaces, it is possible to make a normal-size indent and subsequently go back one space. An example: Normal indent Normal indent minus one space > Note: This tool only works with new tabs. Indents that already existed before starting the editing process are configured as tabs.
  • Indent size: 2, 4 or 8 – This is the distance between the various types of code, that make clear where a code fragment starts and where it ends, for example:
    <header data-repeat="true">
     <div class="clearfix">
       <img class="pull-right" src="{{ invoice.barcode }}" width="284"  height="20" alt="Barcode" />
     </div>
     <div class="spacer"></div>
    </header>
    

      The dashes in front of the code show the indent size. For example, the div class clearfix is indented 2 spaces compared to the header code, whereas the img class code is indented an additional 2 spaces compared to the div class

  • Line wrap mode – No wrap or Soft wrapping – Wrapping creates a frame. If you select Soft wrapping, all text lines will fit within the frame. If a line’s length exceeds the frame width, the code will continue on the next line. When No wrapping is selected, the line will exceed the screen width and you will have to scroll back and forth.

In the menu at the right side of the screen, you will find all codes that have been used or can be used within a code fragment. For example, if you click Country below the Store drop-down menu, {{ shop.region }} is inserted in the code, at the current cursor location.

Preview

As soon as you click Save at the right at the bottom of the screen, changes are implemented and become effective immediately. Small code errors can cause significant problems. Avoid them by always checking a preview of your changes, by clicking the Preview button at the right at the bottom of the screen. A pop-up window will open, displaying an example.

Variables

 Array
(
    [shop] => Array
        (
            [name] => 
            [logo] => 
            [url] => 
            [domain] => 
            [email] => 
            [phone] => 
            [fax] => 
            [street] => 
            [postcode] => 
            [city] => 
            [region] => 
            [country] => 
            [accountholder] => 
            [bankaccount] => 
            [bankcode] => 
            [bankname] => 
            [iban] => 
            [swift] => 
            [paymentreference] => 
            [cocnumber] => 
            [coccity] => 
            [vatnumber] => 
            [nationalid] => 
            [companyowner] => 
        )

    [theme] => Array
        (
            [color_1] => 
            [color_2] => 
            [color_3] => 
            [color_4] => 
        )

    [order] => Array
        (
            [id] => 
            [number] => 
            [date] => 
            [comment] => 
            [memo] => 
            [products] => Array
                (
                    [0] => Array
                        (
                            [id] =>
                            [articlecode] => 
                            [name] => 
                            [variant] => 
                            [sku] => 
                            [ean] => 
                            [hs] => 
                            [vat] => 
                            [unitprice] => 
                            [unitprice_ex] => 
                            [discount] => 
                            [quantity] => 
                            [subtotal] => 
                        )

                    [1] => Array
                        (
                            [id] => 
                            [articlecode] => 
                            [name] => 
                            [variant] => 
                            [sku] => 
                            [ean] => 
                            [hs] => 
                            [vat] => 
                            [unitprice] => 
                            [unitprice_ex] => 
                            [discount] => 
                            [quantity] => 
                            [subtotal] => 
                        )

                    [_shippingcosts_] => Array
                        (
                            [id] => 
                            [articlecode] => 
                            [name] => 
                            [variant] => 
                            [sku] => 
                            [ean] => 
                            [hs] => 
                            [vat] => 
                            [unitprice] => 
                            [unitprice_ex] => 
                            [discount] => 
                            [quantity] => 
                            [subtotal] => 
                        )

                )

            [discount] => 
            [is_vatshifted] => 1
        )

    [invoice] => Array
        (
            [id] => 
            [number] => 
            [date] => 
            [price] => 
            [price_ex] => 
            [taxes] => 
            [barcode] => 
            [deliverytime] => 
            [deliverydate] => 
            [legalnote] => 
            [note] => 
            [footer] => 
            [is_credit] => 
        )

    [payment] => Array
        (
            [method] =>
        )

    [customer] => Array
        (
            [id] => 334
            [firstname] => 
            [middlename] => 
            [lastname] => 
            [phone] => 
            [mobile] => 
            [email] => 
            [nationalid] => 
            [is_company] => 
            [company] => 
            [cocnumber] => 
            [vatnumber] => 
        )

    [billingaddress] => Array
        (
            [company] => 
            [name] => 
            [address] => 
            [zipcode] => 
            [city] => 
            [region] => 
            [country] => 
        )

    [shippingaddress] => Array
        (
            [company] => 
            [name] => 
            [address] => 
            [zipcode] => 
            [city] => 
            [region] => 
            [country] => 
        )

    [language] => Array
        (
            [language] => 1
        )

    [options] => Array
        (
            [hide_customer_details] => 
        )

) 
Have more questions? Submit a request || || Request a callback