Categoría: Ecommerce

Si tienes una tienda online Prestashop, puede que te encuentres con un pequeño inconveniente con el responsive de la web a la hora de subir vídeos de Youtube, incrustar mapas de Google Maps o imágenes en el editor HTML de las descripciones de tus productos. Probablemente, te ocurra algo como esto:

 

 

El hecho de que el mapa o el vídeo se desborde de la caja que debería contenerlos, aparte de ser estéticamente feo, no gustará ni a tus usuarios ni a Google ya que en la versión móvil el tema empeora. Como el elemento se sale del bloque blanco, en algunos casos aparece una barra para hacer scroll horizontal, nada usable y que hace que se desmaquete la ficha de producto. Por tanto, para solucionarlo, lo primero que debemos saber es porqué ocurre.

Tomando como ejemplo el vídeo de Youtube y si observamos el código que copiamos para insertarlo en el editor HTML de nuestro Prestashop, podemos ver varias cosas: que es un iframe y que le estamos indicando un ancho y un alto al vídeo (width=»560″ height=»315″).

 

<iframe width="560" height="315" src="https://www.youtube.com/embed/-R5R0Us0P4w" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>

 

Es por eso, que si Youtube nos  ha puesto automáticamente un ancho de 560 píxeles pero la web la estamos viendo en un móvil de un ancho inferior al que se ha definido, el vídeo se desborda de la caja que lo contiene. Como solución lógica podríamos decir: «Le ponemos un ancho más pequeñito y solucionado». Pero no, no nos serviría puesto que cuando veamos la página desde una pantalla de ordenador, el vídeo va a ser de un tamaño minúsculo. Lo ideal es que se adapte al dispositivo, que sea responsive. Entonces, ¿qué hay que hacer?

¿Cómo subir los vídeos de Youtube o mapas de Google (iframe) a Prestashop?

1. Cambiar un par de detalles de la configuración de Prestashop

En primer lugar, hay que asumir cierta rebeldía ya que tenemos que irnos a la configuración de nuestra tienda online para activar y desactivar un par de parámetros que Prestashop nos recomienda dejar justo al contrario de como vamos a ponerlo. 

[En Prestashop 1.7] Parámetros de la tienda > Configuración 

 

 

Marca «Permitir iframes en los campos HTML» -> SÍ (ya que tanto los vídeos de Youtube como los mapas de Google Maps lo son)

Marca «Utilizar la librería HTMLPurifier»  -> NO (para que Prestashop nos deje insertar código adicional en su editor de textos).

 

2. Añadir código al iframe para que sea responsive

El siguiente paso es sencillo. Se trata de añadir la siguiente línea de código al que hemos copiado de Youtube o Google Maps (marcado en rojo a continuación).

 

<iframe width="560" height="315" style="width: 100%; height: auto; min-height: 315px;" src="https://www.youtube.com/embed/-R5R0Us0P4w" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>

 

width: 100% -> Indica que el ancho será completo, ocupará todo la caja que lo contenga.

height: auto -> Indica que la altura se ajustará en función del ancho.

min-height: 315px -> Establece una altura mínima. Podemos cambiarla en función de nuestras necesidades.

 

 

Al añadir esta línea de código, la información sobre la anchura del 100% del iframe va a prevalecer sobre los 560 píxeles de los que hablábamos al principio. Ahora sí, problema solucionado:

 

 

¿Y cómo subimos una imagen a Prestashop para que sea responsive?

El proceso es más o menos similar al anterior. En primer lugar, tenemos que comprobar que el punto uno esté configurado como hemos comentado en el ejemplo anterior.

Luego, subiremos la imagen a Prestashop como lo hacemos normalmente. Puede que la plantilla venga preparada correctamente y no sea  necesario hacer nada para que el responsive funcione bien. Sin embargo, hay casos en los que la imagen, al igual que ocurre con los iframe, se desborda de la caja que lo contiene. En esos casos, bastará con añadir la siguiente línea de código a la imagen que hayamos subido (marcado en rojo a continuación). 

 

<img src="http://dummy17.loadingproject.es/img/cms/tu-imagen.jpg" style="height: auto; width: 100%;"/>

 

Esto es todo. Esperamos que haya servido de ayuda. Y ya sabes, frase de influencer, «si te ha gustado puedes comentarnos o compartir el post en redes sociales». 

—

Foto de Ilya Pavlov elegida con cariño en Unsplash y mockup de Freepik.

Cantidad de estudios han demostrado que el envío gratis le gusta a la gente. ¿Para que negarlo? Nos encanta comprar online porque es muy cómodo, pero a veces nos molesta tener que pagar más. ¿Egoísmo? Puede ser. Pero lo cierto es que ocurre.

Un día incluso hicimos nuestro mini-esudio de mercado (sin garantías) en Facebook. Preguntamos a nuestros seguidores si en una tienda online preferían la entrega en un día o el envío gratis. La gran mayoría apostó porque lo mejor era no pagar ni un céntimo más de lo que mostraba la web. Sabemos que estos datos no son extrapolables al resto de la población, sin embargo, hay que reconocer que el envío gratis se lleva.

Nosotros no seremos los que te digamos si tienes que ofrecer envío gratis a tus clientes o no. Para eso es importante que sepas cuáles son tus números, tus costes, tus márgenes y con qué reglas puedes jugar. Es cuestión de hacer cuentas y ver el camino que nos queremos marcar.

Lo que sí parece bastante claro es que hay cantidad de ventajas al añadir esta funcionalidad. La palabra gratis gusta, por eso muchos usuarios se esforzarán en añadir algunos productos más al carrito para no tener que pagar por el envío. Además, en muchas tiendas online existe la incertidumbre de no saber cuánto habrá que pagar por el transporte hasta que no te registras, motivo por el que muchos usuarios abandonan sus carritos. El simple hecho de saber que no se le va a cobrar a partir de cierta cantidad, hará que esos abandonos se reduzcan. 

Por tanto, vamos a explicar cómo configurar el envío gratis en Prestashop (versión 1.6):

Gastos de envío gratis en Prestashop a partir de un importe para todos los clientes

Es la forma sencilla de configurar el envío gratis en tu tienda. Dentro de la administración de nuestra tienda, nos vamos a Transporte > Preferencias. En el primer bloque llamado «Mantenimiento» encontramos dos campos en los que podemos incluir una cantidad. Por ejemplo, en el caso de que queramos establecer envío gratis a partir de 50 euros, pondremos importe en el campo «Envío gratuito a partir de __ €».

 

 

De esta forma, cuando un usuario añada productos a su carrito por un valor superior a 50 euros, los gastos de envío no se le sumarán. Hay que tener en cuenta en esta opción que Prestashop ignorará el transportista que haya seleccionado y la ciudad en la que vive la persona. Es decir, dará igual que viva en Canarias y que haya elegido un transportista que entrega en 24 horas. Igualmente, no se le cobrarán los gastos de envío.

Gastos de envío gratis en Prestashop según el importe y la zona de envío

Esta es la opción más común ya que lo habitual es que los gastos de envío sean diferentes según la zona a la que tengamos que mandar nuestros productos. En España ocurre principalmente con las islas, en las que el precio del envío desde la península es más elevado.

Por ese motivo, o porque tengamos una política de envío gratis diferente según el lugar desde el que nos compren, existe una herramienta en Prestashop que va a ayudarnos a combinar todas las estrategias.

Para ello, desde la administración de nuestra tienda, nos vamos a Transporte > Transportistas. Como puede verse en la imagen, lo primero es marcar «De acuerdo con el precio total» y a continuación tenemos que establecer son los diferentes rangos de importes que vamos a tener. En el caso del ejemplo que mostramos en la imagen, hemos marcado:

• De 0€ a 50€
• De 50€ a 100€
• De 100€ a 5.000€

Luego, seleccionamos las zonas que va a tener definidas ese transportista y vamos especificando el gasto de envío que hemos decidido para cada área.

En nuestro caso, tenemos un primer tramo que va de 0€ a 50€ donde hemos fijado un importe para cada zona: 8€ para las islas, 4€ para nacional y 3€ para los pedidos que se repartan en la provincia en la que tenemos nuestro almacén. 

Luego, en el rango que va de 50€ a 100€ ya ofrecemos envío gratis en península. Sin embargo, en las islas sigue costando 5€ el envío del paquete. 

Por último, en el tramos de 100€ a 5.000€, todos tienen marcado el envío gratis, 0€.

 

 

Listo. Esperamos que esta breve explicación te haya servido para configurar el envío gratis en tu tienda Prestashop. Si tienes preguntas o quieres comentarnos algo relacionado con este tema, no dudes en dejarnos un comentario. El tema de los transportistas y los gastos de envío da mucho de sí.

–

Foto de Bench Accounting elegida con cariño en Unsplash.

Después de ver cantidad de páginas de «Quiénes Somos» tristes y desatendidas, hemos querido redactar este post en honor a un apartado que en muchas ocasiones se siente más abandonado que Marco en el Día de la Madre. Nuestra recomendación es clara: no la pases por alto, dedícale la atención que se merece y trátala con amor y cariño. Es tu carta de presentación.

En esta entrada hablaremos sobre la importancia que este apartado tiene en una web y los errores más comunes que se cometen. También te mostraremos algunos ejemplos de páginas web que saben muy bien la finalidad de esta sección y la utilizan correctamente.

¿Por qué es importante la página de Quiénes Somos?

Son muchos los nombres con los que podemos denominar a este famoso apartado de la web: «Sobre nosotros»,  «nuestra historia», «nuestro equipo», «acerca de nosotros», «nuestra empresa»… Sin embargo, independientemente de como lo denomines, debes conocer porqué es tan relevante. 

Para entenderlo mejor siempre nos gusta salirnos un poco de la vida virtual y pasar a la real. Ahí va nuestro ejemplo real life.

Cuando nos presentan a alguien por primera vez nos dicen su nombre, algún dato superficial y poco más: «Ella es Susana, la hermana de la vecina del primero». Interesante.

Esta información que recibimos en la primera toma de contacto suele ser escasa por lo que para conocer a la persona en cuestión necesitaremos hacer una pequeña labor de «investigación»: preguntar a la persona que te la presentó, charlar con ella, cotillear su Facebook, etc. Esta tarea investigadora la haremos si tenemos interés en la persona, si no, si te he visto no me acuerdo.

Vayamos al mundo online.

Entramos por primera vez en una tienda online que hace pulseras, anillos y colgantes de forma artesanal. Nos gusta lo que vemos e incluso no descartamos comprarnos uno de sus productos.

Traducido al ejemplo anterior, tenemos el interés suficiente en la tienda como para activar el proceso investigador: ver quién hace esos anillos y, si me da confianza pagar por él (y otros muchos factores más que influyen en la decisión de compra). Tenemos poco tiempo. Probablemente miraremos un poco la página principal y nos iremos a ver quién leches está detrás de todo esto. No sabemos si habrá una gran empresa que fabrica anillos en masa o serán dos chicas con mucha destreza y habilidad en sus manos que trabajan desde su taller en Cuenca. Ahí está el valor añadido de este apartado. 

Con el ejemplo queda claro cuál es el papel de la página de «Quiénes somos», tu carta de presentación y una de las páginas más visitadas de cualquier web. 

Utiliza la página de «quiénes somos» para:

• Ampliar información sobre tu empresa
• Transmitir confianza
• Transmitir cercanía
• Humanizar tu marca

Consejos para redactar una buena página de Quiénes Somos

Se rumorea que el motivo por el que están desatendidos muchos de estos apartados es porque nos da pereza definirnos o porque ni si quiera nos hemos planteado quiénes somos como empresa. Puede que sea así, aunque da igual el motivo. La idea es que tengas en cuenta al menos algunos de los consejos siguientes:

1. Siempre hay una historia que contar

¿En qué momento surgió tu empresa? ¿tienes un comienzo interesante que merezca la pena saber? Seguro que sí. De todo se puede contar una historia que no sea la típica y protocolaria que marcan los cánones. Está bien que cuentes tus años de experiencia, pero no solo eso. Hay frases que ya están muy repetidas y un poco «manías» por lo que es recomendable redactar con un lenguaje cercano, que no denote que quieres esconderte detrás de las palabras.

Ejemplo de la web de Pedrita Parker donde cuenta cómo fueron sus comienzos.

2. Tus principios serán bien valorados

A veces sentimos que algunas empresas son frías y distantes en su discurso. Por eso, si tienes unos principios que consideras fundamentales, muéstralos al mundo. Cuando vendemos productos relacionados con un estilo de vida, este punto es importantísimo. 

Por ejemplo, Moderna de Pueblo vende productos con sus ilustraciones en los cuales se alude a muchos estereotipos con los que se identifica y a la vez parodia. Podéis ver toda una declaración de valores en su Quiénes Somos.

3. ¿Quién hay ahí?

Es muy habitual encontrarnos fotos compradas en bancos de imágenes en los apartados de quiénes somos de una web. Eso no es serio. Si la página se llama quiénes somos, no vale engañar, esos tan guapos y perfectos no somos nosotros. ¿Que nos gustaría serlo? Igual sí, pero no lo somos. Lo recomendable para cumplir este punto es que nos mostremos nosotros mismos y presentemos a nuestro equipo. Puede ser con nombres, una foto de equipo, imágenes individuales, un vídeo… La opción que más te guste. Seguro que ayudará mucho a generar confianza en aquellas personas que os conocen por primera vez. También puedes enseñar tus instalaciones.

Un ejemplo original que merece la pena ver en movimiento es el de Lateral

4. Habla, conecta con los tuyos

En la página de «quiénes somos», además de lo que hemos comentado anteriormente, puedes incluir elementos para entablar conversación con las personas que visitan este apartado. Puedes mostrar tus redes sociales, dar la opción de unirse a tu equipo o mostrar un formulario para contactar con vosotros.

5. Diseña y maqueta bonito

Está bien ponerle mucho empeño a la redacción de los textos, pero no olvides que hay que darle forma para que sea fácil de leer y visualizar en web, móvil o tablet. Debemos prestar atención al diseño, creando párrafos no muy extensos, intercalando fotografías, iconos, vídeos… En definitiva, creando una sección bonita e interesante de leer. Y por cierto, ¡no olvides revisar las faltas de ortografía! 

Otros ejemplos de página de Quiénes Somos originales

Ejemplo de Redcollar con vídeo de presentación de toda la plantilla:

Ejemplo de Grovemade con unos hover muy originales:

Ejemplo de Focuslabllc una página muy limpia y elegante con slide de imágenes:

Concluyendo…

Opciones hay miles y consejos millones. Haz lo que quieras, lo que te diga tu intuición, lo que más te guste, pero no abandones este apartado como si de una página de aviso de cookies se tratara (sin desmerecerla, pobrecita). Y recuerda que, un «quiénes somos» atractivo aumentará el porcentaje de posibilidades de convertir a un usuario en cliente, ¿quién se priva?

Nada más por hoy. ¿Te han gustado nuestros consejos? ¿crees que nos hemos dejado alguno atrás? Coméntanos y hablamos sobre el tema 😉

–

Foto de Jon Tyson elegida con cariño en Unsplash.