Configurar el diseño del Instant Site (heredado)

Puede utilizar una plantilla de Instant Site adaptable para empezar a vender rápidamente sus productos en línea. Su sitio web tendrá un aspecto profesional en todos los dispositivos, escritorio, tabletas y móviles. Puede cambiar fácilmente el aspecto del Instant Site a su gusto. Si no es un experto en tecnología, puede elegir entre las opciones de apariencia preestablecidas en su administrador de su tienda → Sitio web. Los usuarios competentes con conocimientos de codificación pueden sumergirse en las modificaciones de CSS para crear un aspecto único de la tienda.

Orden de las secciones

El Instant Site consta de las siguientes secciones:

  • Portada (la primera casilla)
  • Tienda
  • Misión de la empresa (Por qué elegirnos)
  • Acerca de
  • Testimonios de clientes
  • Ubicación
  • Información de contacto 

Puede ocultar cualquier sección del Instant Site y cambiar su orden de la forma deseada. Para ello, vaya a su administrador de su tienda → Sitio web, haga clic en Editar sitio y luego en Reorganizar bloques:

Screen_Capture_on_2019-10-11_at_21-51-23.gif

Por ejemplo, si acaba de crear su tienda, puede ocultar la sección Testimonios de los clientes hasta que reúna opiniones de sus clientes. Si su negocio es estacional, puede ocultar fácilmente la parte de la tienda dentro de su Instant Site y volver a abrirla cuando esté de vuelta. En caso de que quiera mostrar su imagen de portada más abajo, puede moverla bajo otra sección de su Instant Site, etc.

Si no necesita una portada, puede convertirla en un menú superior estrecho.

Temas para la portada

La sección de portada presenta su tienda a sus clientes. Puede elegir uno de los 79 temas para la imagen de portada de su tienda. Para ello, desde su administrador de su tienda vaya a Sitio web → Apariencia del sitio → haga clic en Editar → Temas. Elija el tema que mejor se adapte a su negocio:

Choose_a_design_theme_for_instant_site.png

También puede editar el tema elegido: subir su propia imagen de portada, cambiar la tipografía, etc. Puede hacerlo en las secciones correspondientes del editor de Instant Site. 

Fondo de la portada

En el menú Opciones de fondo puede elegir entre los tipos de fondo Color sólido, Gradiente, Imagen o Vídeo para la primera casilla de su Instant Site:

image7.png

La opción Color sólido es buena para un aspecto minimalista o para una combinación con una imagen de portada (ver sobre diseños de portada más abajo). Puede establecer cualquier color como fondo de la portada:

image22.png

Para un aspecto extravagante, pruebe el tipo Gradiente como fondo de su portada. Puede elegir un degradado de la galería o hacer una mezcla de dos colores cualquiera con el ángulo que prefiera:

image17.png

Para la Imagen de portada, puede subir una foto suya o del equipo de su tienda, una imagen en la que aparezcan sus productos o cualquier otra foto que atraiga a sus clientes potenciales y les dé una impresión positiva sobre su negocio. El tamaño de archivo recomendado para la imagen de portada es de 1400 x 1050 píxeles o más, en formato JPG, PNG o GIF:

image7.png

Si no tiene ninguna foto buena para la imagen de portada, puede encontrar algunas fotos estupendas en sitios web de stock, como Shutterstock, Depositphotos, Pixabay, y otros.

Aplique una superposición a su imagen de fondo para facilitar la lectura del texto que aparece en ella (así como para crear un determinado ambiente). Puede ser una superposición de un color o un degradado con un ángulo personalizado:

image21.png

Puede añadir fácilmente un Vídeo de Youtube/Vimeo como fondo de portada para mostrar sus mejores productos o para animar su Instant Site para un evento - solo tiene que poner el enlace de su vídeo en el campo de texto, guardar los cambios y el vídeo se reproducirá sin sonido en su fondo de portada:

image3.gif

Es posible que quiera añadir una superposición a su vídeo de fondo para que el texto en él sea fácil de leer. Puede utilizar una sugerencia o elegir cualquier color o degradado para una superposición.

Disposición de la portada

En Disposición de la portada puede elegir qué parte de la primera casilla debe ocupar su portada. Hay seis opciones para elegir:

image4.png

Si elige un diseño de media pantalla o de barra lateral con una imagen de portada en el fondo, el tamaño recomendado para la imagen de portada es de 1800х700px o 1200х1200px respectivamente.

Si no necesita una portada en su sitio, elija la opción Menú superior para convertirla en un encabezado estrecho.

También puede colocar y alinear el titular y la descripción para encontrar el mejor lugar para ellos en su portada.

Botón de llamada a la acción

El Botón de llamada a la acción lleva a los clientes directamente al listado de productos. Por defecto, está activado y dice «Comprar ahora»:

image2.png

Puede cambiar el texto del campo Etiqueta del botón y utilizar cualquier otro nombre de su elección. Por ejemplo, si vende entradas en línea, puede llamarlo «Reservar ahora». Para productos digitales como libros electrónicos, imágenes o cualquier otro material descargable, el botón puede decir «Descargar ahora».

Tipografía en la portada

Si desea establecer otro color y tamaño para el botón de llamada a la acción y utilizar una fuente diferente para su etiqueta, puede realizar estos cambios en el menú Tipografía que viene a continuación. El color de la fuente se adapta automáticamente al color del botón elegido para que la etiqueta sea fácil de leer.

Además, en Tipografía, puede cambiar el aspecto del titular y de la descripción del Instant Site: seleccione el tipo de letra deseado de un desplegable con más de 60 fuentes sugeridas, aumente o disminuya su tamaño y elija cualquier color de letra.

image10.gif

Para encontrar colores adecuados para los elementos de la portada, puede utilizar sitios como Canva y Color Hunt para inspirarse en la paleta de colores o subir su imagen de portada a un servicio como Image Color Picker para encontrar los códigos exactos de sus colores.

Logotipo de la tienda

Puede subir un logotipo que se mostrará en las páginas de su tienda. Este logotipo también se utilizará por defecto en sus notificaciones por correo electrónico, facturas y como favicon.

Si más adelante cambia el logotipo de la tienda, también tendrá que cargar manualmente el nuevo logotipo en los ajustes de notificaciones por correo electrónico y facturas. 

El logotipo de la tienda no debe ser inferior a 140 x 140 px (o al menos 280 x 280 px para que se vea bien en Retina). Puede subir una imagen más grande. En este caso, lo redimensionaremos automáticamente para que encaje en el bloque del logotipo de 480 x 140 px.

Los formatos de imagen admitidos son JPEG, PNG y GIF.

Para añadir un logotipo a su escaparate: 

  1. Desde su administrador de su tienda, vaya a Sitio web y haga clic en Editar sitio.
  2. En la página que se abre, haga clic en Imagen del titular y de la portada.
  3. Desplácese hacia abajo y haga clic en Logotipo de la tienda
  4. Haga clic en Subir logotipo.
  5. En el desplegable Posición del logotipo, elija dónde quiere mostrar el logotipo. También hay una opción para ocultar el logotipo y utilizarlo solo para el favicon.
  6. Si quiere que su logotipo sea redondo, active la opción Logotipo redondo.

    Upload_store_logo.png

Si desea utilizar el favicon y ocultar el logotipo, puede hacerlo con un código CSS:

  1. Desde su panel de administración de su tienda, vaya a Diseño.
  2. Haga clic en Editar tema si tiene un tema CSS personalizado activo o desplácese hasta la parte inferior de la página y haga clic en Crear temaAñadir un nuevo tema CSS.
  3. Pegue el siguiente código en su Tema CSS:
    div.cover__logo { display: none;}
  4. Guarde los cambios.

Actualice la página de su tienda para ver los cambios.

Flecha de desplazamiento

En el menú Flecha de desplazamiento puede ocultar la flecha que lleva a los visitantes del sitio a la sección de la tienda o añadir un texto para que anime a la gente a visitar su tienda:

image13.png

Menú superior

En Menú superior puede personalizar el aspecto de la barra superior de su Instant Site y elegir qué información desea mostrar en el encabezado: número de teléfono, horario de atención, ubicación, enlaces a redes sociales, etc.

Screenshot_2020-10-06_at_10.11.32.png

Para cambiar el encabezado y darle un aspecto más tradicional, active la opción Mostrar navegación. La navegación incluye enlaces a las siguientes secciones de su Instant Site de una página: Tienda, Acerca de nosotros, Localización, Contacto:

image9.png

Opciones de diseño preestablecidas para su tienda

Puede cambiar la apariencia de su tienda y darle el aspecto que mejor refleje su marca. Aquí se explica cómo llegar a los ajustes de diseño:

Puede acceder a las opciones de diseño de la tienda en su administrador de su tienda, vaya a Sitio webEditar sitioTienda.

image14.gif

Las opciones de diseño de la tienda replican la configuración de la página Diseño en su administrador de su tienda. Los cambios que realice aquí afectarán a todos sus escaparates.

Puede controlar el tamaño de la miniatura, la relación de aspecto, la alineación del texto y el borde de la tarjeta de producto con ayuda de las opciones correspondientes:

image1.png

Si desea mostrar todos los detalles de sus productos, utilice imágenes grandes. Para la mayoría de los productos puede ser suficiente utilizar imágenes de tamaño medio, mientras que si desea mostrar una mayor cantidad de productos por página, puede hacerlo utilizando imágenes pequeñas. Las opciones para la relación de aspecto de las miniaturas le permiten decidir si las imágenes serán horizontales, verticales o cuadradas.

Lista de productos y categorías

Abra el menú Lista de productos y categorías para personalizar la apariencia de las páginas en las que aparecen sus productos. Puede cambiar la visibilidad de Nombre del producto, Precio, REF, botón «Comprar ahora» e Imagen adicional del producto:

image8.png

Si desea obtener un aspecto más aireado, puede desactivar el número de REF y los botones Comprar ahora o mostrarlos solo al pasar el ratón.

En caso de que tenga tarjetas de categoría mostradas en la página de inicio de la tienda, puede ajustar la posición de los nombres de las categorías.

Bajo el bloque Navegación puede activar/desactivar las opciones Ruta de navegación y «Ordenar por»:

image20.png

A continuación puede activar la opción Oscurecer el fondo de las imágenes para que destaquen más en el fondo de la tienda.

Página del producto

En el menú Página de producto, puede encontrar opciones de diseño preestablecidas para personalizar el aspecto de las páginas con información detallada sobre sus productos. Aquí puede cambiar la Disposición de la página, el Diseño de la galería de imágenes y los elementos de la Barra lateral:

image6.png

Si desea cambiar el orden de los bloques en la barra lateral, puede arrastrar y soltar los elementos en la lista.

You can upload additional product images to demonstrate your item from the best angle. Para las imágenes de la galería, puede subir fotos ampliadas que muestren los detalles más esenciales del artículo, vistas laterales y posteriores, fotos de productos a juego o accesorios adicionales.

Miscelánea

En el menú Miscelánea, puede ajustar la visibilidad de los iconos que aparecen debajo de sus listas de productos. Puede desactivar el Menú de pie de página, el enlace «Iniciar sesión» y la Ruta de navegación:

image11.png

En conjunto, las opciones de apariencia preestablecidas le dan mucha libertad para construir una página web única de aspecto profesional que muestre sus productos de forma notable.

Si su tienda requiere una personalización avanzada y está familiarizado con el CSS, puede construir su propio tema CSS desde cero. Si no se siente cómodo con la codificación pero quiere un tema CSS personalizado para su tienda, puede contratar a profesionales para que creen un diseño personalizado para usted de forma paga.

Artículos relacionados

Cómo conectar un dominio al sitio web instantáneo

¿Fue útil este artículo?

¡Increíble! ¡Gracias por sus comentarios!

¡Gracias por sus comentarios!

Ver todos los artículos
Usuarios a los que les pareció útil: 0 de 2
Usamos cookies y tecnologías similares para recordar sus preferencias, medir la efectividad de nuestras campañas y analizar datos despersonalizados con el fin de mejorar el rendimiento del sitio. Al elegir «Aceptar», da su consentimiento para el uso de cookies.
Aceptar cookies Rechazar