Hi,
Two questions!
First, I would like to get lines under the headlines "Item details" and "Payment Details" instead of borders.
I have tried to style with no border but can't get it to work.
Second, can I get the "Billing Details" to be displayed beside the right of "Shipping Details" instead of under it?
Thanks in advance!
<style>
* {
font-size:13px;
font-family: 'fakt';
color: #4f4f4f;
}
</style>
<div style="width: 100%; margin: 10x;">
<p style="float: right; text-align: right; margin: 0;">
{{ created_at | date: "%d/%m/%y" }}<br />
Invoice for {{ order_name }}
</p>
<img src="https://cdn.shopify.com/s/files/1/asd" style="width:200px; height:auto;";>
<div style="float: left; margin: 0 0 1.5em 0;" ><br />
<br/><th>Company AB</th> <br/>
{{ shop.address }}<br/>
{{ shop.city }} {{ shop.province_code }} {{ shop.zip | upcase }}<br/>
{{ shop.country }} <br/>
<th>Org. no: 12345</th> <br/>
<th>VAT no: 12345</th> <br/>
</div>
<hr />
<h3 style="margin: 0 0 0.5em 0;">Item Details</h3>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
<thead>
<tr>
<th>Quantity</th>
<th>Item</th>
<th>SKU</th>
{% if show_line_item_taxes %}
<th>Taxes</th>
{% endif %}
<th>Price</th>
</tr>
</thead>
<tbody>
{% for line_item in line_items %}
<tr>
<td style>{{ line_item.quantity }} x</td>
<td><b>{{ line_item.title }}</b></td>
<td><b>{{ line_item.sku }}</b></td>
{% if show_line_item_taxes %}
<td>
{% for tax_line in line_item.tax_lines %}
{{ tax_line.price | money }} {{ tax_line.title }}<br/>
{% endfor %}
</td>
{% endif %}
<td>
{% if line_item.original_price != line_item.price %}
<s>{{ line_item.original_price | money }}</s>
{% endif %}
{{ line_item.price | money }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% if transactions.size > 1 %}
<h3 style="margin: 0 0 0.5em 0;">Transaction Details</h3>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
<thead>
<tr>
<th>Type</th>
<th>Amount</th>
<th>Kind</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{% for transaction in transactions %}
<tr>
<td>{{ transaction.gateway | payment_method }}</td>
<td>{{ transaction.amount | money }}</td>
<td>{{ transaction.kind }}</td>
<td>{{ transaction.status }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
<h3 style="margin: 0 0 0.5em 0;">Payment Details</h3>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
<tr>
<td>Subtotal price:</td>
<td>{{ subtotal_price | money }}</td>
</tr>
{% for discount in discounts %}
<tr>
<td>Includes discount "{{ discount.code }}"</td>
<td>{{ discount.savings | money }}</td>
</tr>
{% endfor %}
{% if shipping_address %}
<tr>
<td>Shipping:</td>
<td>{{ shipping_price | money }}</td>
</tr>
{% endif %}
<tr>
<td>Total tax:</td>
<td>{{ tax_price | money }}</td>
</tr>
<tr>
<td><strong>Total price:</strong></td>
<td><strong>{{ total_price | money }}</strong></td>
</tr>
{% if total_paid != total_price %}
<tr>
<td><strong>Total paid:</strong></td>
<td><strong>{{ total_paid | money }}</strong></td>
</tr>
<tr>
<td><strong>Outstanding Amount:</strong></td>
<td><strong>{{ total_price | minus: total_paid | money }}</strong></td>
</tr>
{% endif %}
</table>
{% if note %}
<h3 style="margin: 0 0 1em 0;">Note</h3>
<p>{{ note }}</p>
{% endif %}
{% if shipping_address %}
<h3 style="margin: 0 0 0em 0;">Shipping Details</h3>
<div style="margin: 0 0 1em 0; padding: 1em; border: 0px solid black;">
<strong>{{ shipping_address.name }}</strong><br/>
{{ shipping_address | format_address }}
</div>
{% endif %}
{% if billing_address %}
<h3 style="margin: 0 0 0em 0;">Billing Details</h3>
<div style="margin: 0 0 1em 0; padding: 1em; border: 0px solid black;">
<strong>{{ billing_address.name }}</strong><br/>
{% if billing_address.company %}
{{ billing_address.company }}<br/>
{% endif %}
{{ billing_address.street }}<br/>
{{ billing_address.city }}
{{ billing_address.province_code }}
{{ billing_address.zip | upcase }}<br/>
{{ billing_address.country }}
</div>
{% endif %}
<br/>
<p>If you have any questions, please send an email to <u>support@company.com </u></p>
</div>
