Personaliza al máximo tu Tienda Online con los elementos de contenido libre

Ya hemos visto cómo personalizar el aspecto de nuestra Tienda Online modificando los valores de la plantilla (colores, tipos de letra, disposición y tamaño de menús…) desde la sección de diseño. En este artículo mostraremos cómo llegar mucho más lejos en la customización tanto estética como funcional de nuestra Tienda Online Premium mediante el uso de los Elementos de Contenido Libre.

En la Tienda Online casi todos los elementos que necesite usar están predefinidos, para poder facilitarle el trabajo de modo que sólo tenga que ocuparse de su negocio. Puede configurar fácilmente qué elementos usar y dónde colocarlos desde Diseño-> Editar elementos de navegación->Añadir:

Fig.1 Elementos de navegación

La gran mayoría de las opciones que hemos visto se corresponden con  elementos predefinidos, ya creados en la tienda para su comodidad. El comportamiento de estos elementos es fijo y no se puede modificar.

En el ejemplo que nos ocupa, correspondiente  a www.tienda-ejemplo.com, hemos decidido que en la segunda barra superior, vamos a tener varios elementos de enlace a categorías, inicio, promoción, contacto, así como las banderas de selección de idioma. Todos ellos son elementos predefinidos. Por tanto, no es posible cambiar los iconos de las banderas, y el enlace de “categorías” siempre va a mostrar todas las categorías, sin que pueda elegir cuáles se mostrarán o utilizar un nombre distinto (por ejemplo, una abreviatura) para una categoría.

Casi todos estos elementos, como los enlaces del menú, presentan características que van asociadas a la plantilla escogida y las modificaciones que hayamos practicado. Por ello, sí es posible modificar su aspecto.

Fig.2 Elementos predefinidos para la barra superior de Tienda-ejemplo.com (vista desde la administración)

Fig.3 Elementos predefinidos para la barra superior de Tienda-ejemplo.com (vista de la tienda)

Lo que no podremos es cambiar su comportamiento ni su contenido: el enlace “categorías” siempre mostrará las categorías visibles “Flores/Plantas/Árboles/Utensilios/Información de interés/Manuales”, no se puede ocultar una categoría que no me interese mostrar en esa barra (por ejemplo, por falta de espacio), sin borrar la categoría.

La tienda incluye una gran variedad de elementos que cubren prácticamente todas las necesidades habituales de los comerciantes. Pero, ¿qué pasa cuando queremos incluir un elemento que no está, o cuando queremos un comportamiento distinto de uno que que está predefinido pero que no se ajusta del todo a nuestras necesidades? Aquí es donde entran en juego los “Elementos definidos por el usuario” , también conocidos como “Elementos de contenido libre”. Los hay de tres tipos:

  • HTML
  • Cuadro con HTML
  • Enlace

En las Tiendas Online Premium de arsys.es puede utilizar (hasta 5) elementos definidos por el usuario para crear sus propios elementos, con el comportamiento y el aspecto que desee, usando código HTML si así lo necesita.

Al igual que los elementos “predefinidos”, los elementos de contenido libre cumplen estos sencillos preceptos:

  • Se pueden colocar en las barras de navegación superiores e inferiores, así como en los menús laterales
  • Son permanentes, independientemente de la página en la que esté navegando
  • Por razones obvias, no pueden ser colocados en el “Área de contenido”, o sección central de la tienda

Esto abre a aquellas personas con mínimos conocimientos de HTML un mundo de posibilidades en la personalización del aspecto y el comportamiento de su Tienda Online. Veamos algunos ejemplos.

Ejemplo 1. Anuncio destacado

En tienda-ejemplo.com queríamos poner un banner vertical con publicidad de nuestras tiendas, que estuviera siempre presente.

Fig. 4 Introduciendo el código del anuncio destacado para crear el elemento

Basta con añadir un elemento HTML en la barra de navegación derecha, e introducir el código HTML en el que se indiquen las imágenes, estilos, textos, comportamiento, enlaces, etc. Veamos el resultado:

Fig.5 Anuncio destacado en el menú derecho.

Además, es posible definirlo de forma que el resultado cambie según el idioma seleccionado.

Ejemplo 2. HTML

En este caso, el elemento predefinido como “suscribirse al boletín”, no se ajustaba a nuestras necesidades, ya que ocupaba demasiado sitio:

Fig.6 Elemento predefinido “Suscribirse a Boletín”

En el elemento predefinido, los colores y tipos de letra corresponden al diseño de la plantilla general, pero no es posible cambiar nada más. Por ejemplo, no es posible hacer un cambio tan pequeño como sustituir el texto “suscribirse” por “inscribirse”.

Así que decidimos crear nuestro propio elemento HTML que es una caja más pequeña, con otra imagen distinta, y que hemos aprovechado para que incluya también la función “Hacer pedido directo” :

Fig.7 Elemento definido por el usuario

Ejemplo 3. Cuadro con HTML

Es una opción similar, pero que ya crea la caja, con un título, y un campo donde introducir el HTML, que puede facilitar el trabajo a algunos clientes.

Fig.8 Cuadro con HTML

Ejemplo 4: Enlace simple

Este elemento es muy sencillo y se explica por sí solo. Aunque su función es limitada, hay que tener en cuenta que no es posible añadir de otra forma un enlace a una barra de navegación.

Ejemplo 5. Otros usos: Google Analytics, Google AdSense..

Los HTML son la forma ideal para introducir códigos como el que se utiliza para Google Analytics o Google Adsense, si queremos que estén presentes en toda la tienda.