Crea y personaliza plantillas de Order Printer de Shopify

Puedes personalizar tus plantillas de muchas maneras y también crear plantillas propias. La aplicación Order Printer de Shopify admite plantillas hechas con HTML, CSS y variables de Liquid. Antes de personalizar las plantillas, asegúrate de familiarizarte con la referencia de variables y filtros de Liquid de Order Printer de Shopify para todas las personalizaciones de plantilla compatibles.

Consejo

Puedes restaurar una plantilla predeterminada.

Para aprender cómo puedes personalizar las plantillas de Order Printer de Shopify, revisa los siguientes ejemplos.

Agregar el logo a una plantilla

Puedes agregar tu logo a la plantilla.

Pasos:

1. Desde el panel de control de Shopify, ve a Contenido > Archivos.
2. Haz clic en Subir archivos y, a continuación, selecciona el archivo de imagen que desees subir.
3. Para copiar la URL de la imagen de tu logo, haz clic en el ícono del enlace.
4. Haz clic en Configuración > Aplicaciones y canales de ventas.
5. Haz clic en Order Printer.
6. Haz clic en Plantillas.
7. Haz clic en el nombre de la plantilla que deseas editar.
8. En el editor de código, pega el siguiente bloque de código:

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

1. Reemplaza YOUR_IMAGE_URL_HERE en el código por tu URL de imagen.
2. Opcional: para alinear tu logo, cambia el valor de text-align a left, right o center.
3. Opcional: para ajustar el ancho de tu logo, cambia el valor de width a un valor mayor o menor, como 8em o 2em.
4. Opcional: Para obtener una vista previa de la plantilla, haz clic en Vista previa.
5. Haz clic en Guardar.

Ejemplo:

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

Agrega imágenes a una plantilla

Puedes agregar imágenes a tu plantilla.

Pasos:

1. Desde el panel de control de Shopify, ve a Contenido > Archivos.
2. Haz clic en Subir archivos y, a continuación, selecciona el archivo de imagen que desees subir.
3. Para copiar la URL de tu imagen, haz clic en el ícono del enlace.
4. Haz clic en Configuración > Aplicaciones y canales de ventas.
5. Haz clic en Order Printer.
6. Haz clic en Plantillas.
7. Haz clic en el nombre de la plantilla que deseas editar.
8. En el editor de código, pega el bloque de código <img src=”Image Source” />.
9. Reemplaza Image Source en el código por tu URL de imagen.
10. Haz clic en Guardar.

Hacer anchos de las tablas al 100%

Puedes agregar bordes a tu tabla y estirar hasta el 100% de ancho. Debes agregar la clase table-tabular a tu tabla.

Pasos:

1. En el panel de control de Shopify, haz clic en Configuración > Aplicaciones y canales de ventas.
2. Haz clic en Order Printer.

3. Haz clic en Abrir aplicación.

4. Haz clic en Plantillas.

5. Haz clic en la plantilla que deseas editar.

6. En el editor de código, busca la tabla que deseas editar y luego agrega la clase table-tabular a la tabla.

7. Opcional: Para obtener una vista previa de la plantilla, haz clic en Vista previa.

8. Haz clic en Guardar.

Ejemplo:

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

Mostrar productos en miniatura

Puedes agregar miniaturas de productos a tu plantilla de pedido. Debes insertar un bloque de código personalizado en tu plantilla.

Pasos:

1. En el panel de control de Shopify, haz clic en Configuración > Aplicaciones y canales de ventas.
2. Haz clic en Order Printer.

3. Haz clic en Abrir aplicación.

4. Haz clic en Plantillas.

5. Haz clic en la plantilla que deseas editar.

6. Agrega el bloque de código liquid {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} a la plantilla.

7. Opcional: Para obtener una vista previa de la plantilla, haz clic en Vista previa.

8. Haz clic en Guardar.

Agregar detalles del pedido

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

Pasos:

1. En el panel de control de Shopify, haz clic en Configuración > Aplicaciones y canales de ventas.
2. Haz clic en Order Printer.

3. Haz clic en Abrir aplicación.

4. Haz clic en Plantillas.

5. Haz clic en la plantilla que deseas editar.

6. En el editor de código, usa variables de Liquid para agregar detalles del pedido y HTML para dar formato. Por ejemplo, al usar {{ line_item.price | money }}, se muestra el precio del artículo.

7. Opcional: Para obtener una vista previa de la plantilla, haz clic en Vista previa.

8. Haz clic en Guardar.

Ejemplo:

María quiere editar su plantilla de nota de entrega para incluir una lista de los artículos que se enviarán. Agrega el siguiente código a la parte inferior de su plantilla de Nota de entrega en la aplicación Order Printer de Shopify. Como resultado, las notas de entrega de María ahora incluyen una tabla que lista los artículos que se compraron.

liquid <br> <br> <table class="table-tabular" style="margin: 0 0 1.5em 0;"> <thead> <tr> <th>Quantity</th> <th>Item</th> {% if tax_lines.size > 0 %} <th>Taxes</th> {% endif %} <th>Price</th> </tr> </thead> <tbody> {% for line_item in line_items %} <tr> <td>{{ 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>

Agrega un código de barras a una plantilla

Puedes agregar un código de barras a tu plantilla

Pasos:

1. En el panel de control de Shopify, haz clic en Configuración > Aplicaciones y canales de ventas.
2. Haz clic en Order Printer.

3. Haz clic en Abrir aplicación.

4. Haz clic en Plantillas.

5. Haz clic en la plantilla que deseas editar.

6. Agrega el código de bloque <s-barcode value="a" /> a tu plantilla.

7. Reemplaza el valor `` por el valor de texto de tu código de barras.

8. Opcional: Para obtener una vista previa de la plantilla, haz clic en Vista previa.

9. Haz clic en Guardar.

Agrega un código QR a una plantilla

Puedes agregar un código QR a tu plantilla.

Pasos:

1. En el panel de control de Shopify, haz clic en Configuración > Aplicaciones y canales de ventas.
2. Haz clic en Order Printer.

3. Haz clic en Abrir aplicación.

4. Haz clic en Plantillas.

5. Haz clic en la plantilla que deseas editar.

6. Agrega el código de bloque <s-barcode type="qrcode" value="" /> a tu plantilla.

7. Reemplaza el valor `` por el valor de texto de tu código QR.

8. Opcional: Para obtener una vista previa de la plantilla, haz clic en Vista previa.

9. Haz clic en Guardar.

Usa una fuente de Google en una plantilla

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

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

Aumenta el tamaño de fuente

Para aumentar el tamaño de fuente en tu plantilla, pega el código en ella y, luego, ajusta el número 14 por un valor mayor o menor. El código es el siguiente:

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

Para aumentar el tamaño de fuente de tus encabezados en tu plantilla, pega el código en ella y, luego, ajusta los valores junto al encabezado:

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

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

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