La respuesta es fácil: la misma tienda online. Para negocios pequeños, que con tener control de stock, posibilidad de hacer tickets/facturas, ver las ventas diarias/semanales/mensuales y poco más, el propio sistema de tienda online les puede hacer el servicio, solo hay que crear un cliente “ticket”, “tienda” (u otro nombre genérico que nos parezca apropiado y claro) para cuando las compras se realicen en la misma. Evidentemente este “cliente” se usará siempre y cuando no quiera factura, en cuyo caso se le da de alta como si lo hiciera él mismo desde su casa.

Con un par de modificaciones incluso podremos tener en nuestra tienda online/tpv métodos de pago sólo para tienda y hasta búsquedas por codigo EAN.

Ninguno es mejor que el otro, sólo es más adecuado a cada caso. Como primera aproximación, se podría decir que si sus compras son más bien de caracter compulsivo, la recopilación de datos de envío y facturación, asi como el pago debería de ser lo más sencillo y rápido posible, no queremos que se nos pierda la venta por aburrir al clietne rellenando páginas y páginas de formularios.

Pero si su compra es más del tipo meditado (que además suelen ser compras de mayor importe), al cliente no le importará emplear un par de minutos extra en asegurarse de que todo está bien claro y relleno para que su mercancía llegue correctamente, de hecho, podría perderse la venta si simplificamos (y aceleramos) demasiado el proceso, al no sentirse el comprador lo suficientemente seguro.

1- Vender por internet es fácil, lo difícil es que le compren.

2- No vende lo mismo -ni de lejos- una tienda virtual de esas que se anuncian por precios irrisorios como 1 euro al mes que una diseñada y personalizada, aunque sea considerablemente más cara. Es lo que se llama inversión.

3- Si no le encuentran, no venderá. Su tienda online necesita posicionamiento (SEO, SEM).

4- Lo que más influye en las ventas son (por este orden) el precio, los gastos de envío y las formas de pago disponibles. Disponer de facilidades de envío, buenas fotos de los productos, descripciones claras y ofrecer algo que no ofrezcan los demás también ayuda mucho.

5- Una tienda online no es ponerla y echarse a dormir. Hay que trabajar lo mismo, aunque de forma diferente, que con una tienda física.

Cómo sea nuestra tienda online depende en parte de qué tipo de producto vendemos y por lo tanto la tendencia de nuestro posibles compradores: compulsiva vs premeditada. Así, ciertas características de unas (banners de ofertas, compras rápidas, comparaciones de productos…) no encajan en otras y viceversa.

Tambien tenemos que ofrecer al visitante (y futuro cliente) ciertas informaciones imprescindibles así como posibilidades de interactuación:

Condiciones de uso, política de devoluciones… Todo esto ofrece al posible cliente la información sobre la tienda necesaria para que se sienta en un comercio REAL. A nadie le gusta comprar sin saber quién está detrás o dónde está la tienda en caso de tener que reclamar algo, por ejemplo.

Tener las tarifas de envío claras y visibles, para evitarle sorpresas desagradables al nuevo cliente. O según los rangos de precios/portes que se manejen incluso ofrecer portes incluidos. A nadie gusta meter en la cesta un producto de 6€ para luego descubrir que el envío cuesta otros 6€.

Posibilidad de contactar con algún responsable de la tienda. Es muy penoso querer preguntar algo sobre un producto y que no haya forma de comunicarse con quien puede aclarar nuestras dudas. Y mejor si ofrecemos varias vias, formulario de contacto, chat, teléfono de atención… cada negocio tiene su público y se deben escoger las vis más aduecuadas.

Buenas descripciones y buenas fotos de los productos. De poco sirve poner una foto de un, por ejemplo, sujetalibro muy bonito, si no ponemos qué tamaño tiene. Una descripción fantástica de un conjunto de mesa y sillas de jardín si ponemos una foto de mala calidad (pixelada, desenfocada…)

Comentarios de los productos. La mayoría de las tiendas virtuales tiene la posibilidad de permitir a los clientes de escribir una reseña o comentario acerca de los productos. Muchos clientes se fían más de lo que dicen otros clientes que de lo que dice la descripción. Pero no hagais trampas, si es el propio dueño de la tienda quien se dedica a pone los comentarios, se nota. Mejor animad a vuestros clientes a escribir una reseña aunténtica.

Ofercer pago online. Nada más frustante que realizar una compra y al terminarla descubrir que hay que hace el pago por transferencia al banco “fulanín” que casualmente no es el mismo que usamos nosotros. Tres días de demora extra, comisiones de transferencia, tener que realizar otra gestión ara el pago… muchas ventas se pierden por ahí. Da esa posibilidad si quieres, pero ofrece pago online, ya se a través del TPV virtual de tu banco o de Paypal.

La idea (por cierto aun esta en fase de pruebas y puede que aún no aparezca) es que al llevar a cabo una búsqueda en Google nos parazcan junto a los resultados cuántos +1 ha obtenido esa web. Su influencia en el posicionamiento SEO de las páginas recomendadas aun es una incógnita.

Su implementación es realmente sencilla, solo tienes que copiar el código ofrecido por Google en tu página web.

Primero vamos a la página que provee Google http://www.google.com/webmasters/+1/button/ y escogemos el tamaño del boton y el idioma. Con esto se nos generará un código para que peguemos en la cabecera de nuestra web, entre las etiquetas <head> y </head>, o al menos antes de la etiqueta <body> y otro para el botón.

Por ejemplo, para el botón en español a tamaño medio (20px) este es el código de la cabecera

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'es'}
</script>

Y este el del botón:

<g:plusone size="medium"></g:plusone>

el cual se pone en el lugar dónde queramos que aparezca.

Y quedaría algo así:

<!DOCTYPE>
<html>
<head>
<title>Página de pruebas</title>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'es'}
</script>
</head>
<body>

<h1>Esta es mi prueba de botón +1</h1>

<p>Un poquito de loren ipsum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam</p>
<g:plusone size="medium"></g:plusone>

</body>
</html>

Demo

Vamos allá. Vamos a usar una imagen que será visible a través del texto.

La Idea

h1 {
 color: white;  /* Fallback: si por lo que sea no funciona hay que darle un color al texto, no? */
 background: url() no-repeat;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

Ahí está, bien sencillo. Se establece un fondo para el elemento, se recorta y se establece que el color de relleno va a ser tranparente.

 

El Problema

Pues el gran problema es que esto solo funciona, como dijimos antes, con navegadores basados en webkit. Asi que, ¿qué ocurre si vemos la web en un navegador que no lo es?

Como puedes ver en el codigo de arriba, hemos declarado un color como color principal del texto. Este valor será invalidado por -webkit-text-fill-color en los navegadores que lo soporten, y en los que no, como tambien ignorarán -webkit-background-clip veremos la imagen realmente de fondo del texto (que estará en blanco, como definimos al principio)
Bueno, no es que sea lo mejor del mundo ¿verdad? Vamos a ver si lo podemos mejorar

 

Un “Falback” mejor

La herraienta definitiva para mejorar las degradaciones es Modernizr. Simplemente hay que incluir un pequeño Javascript en la página y añadir las clases al h1 de tu página indicando que el actual navegador es capaz de ello.

Aunque un no hay un test de esta caracteristica en Modernizr, pero por suerte hay un “hook” para ello.

<script src="modernizr-1.6.min.js"></script>
<script>
 Modernizr.addTest('backgroundclip',function(){
 var div = document.createElement('div');
 if ('backgroundClip' in div.style) return true;
 'Webkit Moz O ms Khtml'.replace(/([A-Za-z]*)/g,function(val){
 if (val+'BackgroundClip' in div.style) return true;
 });
 });
</script>

Ahora sabemos con certeza si el navegador con que estamos viendo la web soporta background-cpli o no, si lo hace, el tag h1 tendrá la clase backgroundclip, y si no, la no-backgroundclip. Así que ahora solo se aplicará el fondo si el navegador acepta background-clip.

.backgroundclip h1 {
 background: url(images/west.jpg) -100px -40px no-repeat;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}
h1 {
 color: orangered;
}

 
Ver demo
 
Fuente: CSS-tricks
 

Spritemapper es una herramienta para facilitar dicho proceso uniendo multiples imágenes en una sola y creando el CSS necesario para mostrar cada parte.

Es una Visita Virtual a L’Escala donde podeis ver 4 distintos emplazamientos.

Visita Virtual

La ventaja frente a addthis o sharethis es que no es necesario darse de alta en ningún servicio, solo subir el plugin a la carpeta wp-content/plugins y activarlo desde la administración. Por contrapartida no dispondremos de ninguna herramienta para hace seguimiento, pero eso no es un gran problema dado que todos deberiamos estar ya usando algun servicio de ese estilo, como google analytics.

Aqui os dejo el archivo en formato zip, listo para descomprimir y usar.