Personalizar la Tienda Online de Arsys

Actualización

Le recomendamos visite el siguiente artículo para información actualizada sobre la personalización de la Tienda y Reserva Online de arsys.es

Montar una tienda en Internet es muy sencillo teniendo las herramientas adecuadas. Además, todas las Tiendas Online de Arsys permiten un mayor o menor grado de personalización para hacer que nuestro ecommerce sea único sin demasiado esfuerzo.

Obviamente, el grado de personalización de cada shop dependerá del tiempo que le dediquemos y de lo experto que seamos, sin embargo, hay unas reglas básicas que valen para todo el mundo y con las que conseguiremos que nuestra tienda tenga una imagen totalmente profesional.

Aquí encontraras una serie de consejos sobre:

  1. Elección de la estructura
  2. Control del ancho de página
  3. Logotipo
  4. Colores y tipografía
  5. Otras consideraciones

Elección de la estructura

Lo primero que debemos considerar es la estructura global de nuestro ecommerce: si va a llevar un pie de página, una zona izquierda y una zona derecha, sólo una zona izquierda…

Mostrar y ocultar elementos de la Tienda Online

En la Tienda Online de Arsys, desde Diseño/General/Barras de navegación, indicamos qué elementos va a tener nuestra página y ocultamos aquellos que no vayamos a utilizar.

Si no ocultamos un elemento, aunque no pongamos nada de contenido, se mantendrá la reserva del espacio en la plantilla y hará que queden espacios vacíos.

Control del ancho de la página

A la hora de determinar el ancho de la tienda, hay 2 posibilidades:

  1. Usar un ancho de página fijo.
  2. Usar un ancho de página elástico (porcentual).

Al utilizar un ancho de página fijo, tenemos un mayor control sobre cómo va a quedar el contenido. Desde el panel de control, se nos ofrecen varias opciones con los valores más típicos.

Hoy en día, la mayoría de las personas navegan con pantallas de resolución de 1024 píxeles de ancho o superior, por lo que la opción más habitual es diseñar las páginas optimizadas para 1024×768.

Esta opción tiene la pega de que, para resoluciones inferiores a la elegida, la página se cortará, aunque hoy en día, las resoluciones inferiores a 1024 es muy raro que lleguen al 5% de los usuarios.

Elección del ancho de la página

Si utilizamos un ancho de página elástico (90% de la página y centrado), la zona central de nuestra página aumentará o disminuirá dependiendo de la resolución de pantalla del usuario.

Si elegimos esta opción, realmente nunca vamos a saber exactamente cómo ven nuestros clientes la Tienda Online: cada cual lo verá distinto según la resolución de su pantalla. Por ejemplo, si el usuario tiene una resolución de pantalla de 1280×768, el ecommerce la verá con un ancho de 1152px, mientras que si la resolución es de 800×600, la tienda se verá con un ancho de 720px, y en ambos casos será la misma tienda aunque puede que se vea diferente.

Consejo
Escoge un ancho fijo de 1024×768 centrado, de esta forma sabrás exactamente como se va a ver tu comercio online en las distintas resoluciones de pantalla.

El logotipo es la imagen de tu empresa: no hay que descuidarlo.

A la hora de introducir nuestro logotipo con un fondo diferente al elegido para el diseño de nuestra página, es recomendable que el fondo sea transparente o igual al color del fondo definido en la aplicación. De esta forma, el logotipo se verá perfectamente integrado en la cabecera.

Otro punto a considerar, es el tamaño de la cabecera. Si nuestro logotipo tiene 100px de alto (por ejemplo), la cabecera debe tener más de esos 100px para que quede bien.

De igual forma, debemos escoger con cuidado los márgenes del logotipo para que quede exactamente donde deseamos.

La altura de la cabecera y los márgenes del logotipo los podemos modificar en Diseño/Personalización/Barra de navegación/Encabezado.

Ajuste del logotipo

Colores y tipografía

Los colores y el tipo de letra que utilicemos en nuestra shop son tremendamente importantes.

Hay que considerar que un usuario de nuestra página va a navegar y pasar tiempo en la Tienda Online, mirando cosas, comprando… por lo que conviene evitar colores excesivamente chillones o combinaciones que dificulten la lectura.

Una correcta elección de la gama cromática, mejorará la experiencia del usuario, permitiendo que el texto sea legible.

  • Es mejor la utilización de pocos colores. El riesgo de estridencias es menor.
  • Podemos considerar, que 3 colores, en una misma composición debe ser el mínimo y en la mayoría de los casos debería ser suficiente. Utilizando menos colores puede que la imagen de su página resulte anodina.

Ejemplo de paleta de color

Para realizar una selección de colores para tu web puedes dividir los criterios en tres partes.

  • El color primario: es el color que define el tono de la página, por lo tanto sería el atributo “background” de la página.
  • El color secundario: es el segundo color predominante y que nos sirva para resaltar áreas. Debe ser bastante próximo al tono primario. Podemos ver primarios y secundarios en los ejemplos que hay por encima.
  • El color destacado: es el color que debemos utilizar para destacar aspectos concretos, debe contrastar mucho.

Ejemplo de coloresUn ejemplo de color primario, secundario y destacado puede ser el siguiente:

La utilización de este esquema de color puede ser apropiado si lo que queremos es un resultado llamativo, pero corremos el riesgo de convertir la experiencia de usuario algo pesada por la carga de color, para ello podemos bajar la luminosidad de la gama.

El contraste del texto sobre el color de fondo hará que la lectura sea más cómoda.

En el primer ejemplo podemos ver que el texto se lee correctamente, ante el segundo ejemplo en el que es casi ilegible.

ste entre fondo y texto

Otras consideraciones

Agrupación en categorías

Piensa con cuidado la categorización de tus productos: muchas categorías de primer nivel, significan muchas entradas de menú y eso dificulta la localización de cada cosa.

Además, puede provocar descuadres en el diseño al quedar un menú excesivamente largo.

Consejo
Procura no tener más de 7 categorías de primer nivel.

Reparte las opciones de navegación

No trates de poner todo en el menú superior; dispones de las barras laterales y del pie para colocar todos los elementos que tienes.

En la zona superior hay que colocar los elementos principales de navegación; los que la gente va a utilizar más a menudo.

Secciones como la política de privacidad o incluso la información de contacto, se pueden poner sólo en el pie de página.

Nunca hay una segunda oportunidad de crear una primera impresión

La página de inicio de tu Tienda Online es lo primero que verá tu cliente así que debe ser lo más atractiva posible. Haz una pequeña introducción de tu empresa y muestra alguno de los productos que vendes en tu tienda.

Mejorará el aspecto visual y captarás la atención del cliente sobre aquellos productos que más te interesen.

Tienda Online de arsys.es

Porque usted lo que quiere es vender, le ofrecemos la forma más sencilla: su propia tienda en Internet.
Profesional, segura y a su medida.FlechaTienda Online