Personalizar las notas de entrega

Puedes personalizar la plantilla de las notas de entrega. Cambiar la plantilla te permite agregar tu marca y modificar la apariencia de la nota de entrega.

Cambiar la dirección de la tienda

Si quieres editar o cambiar la dirección de la tienda, ve a Configuración > General y edita la información de la tienda.

Si solo quieres cambiar la dirección en las notas de entrega, sigue los pasos a continuación.

Pasos:

1. Desde el panel de control de Shopify, ve a Configuración > Envío y entrega.

2. En la sección Documentos, haz clic en Plantilla de nota de entrega.

3. Busca la variable de Liquid {{ shop_address.summary }} que hace referencia a la dirección de la tienda. Si no encuentras esta variable, prueba con la siguiente:

{{ shop_address.address1 }}, {{ shop_address.city }}, {{ shop_address.province_code }}, {{ shop_address.zip }}, {{ shop_address.country }}

4. Selecciona este código y elimínalo.
5. Escribe la dirección que quieres que aparezca en las notas de entrega en ese espacio en blanco. Por ejemplo, puedes escribirla así: 123 Example Street, New York, NY, 10000, United States
6. Haz clic en Vista previa de la plantilla para ver los cambios.
7. Haz clic en Guardar.

Quitar imágenes de los productos

Puedes quitar las imágenes de los productos que aparecen junto a los nombres de los productos en las notas de entrega.

Pasos:

1. Desde el panel de control de Shopify, ve a Configuración > Envío y entrega.

2. En la sección Documentos, haz clic en Plantilla de nota de entrega.

3. Busca las siguientes variables de Liquid que hacen referencia a las imágenes de los productos:

{% if line_item.image != blank %}
       <div class="flex-line-item-img">
         <div class="aspect-ratio aspect-ratio-square" style="width: {{ desired_image_size }}px; height: {{ desired_image_size }}px;">
           {{ line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }}
         </div>
       </div>
       {% endif %}

4. Selecciona este código y elimínalo.
5. Haz clic en Vista previa de la plantilla para ver los cambios.
6. Haz clic en Guardar.

Editar el logo

Antes de agregar el logo de la tienda a las notas de entrega, debes subir el logo al panel de control de Shopify. Después de subirlo, anota el nombre del archivo subido para usarlo más tarde en la plantilla de la nota de entrega.

Después de subir el logo a la tienda, puedes agregar el logo y quitar el nombre de la tienda, agregar el logo encima del nombre de la tienda o agregar el logo junto al nombre de la tienda.

Pasos:

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

2. Haz clic en Subir archivos.

3. Selecciona y sube el logo de la tienda desde tu dispositivo.

4. Anota el nombre del archivo cuando se complete la subida, incluida la extensión del archivo (por ejemplo, .png o .jpg).

Agregar el logo y quitar el nombre de la tienda

Puedes quitar el nombre de la tienda y reemplazarlo por el logo en la parte superior de las notas de entrega.

Pasos:

1. Desde el panel de control de Shopify, ve a Configuración > Envío y entrega.

2. En la sección Documentos, haz clic en Plantilla de nota de entrega.

3. Busca el siguiente código que hace referencia al nombre de la tienda:

<p class="to-uppercase">
  {{ shop.name }}
</p>

4. Selecciona este código y elimínalo.
5. En el espacio que creaste, escribe el siguiente código con el nombre del archivo que subiste anteriormente:

{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}

El filtro file_img_url genera la URL del archivo subido con el tamaño especificado, y el filtro img_tag crea una etiqueta de imagen HTML con el texto alternativo que proporciones.

Por ejemplo, si el archivo subido es shop_logo.png, el código Liquid correspondiente será:

{{ 'shop_logo.png' | file_img_url: 'small' | img_tag: 'Logo' }}

6. Selecciona Vista previa de la plantilla para obtener una vista previa de los cambios.
7. Haz clic en Guardar.

Agrega el logo encima del nombre de la tienda

Si quieres agregar el logo encima del nombre de la tienda, en la parte superior de las notas de entrega, sigue estos pasos.

Pasos:

1. Desde el panel de control de Shopify, ve a Configuración > Envío y entrega.

2. En la sección Documentos, haz clic en Plantilla de nota de entrega.

3. Busca la siguiente variable de Liquid que hace referencia al nombre de la tienda y agrega un salto de línea entre las dos líneas:

<div class="shop-title">
      |
      <p class="to-uppercase">

4. En el espacio que creaste, escribe el siguiente código con el nombre del archivo que subiste antes (por ejemplo, shop_logo.png):

{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}
<br>

5. Selecciona Vista previa de la plantilla para obtener una vista previa de los cambios.
6. Haz clic en Guardar.

Agrega el logo junto al nombre de la tienda

Si quieres agregar el logo junto al nombre de la tienda, en la parte superior de las notas de entrega, sigue estos pasos.

Pasos:

1. Desde el panel de control de Shopify, ve a Configuración > Envío y entrega.

2. En la sección Documentos, haz clic en Plantilla de nota de entrega.

3. Busca la siguiente variable de Liquid que hace referencia al nombre de la tienda:

<p class="to-uppercase">
{{ shop.name }}
</p>

4. Selecciona este código y elimínalo.
5. En el espacio que creaste, escribe el siguiente código con el nombre del archivo que subiste antes (por ejemplo, shop_logo.png):

{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}
<span class="to-uppercase">
  {{ shop.name }}
</span>

6. Busca las siguientes variables de Liquid:

.shop-title {
  -webkit-box-flex: 6;
  -webkit-flex: 6;
  flex: 6;
  font-size: 1.9em;
}

7. Agrega una línea nueva al final de las variables anteriores y pega el siguiente código:

.shop-title img {
 vertical-align: middle;
}

.shop-title span {
 vertical-align: middle;
}

8. Selecciona Vista previa de la plantilla para obtener una vista previa de los cambios.
9. Haz clic en Guardar.

Aplicar estilos a las notas de entrega con CSS

Puedes personalizar la nota de entrega con los archivos CSS que subas a Shopify. Los archivos CSS alojados fuera de Shopify no se mostrarán correctamente.

Pasos:

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

2. Haz clic en Subir archivos.

3. Selecciona y sube el archivo CSS.

4. Copia la URL del archivo cuando se complete la subida.

5. Incluye el siguiente código:

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.shopify.com/path_to_file/styles.css"
>