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 oídos a otras ideas externas para ir lo más rápido posible en el desarrollo de nuestra idea. Esto suele ser un error, porque el mundo ha cambiado mucho, y si nunca has oído sobre el “Business Model Plan“, te recomiendo que te leas este artículo 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 tecnológica, ya queinstalar un plugin en wordpress para vender os supone 0€. Lo difícil es acertar con el perfil de público 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 artículo vamos a ver como con una plataforma gratuita, Blogger, podemos montar una tienda online con prácticamente características de una tienda profesional. No tendrás muchas opciones, pero lo importante es que si empiezas a vender, ya te plantees irte a una solución profesional.

Plantilla Blogger Store v2 Vamos a ver de manera rápida esta plantilla, que nos convierte un blog de Blogger en una tienda online con unas buenas características. Esta plantilla la he montado en una en una tienda real que he creado, para que puedas ver su funcionamiento. Normalmente cuando leemos un manual o un artículo de internet, suele pasar que a veces no funciona alguna cosa, o no encontramos el fichero que falta, con lo que ese artículo tan maravilloso al final no nos vale para nada. En este caso no va a ser así, ya que si compráis cualquier cosa en la tienda online os llegará a casa sin problemas, además es una prueba de tienda online para el blog de mi suegra.

Primer paso El desarrollo de esta plantilla se lo debemos a JavaTemplates, que durante un tiempo ha estado caída la web y ahora sale como web maliciosa. Y luego dar las gracias a olobloggerpor sus maravillosas modificaciones. Aquí recopilo los temas más 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 tenéis que descargar la plantilla del último artículo de esta serie, en elcapítulo III.

Instalación Accedemos a nuestro escritorio Blogger, nos vamos al apartado Plantilla y le damos al botón “Crear copia de seguridad/Restablecer“:

Una vez que pinchamos ahí nos sale la siguiente imagen:

Si tenemos otra plantilla modificada anteriormente, creamos una copia de seguridad en nuestro ordenador en “Descargar plantilla completa”. Una vez hecho esto seleccionamos el archivo XML que nos hemos descargado al suscribirnos a la lista de correo. Con esto ya tenemos instalado la plantilla y podemos ver como queda.

Configuración básica Introduciremos un código para que cuando creemos una nueva entrada en blogger, sea un producto en nuestra tienda online. Nos vamos a “Configuración” y le damos a “Entradas y comentarios“. Si no tenemos activa la Plantilla de las entradas, la activamos como vemos en la imágen:

E introducimos el siguiente código: <select class="item_size"> Pequeña(S) Mediana(M) Grande(L) Extra Grande(XL) Con el <select class=”item_size”> hemos añadido los tamaños de una camiseta, pero podríamos añadir otro tipo de tamaño. Si quisiéramos una alternativa adicional como por ejemplo el color, tendríamos que añadir otra clase select. Solo sería necesario crear otro select.

Por

ejemplo,

después

del podríamos

poner

otro <select

class”item_color”> con la misma estructura y ya tendríamos otra opción a escoger. Y por último marcamos en “Mostrar un máximo de …“, un número múltiplo de cuatro para que en la plantilla de la tienda los artículos cuadren bien y no queden huecos. Nos faltaría configurar el Idioma y formato, y la zona horaria, que a veces se olvidan estas cosas. Guardamos configuración y ya casi lo tenemos.

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 número que nos aparece detrás, son los productos que nos aparecen en el slider. Si tenemos menos es mejor cambiarlos a un 2 en vez del 9.

Si en algún momento no ponemos imagen al producto, la plantilla nos permite definir una imagen genérica. Sólo tenemos que buscar el texto: “product_image[0] = “/noimage.png” y cambiar la imágen que viene por defecto a una que nosotros queramos. Si nos atrevemos a cambiar los parámetros del slider buscaremos “carouFredSel” y ahí tendremos los parámetros del slider. Combinando los valores true/false en las tres opciones “circular“, “infinite” y “auto“, podremos tener distintas maneras de mostrar las imágenes.

Forma de pago y divisa El código que nos permite tener un carrito de la compra es SimpleCart. En este punto tendremos que configurar nuestra cuenta de paypal y la moneda en la que queremos que nos paguen. Tenemos que buscar este código: <script type='text/javascript'> //
simpleCart.currency = EUR; simpleCart.cartHeaders = ['name','thumb_image','Quantity_input','increment', 'decrement','Total']; //]]> Cada una de las opciones tiene las siguientes opciones: 

simpleCart.email: Aquí pones tu dirección de correo electrónico de paypal.



simpleCart.checkoutTo: Aquí dejaremos Paypal como método de pago, ya que en España todavía no se soporta GoogleCheckout. En el caso de que en tu país se soporte



puedes utilizar este método de pago. simpleCart.currency: La divisa en la que queremos que nos paguen. Tenemos una



lista de opciones, pero para Europa dejaremos el Euro (EUR). simpleCart.cartHeaders: No es necesario cambiar nada de esta opción.

Las divistas que se pueden utilizar son las siguientes: Baht Thailandés=THBCorona Checa=CZKCorona Danesa=DKKCorona Noruega=NOKCorona Sueca=SEKDólar Australiano=AUDDólar Canadiense=CADDólar Hong

Kong=HKDDólar

Neozelandés=NZDDólar Singapur=SGD

Dólar USA=USDEuro=EURFlorín Húngaro=HUFFranco suizo=CHFLibra Esterlina=GBPNuevo

Sheqel

Israelí=ILSPeso Mexicano=MXNRupia Indonesia=IDRYen Japonés=JPYZloty Polaco=PLN

Tu primer producto Como ejemplo para el primer producto vamos a crear un producto que se llame “Camiseta” dándole todas las posibilidades que admite este sistema, luego simplemente tenéis que ajustarlo a vuestras necesidades. Al crear un nuevo producto entra en funcionamiento la Plantilla de entradas, que luego podemos configurar con nuestro producto estándar para no tener que estar borrando y poniendo las partes más 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 código, pero nosotros solo nos quedamos con la primera dirección, que es la imagen original que subimos. El título del post será el nombre del producto y por lo tanto no es recomendable usar nombres largos para que luego en la página inicial no se vean mal. Insertamos el siguiente código: <select class="item_size"> Pequeña(S) Mediana(M) Grande(L) Extra Grande(XL) <select class="item_color"> Roja Verde Amarilla Con este código ya podríamos publicarlo y ver nuestro primer producto. Si no necesitásemos las selecciones de talla, color o cualquier otra variación, simplemente las quitaríamos y dejaríamos lo que necesitásemos. Una vez que tuviéramos 8 productos, cambiaríamos el valor del slider y veríamos como funciona. Cuanto ya tengamos muchos productos podemos incrementar ese número y ver su funcionamiento. Este ha sido el funcionamiento básico para esta plantilla, y sobre todo que en poco tiempo podamos tener una tienda online sencilla y que funcione. Esta plantilla tiene más modificaciones que hacerle, así que os pido que me dejéis comentarios para ver si estáis interesados que haga otro artículo 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 publicación que tenía antes. En este segundo artículo vamos a ver más características de la tienda online con blogspot que habíamos creado y tener en muy poco tiempo una tienda online casi profesional. Las limitaciones de la tienda online serán: 

Imposibilidad de gestionar un stock.



Desconocer la cantidad que vendemos de un golpe de vista.



La gestión de la facturación se hace en paypal. Con estas limitaciones, para un volumen bajo de ventas esta tienda online será perfecta, pero cuando nuestro volumen crezca necesitaremos sistemas más profesionales. Sabiendo las limitaciones vamos a ver más características que tiene nuestra tienda online para que tenga un mejor aspecto y podamos aplicar algunas personalizaciones.

Personalizar los menús Todos los menú que vienen en la plantilla no tienen configurado el enlace de destino y para poder crear submenus necesitas modificar unos datos de la estructura. En total hay que modificar tres referencias. Tenemos que buscar la primera referencia por id=’top-nav’. Hay que localizar esta referencia y cambiar los enlaces vacíos (#) por los que os interesen más. Tenemos que cambiar Home, Category, Contact y About. Debajo de estos enlaces podremos poner los submenus que queramos.

Vemos en la imágen como la opción de Category (en la plantilla que tendrás vendrá otra cosa) tiene un submenú de tres ocpiones: Category 1, Category 2 y Category 3. Podemos añadir los menús que sean necesarios creando una lista anidada y asignandole la clase sub-menú. Al final nos quedaría algo así:

Cambiando las opciones pertinentes también podemos enlazarlas a páginas internas de Blogger, y tendremos que poner /p/loquesea.html. En el menú principal (el que está en rojo), tenemos que buscar class=’nav’, y aquí también para crear los submenús los crearemos anidando nuevas listas, pero no será necesario aplicar ninguna clase. Una vez modificado nos quedaría 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. Quedaría algo así:

Cambiar colores y fuentes Esta plantilla que estamos utilizando permite cambiar desde el diseñador de Blogspot en la pestaña avanzado, los siguientes elementos: 

Color y fondo laterales.



Fuente y color de texto.



Color y descripción del blog.



Color de enlaces.



Color de fondo del menú.



Color de fondo del carro. En la siguiente imagen vemos donde podemos cambiarlo:

Aquí tengo algún 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 sección diseño y que está vacío. En este hueco podemos poner una imagen de tamaño hasta 468x60px. Podemos poner un banner publicitario o podemos incluir un logo de la tienda, o cualquier cosa que nos parezca. Nos vamos a Diseño y editamos el bloque de la derecha HTML/Javascript y añadimos algo como esto:


href='http://tunegocioenlanube.net' rel="nofollow">
src='http://2.bp.blogspot.com/-1iS6aSaITe4/UfEN9yxrhWI/AAAAAAAAB5w/mokCZEAsBo/s1600/logo+tunegocio+para+blogspot.png' title='TuNegocioEnLaNube'/>

También eliminamos un gadget que no va a ser necesario, y es el Blog Archive. Como la plantilla está pensada para tienda online, la parte del archivo no va a ser necesaria por lo que podemos eliminarla.

Esta plantilla para Blogger tiene muchas posibilidades y todavía las estamos mirando ya que se vuelve un poco lenta, me da algunos problemas y por ahora no me convence del todo.

Cuando la tengamos totalmente testada y le añadamos unas funcionalidades extras os comunicaremos en la lista de correo donde podréis descargarla.

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 opción, pero como he hablado de la plantilla que necesitas para crear una tienda online con Blogger, pues voy a terminar el tema con este artículo. Antes de leer este artículo te recomiendo los anteriores que escribí sobre tiendas online: 

Cuanto cuesta una tienda online.



Como crear una tienda online con blogger.



Crear una tienda online en blogspot (II). Después de los dos artículos anteriores, creo que debería cerrar la serie con las preguntas que me habéis planteado y las dudas que tenéis, por lo que he escrito este artículo con el siguiente objetivo:



Agrupar todas las preguntas y sugerencias para la plantilla



Tener actualizada la plantilla en un sitio único. Aunque puede llegar a ser complicado montar la tienda online (puedes hablar conmigo si lo necesitas), realmente son unos pequeños pasos para tenerla lista.

Mejoras en la Plantilla No

se

si

te

acordarás

pero

la

tienda

montada

quedaba

de

la

siguiente

manera: http://tiendaonlineconblogger.blogspot.com.es/ Con esto, solo sería necesario añadir los productos y esperar las ventas. Lo difícil será saber aquellos productos que interesan a la gente, para eso este artículo de nichos de mercado te interesa. Recuerda también que es importante conocer tu modelo de negocio para que la tienda sea sostenible en el tiempo.

Cómo incluir gastos de envío En la plantilla no lo especifica como hacerlo, pero se puede gracias a SimpleCart. Para poder definir los gastos de envío hay que añadir el siguiente código en la parte de la plantilla donde va “Simple Cart Setting“, de la siguiente manera:

<script type='text/javascript'> //>>>>>>>>>>>>>>>>>>>>>>>*/ simpleCart.email = '[email protected]'; simpleCart.checkoutTo = PayPal; simpleCart.currency = EUR; simpleCart.cartHeaders = ['name','thumb_image','Quantity_input','increment', 'decrement','Total']; AQUÍ AÑADIREMOS EL CÓDIGO //]]>

Tenemos que añadir el siguiente código en la línea que he puesto en verde, según el sistema que queramos de gastos de envío:

Una cantidad fija para todo el pedido simpleCart.shippingFlatRate = 15.00;

Los gastos de envío siempre serán 15€, hagamos el pedido que sea.

Un porcentaje sobre el total simpleCart.shippingTotalRate = 0.06;

Los gastos de envío serán un porcentaje sobre el total del carrito. Para un carrito de 100€, gastos (6% de 100€) = 6€.

Una cantidad fija por cada producto en el carrito simpleCart.shippingQuantityRate = 4.00;

Los gastos de envío serán fijos para cada producto. 3 productos en el carrito, gatos (4€ x 3 productos) = 12€.

También podemos utilizar combinaciones de los códigos anteriores para que se sumen en el carrito. Por ejemplo:

Coste fijo por pedido más un porcentaje sobre el importe total simpleCart.shippingFlatRate = 9.00; simpleCart.shippingTotalRate = 0.06;

Los gastos de envío serán: 9€ + 6€ (6% de 100€) = 15€.

Coste fijo por producto más un porcentaje sobre el importe total simpleCart.shippingQuantityRate = 4.00; simpleCart.shippingTotalRate = 0.06;

Los gastos de envío serán: 12€ (4€ x 3 productos) + 6€ (6% de 100€) = 18€.

Coste fijo solo para ciertos productos También podemos incluir una cantidad extra en los gastos de envío para un producto en concreto. Esto tenemos que hacerlo en la descripción del producto, que vimos como se creaba la tienda online con blogger. Tenemos que insertar un input no visible con la clase item_shipping. Tendríamos que añadir el siguiente código:



Los gastos de envío serían: 12€ (4€ x 3 productos) + 6€ (6% de 100€) + 6€ (cuando uno de los tres es este) = 24€.

Coste por producto según tallas/tamaños En este caso lo que haremos será usar una función, que tendremos que construir de manera personalizada. Por ejemplo como vimos en la construcción de un producto con distintas tallas (S, M, L y XL) usando los value de nuestro select, anidaremos condiciones con estos valores y multiplicaremos el coste fijo según la talla, por la cantidad de unidades pedidas. El código es el siguiente:

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; } }

Podrás observar como el último else está multiplicado por 0, esto es para los casos en que no existiera talla, por lo que sería un sustituto del coste fijo por artículo que podíamos 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 irán sumando por todos los conceptos. Ten cuidado como las combinas para luego no llevarte sorpresas en los gastos de envío.

Preguntas A continuación te listo todas las preguntas que me han realizado sobre la plantilla, y las respuestas que he dado. También iré poniendo las mejoras que he añadido a la plantilla. Para finalizar podrás descargarte la plantilla realizando una acción social.

Pregunta 1 – ¿Hay alguna forma de modificar los colores del banner de tu plantilla y del background? En esta plantilla puedes modificar algunas cosas, pero si conoces HTML seguro que podrás cambiar todo lo que quieras.

Pregunta 2 – Se puede cambiar la fuente de la letra siempre modificandola a partir de tu plantilla en html? No lo he probado, pero supongo que si se puede. Es conocer algo de HTML para saber donde hay que tocar.

Pregunta 3 – Quisiera darle otro aspecto estético sin que cambie la característica del portal tipo tienda online de tu plantilla. Para cambiar el aspecto estético de la plantilla como te he dicho antes, necesitas saber HTML y CSS para conseguir lo que quieres.

Pregunta 4 – No me actualiza los precios cuando añado precios al carrito. Me pone la cantidad de artículos pero se queda a 0. ¿Qué pasa? En la plantilla actual seguramente no encontrarás estos problemas.

Pregunta 5 – ¿Se puede tener algún control de stock para no vender mas artículos de los que tenemos? La plantilla no lo soporta..

Pregunta 6 – Donde tengo que poner el precio de los artículos, solo lo puse como texto en la entrada pero no me aparecen en ningún sitio. Algo no habrás hecho bien, ya que el texto de la entrada indica el precio y ese debe ir contabilizado al carrito.

Pregunta 7 – No encuentro donde debo configurar los gastos de envío. Lo tienes explicado al principio. Espero que esto resuelva tu duda.

Pregunta 8 – ¿Me podrías enviar una copia del código del artículo de la manga pastelera? El código lo tienes a continuación:

Manga pastelera con 6 boquillas con la que podrás realizar diversos dibujos.
TEXTO DESCRIPTIVO DEL PRODUCTO

<span class="item_price">6€

Pregunta 9 – Me sale este error: Content is not allowed in prolog Esto ocurre porque no se ha subido la plantilla adecuadamente. Descomprime el ZIP y sube el archivo XML sin editarlo ni nada. Así no te aparecerá este error.

Pregunta 10 – El tema de los gastos de envio en simplecart, ¿sabes alguna forma que cuando se hacen compras superiores a x euros los gastos de envio sea 0? Esta plantilla no permite esa opción.

Pregunta 11 – Cuando selecciono un color o tamaño no sale el color o tamaño del item en la descripción de la factura de PayPal Esta plantilla no permite esa opción. En paypal llega un pago global y ahí no se puede desglosar por producto.

Pregunta 12 – Cuando añades varios articulos al carrito, al pulsar en realizar pedido y llegar a la ventana de PayPal, no aparecen todos los articulos en la lista. Esto ocurre al pedir mas de 8 articulos, si pido menos, no hay problema. En esta plantilla creo que se ha solucionado el problema. No lo he probado de forma precisa pero es cuestión de hacer pruebas.

Pregunta 13 – El caso es que ya tenemos un blog funcionando, en blogger, y nos gustaría añadirle la posibilidad de vender online. Con tu plantilla, si no entiendo mal, podemos crear la tienda online en blogger pero ¿habrá alguna manera de enlazarla con el blog existente? o a la inversa? ¿se puede enlazar la tienda al blog? Esta plantilla es solo de tienda online, por lo que si quieres enlazarla con un blog existente, entonces tendrás que crear enlaces de tu blog a la tienda online.

Pregunta 14 – He creado una página: quienes somos, para enlazarlo al menú página de la tienda. Quiero desactivar la plantilla de entradas en esta entrada, pero no sé como hacerlo. En vez de crear una entrada, crea una página y enlázala ahí, seguramente la plantilla de entradas desaparecerá.

NOTA: Los archivos de la plantilla están alojados en google code que pronto dejará de tener soporte, con lo que hay que buscar otro lugar, y además desde hace tiempo que no toco la plantilla por lo que los comentarios están cerrados y la información que tienes aquí es la que hay.

¡IMPORTANTE! Si quieres descargarte la plantilla solo tienes que darle a algunos de los botones a continuación y entonces aparecerá el enlace de descarga. ¡Disfruta!

Para saber mas: http://tunegocioenlanube.net/blogger-store/#ixzz4DMk60ozt Follow us: @luismidelgado on Twitter