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.

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
  1. En el panel de control de Shopify, ve a Punto de venta > Configuración.

  2. En la sección Personalización, haz clic en Recibos impresos para abrir el editor de POS.

  3. Haz clic en el ícono Secciones en la barra lateral izquierda.

  4. Haz clic en Editar código.

  5. En el cuadro Editar código para recibos impresos, edita el código que quieres cambiar.

  6. Haz clic en Guardar.

  7. 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
  1. En el panel de control de Shopify, ve a Punto de venta > Configuración.

  2. En la sección Personalización, haz clic en Recibos impresos para abrir el editor de POS.

  3. 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:

  1. En el panel de control de Shopify, ve a Contenido > Archivos.

  2. Junto al archivo que quieres incluir en el código del recibo impreso, haz clic en Copiar enlace para copiar el enlace.

  3. Navegar al editor de código.

  4. 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
  1. En el panel de control de Shopify, ve a Punto de venta > Configuración.

  2. En la sección Personalización, haz clic en Recibos impresos para abrir el editor de POS.

  3. Haz clic en Personalizar los recibos.

  4. Haz clic en Editar código.

  5. Haz clic en el archivo de código que quieres restablecer.

  6. Haz clic en el ícono Restablecer a predeterminado.

  7. En el cuadro Restablecer el archivo a predeterminado, haz clic en Restablecer.

Con sucursales Lite o en Italia
  1. En el panel de control de Shopify, ve a Punto de venta > Configuración.

  2. En la sección Personalización, haz clic en Recibos impresos para abrir el editor de POS.

  3. En la página Personalización de recibos, haz clic en Editor de código.

  4. Haz clic en el archivo de código que quieres restablecer.

  5. Haz clic en el ícono Restablecer a predeterminado.

  6. 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

Descripción de los objetos de datos de recibos
ObjetoDescripció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

Descripción del objeto del pedido
PropiedadDescripció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

Descripción del objeto de devolución
PropiedadDescripció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

Descripción del objeto de grupo de envío
PropiedadDescripció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

Descripción del objeto de línea de artículo
PropiedadDescripció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:

Descripción del objeto de línea de artículo
PropiedadDescripció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:

Descripción de los filtros para recibos
PropiedadDescripció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
  1. En el panel de control de Shopify, ve a Punto de venta > Configuración.

  2. En la sección Personalización, haz clic en Recibos impresos para abrir el editor de POS.

  3. Haz clic en Personalizar los recibos.

  4. Haz clic en Editar código.

  5. 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.

  6. Opcional: para seleccionar un pedido específico y usarlo como contenido del recibo en la ventana de vista previa, realiza las siguientes acciones:

    1. Haz clic en el ícono View.
    2. 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.
    3. Haz clic en Confirmar.
  7. Opcional: si estás previsualizando el archivo gift-card.liquid, haz clic en el ícono View y selecciona la sucursal para la que quieres previsualizar la plantilla.

Con sucursales Lite o en Italia
  1. En el panel de control de Shopify, ve a Punto de venta > Configuración.

  2. En la sección Personalización, haz clic en Recibos impresos para abrir el editor de POS.

  3. En la página Personalización de recibos, haz clic en Editor de código.

  4. 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.

  5. Opcional: para seleccionar un pedido específico y usarlo como contenido del recibo en la ventana de vista previa, realiza las siguientes acciones:

    1. Haz clic en el ícono View.
    2. 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.
    3. Haz clic en Confirmar.
  6. Opcional: si estás previsualizando el archivo gift-card.liquid, haz clic en el ícono View y selecciona la sucursal para la que quieres previsualizar la plantilla.