Editor de código de recibos impresos para Shopify POS
Puedes personalizar los recibos impresos con el editor de código en el panel de control de Shopify. Los archivos que componen los recibos contienen Liquid, el lenguaje de plantilla de Shopify. Con el editor de código puedes crear personalizaciones más avanzadas con HTML, CSS y Liquid que con el editor visual.
Puedes cambiar la plantilla del recibo y las plantillas de secciones usadas en los recibos impresos. Los archivos de plantilla de Recibos son los tipos de recibos que puedes imprimir en la tienda. Las Secciones son partes del recibo, como el encabezado o el pie de página. Las secciones se pueden reutilizar en varios recibos.
En esta página
- Consideraciones para usar el editor de código de recibos
- Acceder al editor de código
- Usar archivos personalizados en la plantilla de recibo
- Restablecer la plantilla de recibo a los valores predeterminados
- Variables de Liquid disponibles en el editor de código de recibos
- Filtros de Liquid disponibles en el editor de código de recibos
- Ejemplo de personalización de código en la plantilla de recibo impreso
- Previsualizar los cambios de código en el editor de código
Consideraciones para usar el editor de código de recibos
Antes de usar el editor de código de recibos, revisa las siguientes consideraciones:
Restricciones de acceso
- Solo puedes usar el editor de código desde el panel de control de Shopify en un dispositivo de escritorio.
- El editor de código no está disponible para las sucursales de POS en Italia.
Dónde se aplican los cambios
- Los cambios de código que realices solo se aplican a la sucursal seleccionada.
- Las personalizaciones en el editor de código se aplican solo a las sucursales POS Pro. Si usas el editor de código y tienes sucursales que no son POS Pro, puedes usar el editor visual para personalizar el encabezado y el pie de página en esas sucursales.
- Puedes personalizar los recibos impresos que tienen una plantilla en el editor de código, como recibos de venta, recibos de regalo, recibos de tarjetas de regalo y recibos de devoluciones y cambios.
Lenguajes de código
- Los archivos que componen los recibos contienen Liquid, el lenguaje de plantilla de Shopify. Más información sobre el uso de Liquid.
- Para editar las plantillas en el editor de código de recibos, debes conocer HTML, CSS y Liquid. El equipo de soporte de temas de Shopify puede ayudar con ajustes menores dentro del alcance de la Shopify Design Policy.
Limitaciones de personalización
- No puedes obtener una vista previa de los recibos en diferentes tamaños de impresora desde el editor de código. Para obtener una vista previa por tamaño de impresora, usa el editor visual.
- Las descripciones del producto no están disponibles como variable en las plantillas de recibos y no se pueden agregar a los recibos impresos.
Mantenimiento de plantillas
- Si personalizas un recibo con el editor de código de recibos, es posible que a tu plantilla actual le falten propiedades nuevas, como
selling_plan_name. Para agregar las últimas propiedades disponibles a la plantilla, debes restablecer la plantilla de recibo a los valores predeterminados. Al restablecer las plantillas de recibos a los valores predeterminados se elimina cualquier personalización que les hayas hecho. Toma nota del código personalizado antes de restablecerla. Tras restablecer la plantilla, debes volver a aplicar las personalizaciones manualmente.
Accede al editor de código
Puedes editar las plantillas con el editor de código. Primero debes cambiar al editor de código desde el editor visual predeterminado, y puedes volver al editor visual en cualquier momento.
Los pasos para cambiar de editor varían un poco dependiendo de si todas tus sucursales de POS cumplen los requisitos para el editor de código o si solo algunas los cumplen. Por ejemplo, si algunas sucursales de POS no usan POS Pro o se encuentran en Italia o Francia.
Pasos:
Todas las sucursales de POS Pro
En el panel de control de Shopify, ve a Punto de venta > Configuración.
En la sección Personalización, haz clic en Recibos impresos para abrir el editor de POS.
Haz clic en el ícono
en la barra lateral izquierda.
Haz clic en Editar código.
En el cuadro Editar código para recibos impresos, edita el código que quieres cambiar.
Haz clic en Guardar.
Opcional: Para seguir editando más páginas de Shopify POS con el editor de POS, regresa en la ventana del navegador.
Con sucursales Lite o en Italia
En el panel de control de Shopify, ve a Punto de venta > Configuración.
En la sección Personalización, haz clic en Recibos impresos para abrir el editor de POS.
En la página Personalización de recibos, haz clic en Editor de código.
Usa archivos personalizados en la plantilla de recibos
Puedes usar archivos, como recursos de imagen, que subes al panel de control de Shopify para personalizar los recibos impresos.
Debes cargar un archivo en el panel de control de Shopify antes de poder usarlo en un recibo impreso. Más información sobre carga de archivos.
Pasos:
En el panel de control de Shopify, ve a Contenido > Archivos.
Junto al archivo que quieres incluir en el código del recibo impreso, haz clic en
para copiar el enlace.
Incluye el enlace del recurso en la plantilla.
Restablece la plantilla de recibos al valor predeterminado
Puedes restablecer una plantilla de recibos a la versión predeterminada con el editor de código.
Pasos:
Todas las sucursales de POS Pro
En el panel de control de Shopify, ve a Punto de venta > Configuración.
En la sección Personalización, haz clic en Recibos impresos para abrir el editor de POS.
Haz clic en Personalizar los recibos.
Haz clic en Editar código.
Haz clic en el archivo de código que quieres restablecer.
Haz clic en el ícono
.
En el cuadro Restablecer el archivo a predeterminado, haz clic en Restablecer.
Con sucursales Lite o en Italia
En el panel de control de Shopify, ve a Punto de venta > Configuración.
En la sección Personalización, haz clic en Recibos impresos para abrir el editor de POS.
En la página Personalización de recibos, haz clic en Editor de código.
Haz clic en el archivo de código que quieres restablecer.
Haz clic en el ícono
.
En el cuadro Restablecer el archivo a predeterminado, haz clic en Restablecer.
Variables de Liquid disponibles en el editor de código de recibos
Puedes usar Liquid para personalizar la plantilla del recibo impreso y los tipos de recibo.
Los siguientes objetos de datos están disponibles en el editor de código de recibos:
Objetos de recibos
| Objeto | Descripción |
|---|---|
shop | Contiene la información de la tienda, como el nombre de la tienda. |
location | Contiene la información del establecimiento minorista, como la dirección y el número de teléfono. |
order | Contiene los datos del pedido, incluyendo las líneas de artículo, los descuentos, los impuestos y la información de la transacción. |
return |
Solo disponible dentro de la plantilla return-and-exchange-receipt.liquid y sus plantillas parciales asociadas.
Contiene datos de devoluciones y cambios, que incluyen las líneas de artículo devueltas, las nuevas líneas de artículo, el total neto y la información de la transacción.
|
gift_card |
Solo disponible dentro de la plantilla gift-card.liquid.
Contiene los datos de la tarjeta de regalo, que incluyen el saldo, el código alfanumérico y el contenido de un código QR que puede escanear la app de POS.
|
Objeto del pedido
| Propiedad | Descripción |
|---|---|
id | ID del pedido. |
created_at | Fecha y hora en formato ISO 8601 en que se creó el pedido. |
source_identifier | Un identificador único del pedido de POS o externo. |
change_due | Cambio a devolver en el pedido. |
balance_due | Importe adeudado en este pedido. |
name | El identificador único del pedido que aparece en la página del pedido en el panel de control de Shopify y en la página de estado del pedido. Por ejemplo, "#1001", "EN1001" o "1001-A". Este valor no es único entre varias tiendas. |
note | El contenido de la nota asociada al pedido. |
line_items | Una lista de las líneas de artículo del pedido. |
subtotal_price |
La suma de los precios de todas las líneas de artículo después de los descuentos y antes de las devoluciones. Si taxesIncluded es true, el subtotal también incluye impuestos.
|
total_price | El precio total del pedido, antes de las devoluciones. Incluye impuestos y descuentos. |
total_tip_received | La suma de todas las propinas del pedido. |
discounts | El monto total de los descuentos. |
transactions | Una lista de transacciones asociadas al pedido. |
taxes_included | Indica si los impuestos están incluidos en el subtotal del pedido. |
tax_lines | Una lista de todas las líneas de impuestos aplicadas a las líneas de artículo del pedido, antes de las devoluciones. Los importes de las líneas de impuestos representan el precio total de todas las líneas de impuestos con la misma tasa y nombre. |
customer | El cliente que realizó el pedido. |
shipping_address | La dirección de envío del pedido. |
shipping_groups | La lista de grupos de envío del pedido. Cada grupo contiene líneas de artículo que se preparan juntas. |
Objeto de devolución
| Propiedad | Descripción |
|---|---|
name | El identificador único de la devolución que aparece en la página del pedido en el panel de control de Shopify y en la página de estado del pedido. Por ejemplo, "#1000-R1". Este valor no es único entre varias tiendas. |
created_at | La fecha y la hora en formato ISO 8601 en que se creó la devolución. |
is_unverified | Valor booleano que indica si la devolución se creó como una Unverified Return. |
is_exchange | Un valor booleano que indica si la devolución incluye un cambio. Esto incluye los reembolsos emitidos a una tarjeta de regalo. |
exchange_type |
El tipo de cambio, si la devolución incluye un cambio. Los valores posibles son LIKE_FOR_LIKE, NET_REFUNDABLE y NET_PAYABLE.
|
return_discount | El monto total de los descuentos del pedido que se han reembolsado. |
return_subtotal |
La suma de los precios de todas las líneas de artículo devueltas antes de aplicar descuentos. Si taxesIncluded es true, el subtotal también incluye impuestos.
|
return_total | El monto total posible del reembolso. Esto incluye impuestos, descuentos, envíos y propinas. Es posible que no sea el monto real reembolsado. |
exchange_subtotal |
La suma de los precios de todas las nuevas líneas de artículo del cambio antes de aplicar descuentos. Si taxesIncluded es true, el subtotal también incluye impuestos.
|
exchange_total | El monto total de todas las nuevas líneas de artículo del cambio. Incluye impuestos y descuentos. |
total_cash_rounding_adjustment | El ajuste por redondeo en efectivo aplicado a la devolución o al cambio. |
total_adjusted_amount | El monto total de la devolución o del cambio, ajustado por el redondeo en efectivo. |
net_total | El monto total realmente pagado o reembolsado por la devolución o el cambio, antes del redondeo en efectivo. |
return_line_items | Las líneas de artículo devueltas. |
exchange_line_items | Las líneas de artículo nuevas en el cambio. |
return_tax_lines | Las líneas de impuestos de las líneas de artículo devueltas. |
exchange_tax_lines | Las líneas de impuestos de las nuevas líneas de artículo del cambio. |
shipping_refund_amount | El monto de envío que se ha reembolsado. |
tip_refund_amount | El monto de la propina que se ha reembolsado. |
transactions | Las transacciones asociadas a la devolución o al cambio. |
Objeto de grupo de envío
| Propiedad | Descripción |
|---|---|
destination | Destino de los productos que se envían. |
products | Una lista de los productos que se envían. |
Objeto de línea de artículo
| Propiedad | Descripción |
|---|---|
id | La identificación de la línea de artículo. |
name | El título del producto, opcionalmente con el título de la variante (si corresponde). |
variant_title | El título de la variante en el momento de la creación del pedido. |
price | El precio unitario de la línea de artículo cuando se creó el pedido. Este valor no incluye descuentos. |
is_gift_card | Indica si la línea de artículo corresponde a la compra de una tarjeta de regalo. |
discount | El descuento total asignado a la línea de artículo por las aplicaciones de descuento, incluidos los descuentos asignados a cantidades reembolsadas y eliminadas. |
total_price | El total de esta línea de artículo. |
selling_plan_name | El nombre del plan de suscripción asignado a la línea de artículo. |
tax_rates | Las líneas de impuestos de esta línea de artículo. |
custom_attributes | Una lista de atributos que representan características personalizadas o solicitudes especiales. |
variant_title | El título de la variante. |
variant_id | La identificación de la variante. |
variant_metafields | Una lista de campos personalizados que el comerciante asoció a la variante. |
staff_member_description | Miembro del personal asignado a la línea de artículo. |
product_metafields | Una lista de campos personalizados que el comerciante asoció al producto. |
Objeto de línea de artículo devuelta
Incluye todo en el objeto de línea de artículo más las siguientes propiedades:
| Propiedad | Descripción |
|---|---|
return_reason | El motivo de la devolución de la línea de artículo. |
return_reason_note | Una nota opcional que acompaña el motivo de la devolución. |
Filtros de Liquid disponibles en el editor de código de recibos
Puedes usar filtros de Liquid para ajustar la información en las plantillas de recibo. Por ejemplo, puedes cambiar el formato de la moneda o las mayúsculas y minúsculas de un texto específico, como un código impositivo.
Para aplicar un filtro, agrega el carácter de barra vertical | y luego el filtro dentro del bloque de código de Liquid entre llaves dobles {{ }}. Los filtros solo se pueden aplicar a bloques de código de Liquid.
En el siguiente ejemplo, el filtro convierte el código impositivo de minúsculas a mayúsculas.
{{ tax_line.title | upcase }}En el bloque de código de ejemplo, product es el objeto, title es su propiedad y upcase es el filtro aplicado. El filtro upcase convierte el valor de tax_line.title a mayúsculas. Por ejemplo, si tax_line.title tiene el valor Hst, el filtro upcase lo convierte en HST.
Consulta la sección de filtros en la referencia de Liquid de Shopify Themes para obtener detalles sobre cómo usar los filtros de Liquid.
Los siguientes filtros están disponibles en el editor de código de recibos:
| Propiedad | Descripción | |
|---|---|---|
t | Traduce etiquetas predefinidas al idioma asignado a la sucursal. | |
money | Da formato al precio en la moneda de la sucursal. | |
escape |
Escapa caracteres especiales en HTML, como <>, ' y &, y convierte esos caracteres en secuencias de escape.
| |
barcode | Genera un SVG de código de barras 1D. | |
qrcode | Genera un SVG de código de barras 2D. |
Ejemplo de personalización del código de la plantilla de recibo impreso
Puedes usar Liquid para agregar mensajes condicionales. Esta funcionalidad es similar a guardar en una sola sucursal con el editor visual. Por ejemplo, el negocio empezó con una sola sucursal y ahora hay varias nuevas. Quieres destacar la tienda original en los recibos impresos.
Puedes agregar un mensaje personalizado a la plantilla header.liquid en la carpeta Sections del editor de código y usar Liquid para mostrar el mensaje solo en la sucursal principal.
El siguiente código verifica el nombre de la sucursal, en este caso, la sucursal original llamada "Home", y muestra el mensaje "Te damos la bienvenida a nuestra tienda original, inaugurada en 1972." si la sucursal coincide con ese nombre. Los recibos impresos en las demás sucursales muestran el mensaje "Te damos la bienvenida a nuestra tienda.".
{% if location.name == 'Home' %}
Welcome to our original store, opened in 1972.
{% else %}
Welcome to our store.
{% end %}Previsualiza los cambios en el editor de código
Puedes obtener una vista previa de los cambios en los recibos impresos en el editor de código de POS en el panel de control de Shopify.
Según el archivo de Liquid que selecciones, la ventana de vista previa resalta el diseño o la sección del recibo afectado por ese archivo. De forma predeterminada, la ventana de vista previa muestra el contenido del pedido de POS más reciente. Puedes seleccionar un pedido específico para usarlo como contenido del recibo en la ventana de vista previa para todos los archivos de Liquid, excepto el archivo gift-card.liquid, que solo muestra las diferentes sucursales como opciones de vista previa seleccionables.
Pasos:
Todas las sucursales de POS Pro
En el panel de control de Shopify, ve a Punto de venta > Configuración.
En la sección Personalización, haz clic en Recibos impresos para abrir el editor de POS.
Haz clic en Personalizar los recibos.
Haz clic en Editar código.
Haz clic en el archivo de código que quieras previsualizar. El recibo se muestra en la ventana del editor situada más a la derecha.
Opcional: para seleccionar un pedido específico y usarlo como contenido del recibo en la ventana de vista previa, realiza las siguientes acciones:
- Haz clic en el ícono
.
- Las ventas realizadas desde el canal Point of Sale de todas las sucursales se muestran en el cuadro de diálogo Elegir pedido para la vista previa. Selecciona un pedido de la lista o busca pedidos y sucursales específicos con la barra de búsqueda.
- Haz clic en Confirmar.
- Haz clic en el ícono
Opcional: si estás previsualizando el archivo
gift-card.liquid, haz clic en el íconoy selecciona la sucursal para la que quieres previsualizar la plantilla.
Con sucursales Lite o en Italia
En el panel de control de Shopify, ve a Punto de venta > Configuración.
En la sección Personalización, haz clic en Recibos impresos para abrir el editor de POS.
En la página Personalización de recibos, haz clic en Editor de código.
Haz clic en el archivo de código que quieras previsualizar. El recibo se muestra en la ventana del editor situada más a la derecha.
Opcional: para seleccionar un pedido específico y usarlo como contenido del recibo en la ventana de vista previa, realiza las siguientes acciones:
- Haz clic en el ícono
.
- Las ventas realizadas desde el canal Point of Sale de todas las sucursales se muestran en el cuadro de diálogo Elegir pedido para la vista previa. Selecciona un pedido de la lista o busca pedidos y sucursales específicos con la barra de búsqueda.
- Haz clic en Confirmar.
- Haz clic en el ícono
Opcional: si estás previsualizando el archivo
gift-card.liquid, haz clic en el íconoy selecciona la sucursal para la que quieres previsualizar la plantilla.