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:
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.
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:
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:
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:
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:
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:
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:
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:
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:
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»:
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.
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.
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:
- Desde su administrador de su tienda, vaya a Sitio web y haga clic en Editar sitio.
- En la página que se abre, haga clic en Imagen del titular y de la portada.
- Desplácese hacia abajo y haga clic en Logotipo de la tienda.
- Haga clic en Subir logotipo.
- 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.
- Si quiere que su logotipo sea redondo, active la opción Logotipo redondo.
Si desea utilizar el favicon y ocultar el logotipo, puede hacerlo con un código CSS:
- Desde su panel de administración de su tienda, vaya a Diseño.
- 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 tema → Añadir un nuevo tema CSS.
- Pegue el siguiente código en su Tema CSS:
div.cover__logo { display: none;} - 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:
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.
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:
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 web → Editar sitio → Tienda.
En la aplicación iOS, vaya a Tienda → Escaparate y sitio web → haga clic en Editar contenido del sitio web → Tienda.
En la aplicación Android, vaya a Tienda → Escaparate y sitio web → haga clic en Editar contenido del sitio web → Tienda.
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:
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:
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»:
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:
Si desea cambiar el orden de los bloques en la barra lateral, puede arrastrar y soltar los elementos en la lista.
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:
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.
Artículos relacionados