Creación y edición de plantillas con Order Printer de Shopify
Puedes crear y editar plantillas con la aplicación Order Printer en el panel de control de Shopify. De forma predeterminada, la aplicación incluye las siguientes plantillas:
- Factura: una factura que puedes enviar a un cliente.
- Nota de entrega: una impresión de la dirección de la tienda y la dirección de envío del cliente.
Puedes usar Liquid a fin de crear tus propias plantillas personalizadas para otros insertos de embalaje, como cupones, etiquetas o recibos. La aplicación Order Printer de Shopify admite plantillas hechas con HTML, CSS y variables de Liquid.
En esta página
Consideraciones para crear plantillas en la aplicación Order Printer de Shopify
Revisa las siguientes consideraciones antes de crear plantillas en la aplicación Order Printer de Shopify:
- Para crear o editar plantillas en la aplicación Order Printer de Shopify, debes tener conocimientos de HTML, CSS y Liquid. La atención al cliente de temas de Shopify puede ayudarte con ajustes menores dentro del alcance de la política de diseño de Shopify.
- Puedes crear hasta 15 plantillas diferentes.
- Revisa la referencia de variables y filtros de Liquid para Order Printer de Shopify para todas las personalizaciones de plantilla compatibles.
Crear una plantilla
Puedes crear una nueva plantilla para el documento de pedido.
Pasos:
- En el panel de control de Shopify, haz clic en Configuración > Aplicaciones y canales de ventas.
- Haz clic en Order Printer.
Haz clic en Abrir aplicación.
Haz clic en Plantillas.
Haz clic en Crear una plantilla.
En el campo Nombre, introduce un nombre para la plantilla, como etiqueta o cupón.
En la sección Editar código, agrega el código HTML, CSS o Liquid para crear la plantilla.
Opcional: Para obtener una vista previa de la plantilla, haz clic en Vista previa.
Haz clic en Guardar.
Editar una plantilla
Puedes editar una plantilla existente. Para obtener más información sobre las personalizaciones de plantillas, consulta Ejemplos de personalizaciones de plantillas.
Pasos:
- En el panel de control de Shopify, haz clic en Configuración > Aplicaciones y canales de ventas.
- Haz clic en Order Printer.
Haz clic en Abrir aplicación.
Haz clic en Plantillas.
Haz clic en la plantilla que deseas editar.
En la sección Editar código, agrega o edita el código HTML, CSS o Liquid.
Opcional: Para obtener una vista previa de la plantilla, haz clic en Vista previa.
Haz clic en Guardar.
Restablecer la plantilla predeterminada
Puedes restaurar las plantillas de nota de entrega y factura integradas a sus valores predeterminados. Usa los siguientes bloques de código para restaurar tus plantillas al valor predeterminado.
Plantilla predeterminada de factura
Versión del 6 de junio de 2024.
liquid
<div>
<div class="columns">
<h1>Invoice</h1>
<div>
<p style="text-align: right; margin: 0;">
Order {{ order.order_name }}<br />
{% if order.po_number %}PO # {{ order.po_number }}<br />{% endif %}
{{ order.created_at | date: "%B %e, %Y" }}
</p>
</div>
</div>
<div class="columns" style="margin-top: 1.5em;">
<div class="address">
<strong>From</strong><br/>
{{ shop.name }}<br/>
{{ shop.address | format_address }}
{% if shop.phone %}{{ shop.phone }}{% endif %}
</div>
{% if order.billing_address %}
<div class="address">
<strong>Bill to</strong>
{{ order.billing_address | format_address }}
</div>
{% endif %}
{% if order.shipping_address %}
<div class="address">
<strong>Ship to</strong>
{{ order.shipping_address | format_address }}
{% if order.shipping_address.phone %}{{ order.shipping_address.phone }}{% endif %}
</div>
{% endif %}
</div>
<hr />
<h2>Order Details</h2>
<table class="table-tabular" style="margin: 1em 0 0 0;">
<thead>
<tr>
<th>Qty</th>
<th>Item</th>
<th style="text-align: right;">Price</th>
</tr>
</thead>
<tbody>
{% for line_item in order.line_items %}
<tr>
<td>{{ line_item.quantity }}</td>
<td>{{ line_item.title }}
{% if line_item.line_level_discount_allocations.size > 0 %}
<span class="subduedText">
{% for discount_allocation in line_item.line_level_discount_allocations %}
<br>{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
{% endfor %}
</span>
{% endif %}
</td>
<td style="text-align: right;">
{% if line_item.original_price != line_item.final_price %}
<span class="subduedText"><s>{{ line_item.original_price | money }}</s></span>
{% endif %}
{{ line_item.final_price | money }}
</td>
</tr>
{% endfor %}
<tr>
<td colspan="2" style="text-align: right;">Subtotal</td>
<td style="text-align: right;">{{ order.line_items_subtotal_price | money }}</td>
</tr>
{% for discount_application in order.cart_level_discount_applications %}
<tr>
<td colspan="2" style="text-align: right;">{% if discount_application.title %}<span class="subduedText">{{ discount_application.title }}</span>{% endif %}</td>
<td style="text-align: right;">-{{ discount_application.total_allocated_amount | money }}</td>
</tr>
{% endfor %}
<tr>
<td colspan="2" style="text-align: right;">Tax</td>
<td style="text-align: right;">{{ order.tax_price | money }}</td>
</tr>
{% if order.shipping_address %}
<tr>
<td colspan="2" style="text-align: right;">Shipping</td>
<td style="text-align: right;">{{ order.shipping_price | money }}</td>
</tr>
{% endif %}
<tr>
<td colspan="2" style="text-align: right;"><strong>Total</strong></td>
<td style="text-align: right;"><strong>{{ order.total_price | money }}</strong></td>
</tr>
{% if order.net_payment != order.total_net_amount %}
<tr>
<td colspan="2" style="text-align: right;">Total Paid</td>
<td style="text-align: right;">{{ order.net_payment | money }}</td>
</tr>
{% endif %}
{% if order.total_refunded_amount > 0 %}
<tr>
<td colspan="2" style="text-align: right;">Total Refunded</td>
<td style="text-align: right;">-{{ order.total_refunded_amount | money }}</td>
</tr>
{% endif %}
{% if order.net_payment != order.total_net_amount %}
<tr>
<td colspan="2" style="text-align: right;"><strong>Outstanding Amount</strong></td>
<td style="text-align: right;"><strong>{{ order.total_price | minus: order.net_payment | money }}</strong></td>
</tr>
{% endif %}
</tbody>
</table>
{% if transactions.size > 1 %}
<h2>Transaction Details</h2>
<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 %}
{% if order.note %}
<h2>Note</h2>
<p>{{ order.note }}</p>
{% endif %}
<p style="margin-bottom: 0;">If you have any questions, please send an email to <u>{{ shop.email }}</u></p>
</div>
Plantilla predeterminada de nota de entrega
Versión del 6 de junio de 2024.
liquid
<div>
<div class="columns">
<h1>Packing Slip</h1>
<div class="address">
<p style="text-align: right; margin: 0;">
Order {{ order.order_name }}<br />
{% if order.po_number %}PO # {{ order.po_number }}<br />{% endif %}
{{ order.created_at | date: "%B %e, %Y" }}
</p>
</div>
</div>
<div class="columns" style="margin-top: 1.5em;">
<div class="address">
<strong>From</strong><br/>
{{ shop.name }}<br/>
{{ shop.address | format_address }}
</div>
{% if order.shipping_address %}
<div class="address">
<strong>Ship to</strong>
{{ order.shipping_address | format_address }}
</div>
{% endif %}
</div>
<hr />
<h2>Order Details</h2>
<table class="table-tabular" style="margin: 1em 0 0 0;">
<thead>
<tr>
<th style="width: 15%; text-align: left;">Qty</th>
<th style="width: 85%; text-align: left;">Item</th>
</tr>
</thead>
<tbody>
{% for line_item in order.line_items %}
<tr>
<td style="text-align: left;">{{ line_item.quantity }}</td>
<td style="text-align: left;">{{ line_item.title }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>