A5 Paper Size Printing from email settings

19

I created a second one for invoices because i needed three columns in my invoice printout which is description, qty and amount. Qty column does not work on receipt as it is not available for preview even in the built in theme. Find it below;

For POS 58 Printer - Invoice Theme

Setup: Go to the Themes section of Manager settings page, click on the New Theme button, copy the code below and paste in the Theme Textarea then Choose a name of your choice for the theme and click Create to save.

Usage: Go to Forms Default section of Manager settings page, look for Sales Invoice and click Edit scroll down and Mark the Checkbox for Custom Theme, then Select the Theme you just added from the dropdown under the Custom Theme checkbox.

<table style="background-color: #FFFFFF: width: 50px; color: #000000; text-transform: UPPERCASE">
{% assign description = null %}
{% assign qty = null %}
{% assign amount = null %}
<thead>
  <tr>
    <td>
     <div style="text-align: center; width: 250px; word-wrap: break-word; margin-top: 3; margin-bottom: 30px">
        <div style="font-size: 20px; font-weight: bold; margin: 5px 0 10px 0">{{ business.name }}</div>
         <div>{{ business.address | replace: "\n", " " }}</div>
        <div style="font-weight: bold; font-size: 15px; padding: 5px; text-align: center; margin-bottom: 0px color: #000000; margin-top: 30px">{{ title }}</div>
        <div style="font-weight: bold; margin-top: 20px">Customer Name: <span style="font-weight: normal">{{ recipient.name }}</span></div>
    </div>
   </td>
 </tr>
 <tr>
   <td>
       <div style="text-align: center; width: 250px; word-wrap: break-word; margin-bottom: 30px">
        {% for field in fields %}
       <div style="display: inline-block">
        <div style="font-weight: bold; float: left; margin-right: 5px">{{ field.label }}: </div>
        <div style="float:left; margin-bottom: 10px; margin-right: 5px">{{ field.text }}</div>
      </div>
      {% endfor %}
    </td>
  </tr>
   <tr>
  <div style="width: 250px; word-wrap: break-word; margin-bottom: 30px">
    <div style="max-width: 100%; margin: 0 auto">

    </div>
    <td style="font-weight: bold; color: #000000; text-align: left; padding-left: 0px; padding-right: 0px; width: inherit; margin: 0 auto;">
      <div style="width: 280px;">
       {% for column in table.columns %}
            {% case column.label %}
                {% when 'Description' %}
                    {% assign description = forloop.index0 %}
                    <span style="display: block; word-wrap: break-word; width: 53%; float:left">{{ column.label }}</span>
                {% when 'Qty' %}
                    {% assign qty = forloop.index0 %}
                    <span style="display: block; word-wrap: break-word; width: 17%; float:left">{{ column.label }}</span>
                {% when 'Total' or 'Amount' %}
                    {% assign amount = forloop.index0 %}
                    <span style="display: block; word-wrap: break-word; width: 30%; float:left">Amount</span>
            {% endcase %}
        {% endfor %}
      </div>
    </td>
    </div>
   </tr>
 </thead>
 <tbody>
{% for row in table.rows %}
<tr>
  <div style="width: 250px; word-wrap: break-word; margin: 0px 0px 20px 0px; clear: both">
    <div style="max-width: 100%; margin: 0 auto">
      <td style="color: #000000; text-align: left; padding-left: 0px; padding-right: 3px; width: inherit; margin: 0 auto;">
        <div style="width: 280px">
        {% for cell in row.cells %}
            {% case forloop.index0 %}
                {% when description %}
                    <span style="display: block; word-wrap: break-word; width: 53%; float:left">{{ cell.text }}</span>
                {% when qty %}
                    <span style="display: block; word-wrap: break-word; width: 17%; float:left">{{ cell.text }}</span>
                {% when amount %}
                    <span style="display: block; word-wrap: break-word; width: 30%; float:left">{{ cell.text }}</span>
            {% endcase %}
        {% endfor %}
        </div>
      </td>
    </div>
    </div>
   </tr>
   {% endfor %}
   {% for total in table.totals %}
  <tr>
  <div style="width: 300px; word-wrap: break-word; clear: both">
    <div style="max-width: 100%; margin: 0 auto">
      <td style="text-align: left; font-weight: bold; font-size: 13px">
        <div style="width: 250px">
          <span style="display: block; float:left; width: 70%; margin-top: 20px; margin-bottom: 15px;">{{ total.label }}:</span>
          <span style="display: block; float:left; width: 30%; margin-top: 20px; margin-bottom: 15px;">{{ total.text }}</span>
        </div>
      </td>
    </div>
  </div>
</tr>
{% endfor %}
<tr>
  <div style="width: 300px; word-wrap: break-word; margin-bottom: 20px">
    <div style="max-width: 100%; margin: 15px auto 0 auto">
      <td>
        <div style="padding-left: 2px; width: 280px; word-wrap: break-word">
          {% for field in custom_fields %}
          <div style="font-weight: bold; margin-top: 15px">{{ field.label }}</div>
          <div style="padding-bottom: 20px; margin-top: 15px">{{ field.text | newline_to_br }}</div>
          {% endfor %}
        </div>
      </td>
      </div>
    </div>
</tr>
<tr>
  <div style="width: 300px; word-wrap: break-word; margin: 0px 0px 10px 0px">
    <div style="max-width: 100%; margin: 15px auto 15px auto">
      <td>
        <div style="padding-left: 4px; width: 250px; word-wrap: break-word; text-align: center">
          <p><b>Thank you for choosing {{ business.name }}.</b></p>
        </div>
      </td>
      </div>
    </div>
</tr>
</tbody>
</table>

There are three major types of POS thermal printers, the smallest if POS-58, middle on is POS-70 and the biggest is POS-80.

The themes I shared are based on POS-58. If you need for other Thermal printer types please let me know.

If you know HTML and CSS you can simply increase the width: CSS property value until you get the desired size.

Thank you.

8 Likes