¿Cómo guardo el contenido en la parte inferior de mis talones de empaque?

Para forzar que el contenido siempre se imprima en la parte inferior de tu talón de empaque, primero debes definir en dónde está la "parte inferior" y luego incluir ese contenido en una etiqueta <div> con atributos de posición especiales.

Importante

¡El contenido que coloques en la parte inferior de tu talón de empaque no se moverá bajo ninguna circunstancia!

A veces, esto puede causar superposición con otro contenido en pedidos que tienen demasiadas líneas de pedido o una nota de pie de página larga. Es posible que quieras disponer de una plantilla sustitutiva que excluya los siguientes cambios, por si te ocurre esto.

El código que debes agregar variará según el diseño del talón de empaque. Para agregar este código a tu plantilla de talón de empaque, ve a la Plantilla de talón de empaque en la configuración de tu plantilla y haz lo siguiente:

  1. Agrega el siguiente código al principio de la sección Encabezado de pedido (antes de la primera etiqueta <table>) para definir en dónde está la parte inferior del talón de empaque:

    • Página completa de 8.5" x 11":

      <style>
       .customStyle {
          position: relative;
          height:11in;
        } 
      </style>  
    • 8,5 " x 11 " 2 por pág. /media hoja:

      <style>
       .customStyle {
         position: relative;
         height:5.5in;
        } 
      </style>  
    • 4 " x 6 " papel térmico:

      <style>
       .customStyle {
         position: relative;
         height:6in;
        } 
      </style>  

      Es posible que tengas que ajustar el valor de altura en los fragmentos CSS anteriores, en función de tu contenido.

    Así es como debería verse el código para la página completa de 8.5" x 11":

    HTML del talón de empaque: fragmento CSS de estilo personalizado resaltado en la sección Encabezado del pedido
  2. Localiza el elemento que contiene el contenido que quieres pegar en la parte inferior del talón de empaque.

  3. Agrega el siguiente código antes del elemento deseado:

    <div style="bottom:0; position:absolute;width:100%;"> 
  4. Luego, agrega el siguiente código después del elemento deseado:

    </div>
  5. Guarda tus cambios.

A continuación se muestra un ejemplo de cómo debería verse (este ejemplo coloca el elemento <p> que contiene el mensaje de pie de página del talón de empaque en la parte inferior del mismo):

HTML del talón de empaque: se resalta la posición del div y el HTML en la sección Pie de pedido

Aquí hay una imagen del talón de empaque resultante, con el mensaje de pie de página pegado en la parte inferior:

Muestra de la hoja de empaque con una flecha roja apuntando al texto del pie de página impreso en la parte inferior de la página.