Crear y personalizar plantillas de Shopify Order Printer

Puedes personalizar las plantillas de muchas formas y crear las tuyas propias. La app Shopify Order Printer admite plantillas hechas con HTML, CSS y variables de Liquid. Antes de personalizarlas, asegúrate de familiarizarte con la Liquid variables and filters reference for Shopify Order Printer para ver todas las personalizaciones de plantilla compatibles.

Revisa los siguientes ejemplos para aprender cómo puedes personalizar las plantillas de Shopify Order Printer.

En esta página

Agregar el logo a una plantilla

Puedes agregar el logo a la plantilla.

Pasos:

Desde el panel de control de Shopify, ve a Contenido > Files.
Haz clic en Subir archivos y luego selecciona el archivo de imagen que quieres subir.
Para copiar la URL de la imagen del logo, haz clic en el ícono de Enlace.
Haz clic en Configuración > Aplicaciones.
Haz clic en Order Printer.
Haz clic en Plantillas.
Haz clic en el nombre de la plantilla que quieres editar.
En el editor de código, pega el siguiente bloque de código:

<div style="text-align: center;">
  <img style="width: 4em;" src="YOUR_IMAGE_URL_HERE">
</div>

En el código, reemplaza YOUR_IMAGE_URL_HERE por la URL de la imagen.
Opcional: Para alinear el logo, cambia el valor de text-align a left, right o center.
Opcional: Para ajustar el ancho del logo, cambia el valor de width a uno mayor o menor, como 8em o 2em.
Opcional: Para previsualizar la plantilla, haz clic en Vista previa.
Haz clic en Guardar.

Ejemplo:

Revisa el siguiente ejemplo de cómo debería mostrarse el HTML después de agregar el logo a la plantilla:

Agregar imágenes a una plantilla

Puedes agregar imágenes a la plantilla.

Pasos:

Desde el panel de control de Shopify, ve a Contenido > Files.
Haz clic en Subir archivos y luego selecciona el archivo de imagen que quieres subir.
Para copiar la URL de la imagen, haz clic en el ícono de Enlace.
Haz clic en Configuración > Aplicaciones.
Haz clic en Order Printer.
Haz clic en Plantillas.
Haz clic en el nombre de la plantilla que quieres editar.
En el editor de código, pega el bloque de código <img src=”Image Source” />.
En el código, reemplaza Image Source por la URL de la imagen.
Haz clic en Guardar.

Configurar el ancho de las tablas al 100 %

Puedes agregar bordes a la tabla y ajustar su ancho al 100 %. Debes agregar la clase table-tabular a la tabla.

Pasos:

Desde el panel de control de Shopify, ve a Aplicaciones > Order Printer.
Haz clic en Plantillas.
Haz clic en la plantilla que quieres editar.
En el editor de código, busca la tabla que quieres editar y agrégale la clase table-tabular.
Opcional: Para previsualizar la plantilla, haz clic en Vista previa.
Haz clic en Guardar.

Ejemplo:

<table class="table-tabular">
    ...
</table>

Mostrar miniaturas de producto

Puedes agregar miniaturas de producto a la plantilla del pedido. Debes insertar un bloque de código personalizado en la plantilla.

Pasos:

Desde el panel de control de Shopify, ve a Aplicaciones > Order Printer.
Haz clic en Plantillas.
Haz clic en la plantilla que quieres editar.
Agrega el bloque de código {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} a la plantilla.
Opcional: Para previsualizar la plantilla, haz clic en Vista previa.
Haz clic en Guardar.

Agregar detalles del pedido

Puedes agregar detalles del pedido a la plantilla, como el nombre, la cantidad y el precio de los artículos comprados.

Pasos:

Desde el panel de control de Shopify, ve a Aplicaciones > Order Printer.
Haz clic en Plantillas.
Haz clic en la plantilla que quieres editar.
En el editor de código, usa variables de Liquid para agregar detalles del pedido y HTML para dar formato. Por ejemplo, usar {{ line_item.price | money }} muestra el precio del artículo.
Opcional: Para previsualizar la plantilla, haz clic en Vista previa.
Haz clic en Guardar.

Ejemplo:

Nyla quiere editar su plantilla de nota de entrega para incluir una lista de los artículos que se envían. Agrega el siguiente código al final de su plantilla de Nota de entrega en la aplicación Shopify Order Printer. Como resultado, ahora las notas de entrega de Nyla incluyen una tabla que enumera los artículos comprados.

<br>
<br>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <thead>
    <tr>
      <th scope="col">Quantity</th>
      <th scope="col">Item</th>
      {% if tax_lines.size > 0 %}
      <th scope="col">Taxes</th>
      {% endif %}
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in line_items %}
      <tr>
        <td scope="row">{{ line_item.quantity }} x</td>
        <td><b>{{ line_item.title }}</b></td>
        {% if line_item.tax_lines %}
          <td>
            {% for tax_line in line_item.tax_lines %}
              {{ tax_line.price | money }} {{ tax_line.title }}<br/>
            {% endfor %}
          </td>
        {% endif %}
        <td>{{ line_item.price | money }}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>

Agregar un código de barras a una plantilla

Puedes agregar un código de barras a la plantilla

Pasos:

Desde el panel de control de Shopify, ve a Aplicaciones > Order Printer.
Haz clic en Plantillas.
Haz clic en la plantilla que quieres editar.
Agrega el bloque de código <s-barcode value="a" /> a la plantilla.
Reemplaza el valor `` por el valor de texto del código de barras.
Opcional: Para previsualizar la plantilla, haz clic en Vista previa.
Haz clic en Guardar.

Agregar un código QR a una plantilla

Puedes agregar un código QR a la plantilla.

Pasos:

Desde el panel de control de Shopify, ve a Aplicaciones > Order Printer.
Haz clic en Plantillas.
Haz clic en la plantilla que quieres editar.
Agrega el bloque de código <s-barcode type="qrcode" value="" /> a la plantilla.
Reemplaza el valor `` por el valor de texto del código QR.
Opcional: Para previsualizar la plantilla, haz clic en Vista previa.
Haz clic en Guardar.

Usar una fuente de Google en una plantilla

Para usar una fuente de Google en la plantilla, pega el siguiente código en la plantilla y luego reemplaza la variable FontName por el nombre de la fuente de Google:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=FontName">
<style>
  body {
    font-family: FontName, serif;
  }
</style>

Aumentar el tamaño de la fuente

Para aumentar el tamaño de la fuente en la plantilla, pega el siguiente código en la plantilla y ajusta el número 14 a un valor mayor o menor:

<style>
  :root {
    --font-size: 14px;
  }
</style>

Para aumentar el tamaño de la fuente de los encabezados en la plantilla, pega el siguiente código en la plantilla y ajusta los valores junto a cada encabezado:

<style>
  :root {
    --h1-font-size: 18px;
    --h2-font-size: 16px;
    --h3-font-size: 14px;
  }
</style>

Si importaste las plantillas desde la aplicación Order Printer heredada, puedes aumentar el tamaño de la fuente con el siguiente bloque de código:

<style>
  :root {
    --legacy-font-size: 14px;
    --legacy-print-font-size: 18px;
  }
</style>