Como Crear Una Tienda Online Con Blogger
Como Crear Una Tienda Online Con Blogger
Como Crear Una Tienda Online Con Blogger
Cuando tenemos una gran idea, y queremos desarrollarla en un producto para que todo el
mundo nos lo compre, no nos damos cuenta que para que tenga xito, primero necesitamos
que nuestro cliente nos conozca y acertemos con aquello que realmente necesita y est
dispuesto a pagar por ello. Estamos acostumbrados a desarrollar un Plan de Negocio y
seguir un camino establecido en todo este proceso. As que cerramos nuestros ojos y odos a
otras ideas externas para ir lo ms rpido posible en el desarrollo de nuestra idea. Esto suele
ser un error, porque el mundo ha cambiado mucho, y si nunca has odo sobre el Business
Model Plan, te recomiendo que te leas este artculo que escrib: Pinta y colorea tu Lienzo de
Modelo de Negocio.
Si la idea que queremos desarrollar tiene que ver con crear una tienda online, primero tener
en cuenta que una tienda online no es barata, y no por la parte tecnolgica, ya queinstalar un
plugin en wordpress para vender os supone 0. Lo difcil es acertar con el perfil de pblico al
que te diriges y conseguir visitas para que vean tus productos y alguien quiera
comprarlos. Montar un blog para tu tienda online creo que es una buena alternativa para
empezar y as analizar si las visitas que llegan les interesa el tema del que tratas.
En este artculo vamos a ver como con una plataforma gratuita, Blogger, podemos montar una
tienda online con prcticamente caractersticas de una tienda profesional. No tendrs muchas
opciones, pero lo importante es que si empiezas a vender, ya te plantees irte a una solucin
profesional.
Primer paso
El desarrollo de esta plantilla se lo debemos a JavaTemplates, que durante un tiempo ha
estado cada la web y ahora sale como web maliciosa. Y luego dar las gracias a olobloggerpor
sus maravillosas modificaciones. Aqu recopilo los temas ms importantes para que en menos
de 1 hora tengas funcionando tu tienda online.
Tendremos que obtener el archivo XML (TiendaBlogger.xml) para instalarlo en blogger. Para
esto solo tenis que descargar la plantilla del ltimo artculo de esta serie, en elcaptulo III.
Instalacin
Accedemos a nuestro escritorio Blogger, nos vamos al apartado Plantilla y le damos al botn
Crear copia de seguridad/Restablecer:
Configuracin bsica
Introduciremos un cdigo para que cuando creemos una nueva entrada en blogger, sea un
producto en nuestra tienda online. Nos vamos a Configuracin y le damos a Entradas y
comentarios. Si no tenemos activa la Plantilla de las entradas, la activamos como vemos en
la imgen:
href="url_imagen_producto"><img
border="0"
src="url_imagen_producto" /></a>
<span class="item_price">00.00</span>
</div>
<select class="item_size">
<option value="S">Pequea(S)</option>
<option value="M">Mediana(M)</option>
<option value="L">Grande(L)</option>
<option value="XL">Extra Grande(XL)</option>
</select>
<div class="item_Description">
class="item_thumb"
Por
ejemplo,
despus
poner
otro <select
El Slider
El slider es la parte superior de la plantilla donde se muestran los productos nuevos que se
van incorporando y que tiene un efecto deslizante. Al principio no tendremos productos con lo
que lo modificaremos para que se vea bien. En Plantilla -> Editar HTML buscamos el texto
product_image_number.
El nmero que nos aparece detrs, son los productos que nos aparecen en el slider. Si
tenemos menos es mejor cambiarlos a un 2 en vez del 9.
Si en algn momento no ponemos imagen al producto, la plantilla nos permite definir una
imagen genrica. Slo tenemos que buscar el texto: product_image[0] = /noimage.png y
cambiar la imgen que viene por defecto a una que nosotros queramos.
Si nos atrevemos a cambiar los parmetros del slider buscaremos carouFredSel y ah
tendremos los parmetros del slider. Combinando los valores true/false en las tres opciones
circular, infinite y auto, podremos tener distintas maneras de mostrar las imgenes.
simpleCart.currency = EUR;
simpleCart.cartHeaders = ['name','thumb_image','Quantity_input','increment',
'decrement','Total'];
//]]>
</script>
Cada una de las opciones tiene las siguientes opciones:
Kong=HKDDlar
Neozelands=NZDDlar
Singapur=SGD
Dlar
USA=USDEuro=EURFlorn
Hngaro=HUFFranco
suizo=CHFLibra
Esterlina=GBPNuevo
Sheqel
Israel=ILSPeso
Mexicano=MXNRupia
Indonesia=IDRYen
Japons=JPYZloty
Polaco=PLN
Tu primer producto
Como ejemplo para el primer producto vamos a crear un producto que se llame Camiseta
dndole todas las posibilidades que admite este sistema, luego simplemente tenis que
ajustarlo a vuestras necesidades.
Al crear un nuevo producto entra en funcionamiento la Plantilla de entradas, que luego
podemos configurar con nuestro producto estndar para no tener que estar borrando y
poniendo las partes ms usadas. La imagen a insertar, es recomendable que sea cuadrada y
sobre todo mayor de 150px. Al subir la imagen a blogger, este nos mete mucho cdigo, pero
nosotros solo nos quedamos con la primera direccin, que es la imagen original que subimos.
El ttulo del post ser el nombre del producto y por lo tanto no es recomendable usar nombres
largos para que luego en la pgina inicial no se vean mal. Insertamos el siguiente cdigo:
<div>
<a href="url_imagen_producto"><img border="0" src="http://1.bp.blogspot.com/PEN827h8PqA/UbCiSnnkVKI/AAAAAAAAB4o/JjzoV56YxGk/s1600/CamisetaBlanca.jpg" /></a>
<span>20</span>
</div>
<select class="item_size">
<option value="S">Pequea(S)</option>
<option value="M">Mediana(M)</option>
<option value="L">Grande(L)</option>
<option value="XL">Extra Grande(XL)</option>
</select>
<select class="item_color">
<option value="R">Roja</option>
<option value="V">Verde</option>
<option value="A">Amarilla</option>
</select>
<div>
Descripcin del producto
</div>
Con este cdigo ya podramos publicarlo y ver nuestro primer producto. Si no necesitsemos
las selecciones de talla, color o cualquier otra variacin, simplemente las quitaramos y
dejaramos lo que necesitsemos. Una vez que tuviramos 8 productos, cambiaramos el
valor del slider y veramos como funciona. Cuanto ya tengamos muchos productos podemos
incrementar ese nmero y ver su funcionamiento.
Este ha sido el funcionamiento bsico para esta plantilla, y sobre todo que en poco tiempo
podamos tener una tienda online sencilla y que funcione.
Esta plantilla tiene ms modificaciones que hacerle, as que os pido que me dejis
comentarios para ver si estis interesados que haga otro artculo sobre esta plantilla
El mes pasado hablamos de como crear una tienda online con blogger (blogspot) y de que
necesitabas un Bussines Model Canvas para tu proyecto en la nube. La plantilla de la tienda
online la puedes conseguir, si te suscribes a la lista de correo.
Durante este tiempo he escrito poco ya que he estado desarrollando varios proyectos y
trabajos con clientes, que no me han dejado mucho tiempo libre. Espero poder retomar de
nuevo el ritmo de publicacin que tena antes.
En este segundo artculo vamos a ver ms caractersticas de la tienda online con blogspot que
habamos creado y tener en muy poco tiempo una tienda online casi profesional.
Las limitaciones de la tienda online sern:
Vemos en la imgen como la opcin de Category (en la plantilla que tendrs vendr otra cosa)
tiene un submen de tres ocpiones: Category 1, Category 2 y Category 3. Podemos aadir los
mens que sean necesarios creando una lista anidada y asignandole la clase sub-men.
Al final nos quedara algo as:
El ltimo men que enlaza a redes sociales (parte superior derecha), tienes que encontrarlo
por id=top_social. Una vez que localizamos estos enlaces ponemos nuestras redes sociales.
Quedara algo as:
Color de enlaces.
Aqu tengo algn problema ya que no me permite cambiar colores. Espero que a vosotros s.
Banner/logo
Existe una parte superior que est accesible como gadget que podemos acceder desde la
seccin diseo y que est vaco. En este hueco podemos poner una imagen de tamao hasta
468x60px. Podemos poner un banner publicitario o podemos incluir un logo de la tienda, o
cualquier cosa que nos parezca. Nos vamos a Diseo y editamos el bloque de la derecha
HTML/Javascript y aadimos algo como esto:
<a
href='http://tunegocioenlanube.net'><img
src='http://2.bp.blogspot.com/-1iS6aSaITe4/UfEN9yxrhWI/AAAAAAAAB5w/mokCZEAsBo/s1600/logo+tunegocio+para+blogspot.png'
title='TuNegocioEnLaNube'/></a>
Esta plantilla para Blogger tiene muchas posibilidades y todava las estamos mirando ya que
se vuelve un poco lenta, me da algunos problemas y por ahora no me convence del todo.
En este blog hemos hablado algunas veces de como crear una tienda online, y de los
diferentes pasos que necesitas para llegar a buen puerto con tu proyecto.
Una posibilidad a esto es crear una tienda online en Blogger, no creo que sea la mejor
opcin, pero como he hablado de la plantilla que necesitas para crear una tienda online con
Blogger, pues voy a terminar el tema con este artculo.
Antes de leer este artculo te recomiendo los anteriores que escrib sobre tiendas online:
Mejoras en la Plantilla
No
se
si
te
acordars
pero
la
tienda
montada
quedaba
de
la
siguiente
manera: http://tiendaonlineconblogger.blogspot.com.es/
Con esto, solo sera necesario aadir los productos y esperar las ventas.
Lo difcil ser saber aquellos productos que interesan a la gente, para eso este artculo
de nichos de mercado te interesa.
Recuerda tambin que es importante conocer tu modelo de negocio para que la tienda sea
sostenible en el tiempo.
<script type='text/javascript'>
//<![CDATA[
/* SIMPLE CART SETTING
>>>>>>>>>>>>>>>>>>>>>>>>*/
simpleCart.email = '[email protected]';
simpleCart.checkoutTo = PayPal;
simpleCart.currency = EUR;
simpleCart.cartHeaders
=
['name','thumb_image','Quantity_input','increment', 'decrement','Total'];
AQU AADIREMOS EL CDIGO
//]]>
</script>
Tenemos que aadir el siguiente cdigo en la lnea que he puesto en verde, segn el sistema
que queramos de gastos de envo:
Los gastos de envo siempre sern 15, hagamos el pedido que sea.
Los gastos de envo sern un porcentaje sobre el total del carrito. Para un carrito de 100,
gastos (6% de 100) = 6.
Los gastos de envo sern fijos para cada producto. 3 productos en el carrito, gatos (4 x 3
productos) = 12.
Tambin podemos utilizar combinaciones de los cdigos anteriores para que se sumen en el
carrito. Por ejemplo:
CartItem.prototype.shipping=function(){
if(this.size){
if( this.size == 'S' ){
return this.quantity*1.00;
} else if( this.size == 'M') {
return this.quantity*2.00;
} else if( this.size == 'L') {
return this.quantity*3.00;
} else {
return this.quantity*4.00;
}
} else {
return this.quantity*0.00;
}
}
Podrs observar como el ltimo else est multiplicado por 0, esto es para los casos en que no
existiera talla, por lo que sera un sustituto del coste fijo por artculo que podamos generar
con shippingQuantityRate.
Otra variante que puedes implementar para cargar gastos fijos dependiendo del importe total:
simpleCart.shipping = function(){
if (simpleCart.total){
if ( simpleCart.total < 10 ){
return 4;
} else if ( simpleCart.total < 25){
return 4.50;
} else if (simpleCart.total < 100){
return 8;
} else {return 10;} } }
Recuerda que todas las variantes que hemos visto son ACUMULATIVAS, y que todas las
que pongas se irn sumando por todos los conceptos. Ten cuidado como las combinas para
luego no llevarte sorpresas en los gastos de envo.
Preguntas
A continuacin te listo todas las preguntas que me han realizado sobre la plantilla, y las
respuestas que he dado.
Tambin ir poniendo las mejoras que he aadido a la plantilla.
Para finalizar podrs descargarte la plantilla realizando una accin social.
<div class="item_image">
<a href="http://2.bp.blogspot.com/-PxmbcPyu8WI/UaBbitOjNI/AAAAAAAAB4E/pW7DUXnkk-k/s320/DSCF0343.JPG"><img border="0"
class="item_thumb" src="http://2.bp.blogspot.com/-PxmbcPyu8WI/UaBbitOjNI/AAAAAAAAB4E/pW7DUXnkk-k/s320/DSCF0343.JPG" /></a>
</div>
<div class="item_Description">
<div style="text-align: justify;">
Manga pastelera con 6 boquillas con la que podrs realizar diversos
dibujos.
<br />
TEXTO DESCRIPTIVO DEL PRODUCTO
<br />
<a href="http://4.bp.blogspot.com/-DeMRGMst-N4/UaSYNoUXdI/AAAAAAAAB4U/3PPslScFZlU/s1600/568599398_272.jpg"
imageanchor="1"><img border="0" src="http://4.bp.blogspot.com/-DeMRGMstN4/Ua-SYNoUXdI/AAAAAAAAB4U/3PPslScFZlU/s320/568599398_272.jpg" /></a>
<a href="http://2.bp.blogspot.com/-PxmbcPyu8WI/UaBbitOjNI/AAAAAAAAB4E/pW7DUXnkk-k/s1600/DSCF0343.JPG" imageanchor="1"><img
border="0" src="http://2.bp.blogspot.com/-PxmbcPyu8WI/UaBbitOjNI/AAAAAAAAB4E/pW7DUXnkk-k/s320/DSCF0343.JPG" /></a>
</div>
</div>
<span class="item_price">6</span>
NOTA:
Los archivos de la plantilla estn alojados en google code que pronto dejar de tener soporte,
con lo que hay que buscar otro lugar, y adems desde hace tiempo que no toco la plantilla por
lo que los comentarios estn cerrados y la informacin que tienes aqu es la que hay.
IMPORTANTE!
Si quieres descargarte la plantilla solo tienes que darle a algunos de los botones a
continuacin y entonces aparecer el enlace de descarga.
Disfruta!
Para
saber
mas: http://tunegocioenlanube.net/blogger-store/#ixzz4DMk60ozt
Follow us: @luismidelgado on Twitter