DocumentaciónCommercePrimeros pasos

Marca de tienda

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Temas:

Creado para:

  • Principiante
  • Intermedio
  • Administrador
  • Líder
  • Usuario

Una de las primeras cosas que debes hacer es cambiar el logotipo en el encabezado y cargar un favicon para el navegador. A continuación, debería agregar su mensaje de bienvenida y actualizar el aviso de copyright en el pie de página. Estas tareas son algunos elementos de diseño simples que puede cuidar de inmediato. Mientras tu tienda está en desarrollo, puedes activar el aviso de demostración de la tienda y luego eliminarlo cuando estés listo para iniciarla.

Elementos de personalización de marca de tienda

Cargue su logotipo

El tamaño y la ubicación del logotipo en el encabezado están determinados por la temática de la tienda. Su logotipo puede guardarse como archivo de GIF, PNG o de JPG (JPEG) de la tienda y cargarse desde el administrador de la misma.

Logotipo en el encabezado

La imagen del logotipo reside en la siguiente ubicación del servidor. Cualquier archivo de imagen con el nombre logo.svg se utiliza como logotipo del tema predeterminado.

Ruta de acceso completa: app/design/frontend/[vendor]/[theme]/web/images/logo.svg

Ruta relativa - images/logo.svg

Si no conoce el tamaño del logotipo u otras imágenes utilizadas en la temática, abra la página en un explorador, haga clic con el botón derecho en la imagen e inspeccione el elemento.

NOTE
Además del logotipo en el encabezado, su logotipo también aparece en plantillas de correo electrónico y en facturas de PDF y otros documentos de ventas. Los logotipos utilizados para las plantillas de correo electrónico y las facturas tienen requisitos de tamaño diferentes y deben cargarse por separado.

Formatos de archivo de logotipo admitidos:

Formato de archivo
Descripción
PNG
(Portable Network Graphics) Esta nueva alternativa al formato GIF admite hasta 16 millones de colores (24 bits). El formato de compresión sin pérdidas produce una imagen de mapa de bits de alta calidad con texto nítido, pero un tamaño de archivo mayor que el de algunos formatos. El formato PNG admite capas transparentes y está diseñado para la visualización y transmisión en línea.
GIF
(Formato de intercambio de gráficos) Formato de mapa de bits antiguo y ampliamente admitido que está limitado a 256 colores (8 bits). El formato GIF admite animación simple y capas transparentes.
JPG (JPEG)
(Grupo Mixto de Expertos Fotográficos) Formato de mapa de bits comprimido que utilizan la mayoría de las cámaras digitales. La compresión con pérdida causa cierta pérdida de datos, que a veces se nota como puntos borrosos en el texto.

  1. En la barra lateral Admin, vaya a Content > Design>Configuration.

    Página de configuración de diseño {width="700"}

  2. Busque la vista de tienda que desea configurar y haga clic en Edit en la columna Action.

  3. Expanda Selector de expansión en la sección Header.

    Configuración del encabezado {width="600"}

  4. Para cargar un nuevo logotipo, haga clic en Upload y elija el archivo de su sistema.

  5. Escriba Logo Image Width y Logo Image Height en píxeles.

  6. Para Logo Image Alt, escriba el texto que desea que aparezca cuando alguien pase el ratón sobre la imagen.

  7. Una vez finalizado, haga clic en Save Configuration.

Añadir un icono de favoritos

Favicon es la abreviatura de icono favorito y hace referencia al icono pequeño de la ficha de cada página del explorador. Según el explorador, el icono de favoritos también aparece en la barra de direcciones, justo antes de la dirección URL.

Un icono de favoritos suele tener un tamaño de 16 x 16 píxeles o de 32 x 32 píxeles. Commerce acepta los tipos de archivo ICO, PNG, APNG, GIF JPG y JPEG, aunque no todos los exploradores admiten estos formatos. El formato de archivo más utilizado para un favicon es ICO. Puede utilizar otros tipos de archivo de imagen, pero es posible que el formato no sea compatible con todos los exploradores. Hay muchas herramientas gratuitas disponibles en línea que puede utilizar para generar una imagen ICO o convertir una imagen a ese formato.

Favicon en la ficha del explorador

Commerce admite los siguientes formatos de archivo como icono de favoritos:

Formato de archivo
Descripción
ICO
Este formato de archivo de imagen está diseñado para imágenes de iconos de ordenador de pequeño tamaño. Utilizado principalmente en el sistema operativo Microsoft® Windows, el formato ICO puede contener imágenes de hasta 256 x 256 píxeles y 16 millones de colores (24 bits) con 8 bits de transparencia.
PNG
(Portable Network Graphics) Esta nueva alternativa al formato GIF admite hasta 16 millones de colores (24 bits). El formato de compresión sin pérdidas produce una imagen de mapa de bits de alta calidad con texto nítido, pero un tamaño de archivo mayor que el de algunos formatos. El formato PNG admite capas transparentes y está diseñado para la visualización y transmisión en línea.
APNG
(Gráficos de red portátiles animados) Formato de archivo similar a PNG que admite animación simple.
GIF
(Formato de intercambio de gráficos) Formato de mapa de bits antiguo y ampliamente admitido que está limitado a 256 colores (8 bits). El formato GIF admite animación simple y capas transparentes.
JPG (JPEG)
(Grupo Mixto de Expertos Fotográficos) Formato de mapa de bits comprimido que utilizan la mayoría de las cámaras digitales. La compresión con pérdida causa cierta pérdida de datos, que a veces se nota como puntos borrosos en el texto.

Paso 1: Crear un icono de favoritos

  1. Con el editor de imágenes que elija, cree una imagen gráfica de su logotipo de 16 x 16 o 32 x 32.

  2. (Opcional) Utilice una de las herramientas en línea disponibles para convertir el archivo al formato .ico y guardarlo en el equipo.

Paso 2: Sube el icono de favoritos a tu tienda

  1. En la barra lateral Admin, vaya a Content > Design>Configuration.

  2. En la cuadrícula, busque la vista de almacén que desea configurar y haga clic en Edit en la columna Action.

  3. En Other Settings, expanda Selector de expansión en la sección HTML Head.

    Configuración del encabezado del HTML {width="600"}

  4. Si desea quitar el favicon actual, haga clic en el icono Eliminar ( icono de la papelera ) en la esquina inferior izquierda de la imagen.

  5. Haga clic en Upload y abra el archivo de favicon que ha preparado.

    Favicon cargado {width="400"}

  6. Una vez finalizado, haga clic en Save Configuration.

Paso 3: Actualizar la caché

  1. Cuando se le pida que actualice la caché, haga clic en el vínculo Cache Management en el mensaje en la parte superior del área de trabajo.

  2. En la lista, seleccione la casilla de verificación Page Cache que está marcada como Invalidated.

  3. Establezca Actions en Refresh y haga clic en Submit.

  4. Para ver el nuevo icono de favoritos, vuelve a tu tienda y actualiza el navegador.

Cambio del mensaje de bienvenida

El mensaje de bienvenida del encabezado se amplía para incluir el nombre del cliente que ha iniciado sesión. Antes de iniciar la tienda, asegúrese de cambiar el texto predeterminado Bienvenido para cada vista de tienda.

Mensaje de bienvenida

  1. En la barra lateral Admin, vaya a Content > Design>Configuration.

  2. En la cuadrícula, busque la vista de almacén que desea configurar y haga clic en Edit en la columna Action.

  3. En Other Settings, expanda Selector de expansión en la sección Header.

  4. Para Welcome Text, escriba el texto del mensaje de bienvenida que desea que aparezca en el encabezado de su tienda.

    Configuración del encabezado {width="600"}

  5. Una vez finalizado, haga clic en Save Configuration.

  6. Cuando se le pida que actualice la caché de páginas, haga clic en el vínculo Cache Management en la parte superior del área de trabajo y siga las instrucciones para actualizar la caché.

La tienda muestra un aviso de copyright al pie de cada página. Como práctica recomendada, el aviso de copyright debe incluir el año actual e identificar a su empresa como el propietario legal del contenido del sitio.

Ejemplo de aviso de copyright

El código de carácter © se utiliza para insertar el símbolo de copyright, como se muestra en los ejemplos siguientes:

  • Ejemplo de formato largo

    Copyright © 2013-present Luma, Inc. All rights reserved.

  • Ejemplo de formato corto

    © 2021 Luma, Inc. All rights reserved.

Para actualizar el aviso de copyright:

  1. En la barra lateral Admin, vaya a Content > Design>Configuration.

  2. En la cuadrícula, busque la vista de almacén que desea configurar y haga clic en Edit en la columna Action.

  3. En Otra configuración, expanda Selector de expansión la sección Footer.

    Configuración del diseño del pie de página {width="600"}

  4. Para Copyright, escriba el aviso de copyright que desea que aparezca en el pie de página de cada página.

    Utilice el código de carácter © para insertar un símbolo de copyright.

  5. Una vez finalizado, haga clic en Save Configuration.

Configurar el aviso de demostración de tienda

Si la tienda está en línea, pero aún está en construcción, puede mostrar un aviso de demostración en la parte superior de la página para que la gente sepa que la tienda aún no está abierta para los negocios. Cuando esté listo para publicar, simplemente quite el mensaje. Es similar a voltear el letrero que cuelga en la ventana de Cerrado a Abierto. El formato del aviso de demostración está determinado por el tema de su tienda.

Aviso de demostración de tienda

  1. En la barra lateral Admin, vaya a Content > Design>Configuration.

  2. En la cuadrícula, busque la vista de almacén que desea configurar y haga clic en Edit en la columna Action.

  3. En Other Settings, expanda Selector de expansión en la sección HTML Head.

    Cabeza de HTML {width="600"}

  4. Desplácese hacia abajo hasta la parte inferior y establezca Display Demo Store Notice según sus preferencias.

  5. Una vez finalizado, haga clic en Save Configuration.

  6. Si se le pide que actualice la caché, haga clic en Cache Management en el mensaje del sistema y siga las instrucciones para actualizar la caché.

recommendation-more-help
31746fd0-1ead-45b5-9192-1aaf582c5f66