7/5/14

Cómo crear una tienda online en Blogger

Recibo muchas veces la pregunta de cómo hacer una tiendita online en el blog y siempre suelo recomendar que se haga una tienda por separado. Hay muchísimas plataformas muy fáciles de usar y relativamente baratas para vender nuestros productos: Bigcartel, Toldo, Etsy, Artesanio, etc.

Lo normal es que si vendemos algo, sea más de una cosa, y también que esa cosa requiera varias fotos, una explicación, etc. Así que aunque en Blogger podríamos hacer un amago de mini-tiendita online, todo eso nos complica la vida. Recordad que en Blogger, en principio, solamente se pueden crear 20 páginas. Crear más es un bendito co**** (y os lo digo yo, que tengo muchas más... ;)

Al final, si tenemos muchos productos, subirlos, etc. va a ser un lío, y personalmente creo que es mejor hacerlo por tanto directamente en una tiendita. Ahora bien, puede haber momentos en los que quizá sí sea más cómodo hacer la tienda en Blogger. Lo recomiendo si:

  • Si tenemos muy poquitos productos (hasta 9 por ejemplo) 
  • Si los productos que vendemos, no requieren explicación o más de una foto (de modo que no haya que crear una página específica para cada uno de los productos) 
  • Si esos productos no cambian prácticamente nunca
  • Si solamente queremos tantear qué tal se venden antes de buscar plataforma de venta, etc. 

Mirad mi tiendita. Bueno, bonito, barato ;)


¿Queréis ver cómo se hace?

No es nada difícil, palabrita.

Os hago un resumen de los pasos del proceso para que lo entendáis:

     1.   Crear la tabla de la tienda para mostrar los productos
     2.   Añadir las fotos, precios y demás
     3.   Opcional: Crear la página de venta de cada producto si es necesario
     4.   Opcional: Enlazar las fotos a la página de venta de cada producto si procede
     5.   Conseguir nuestro botón de Paypal para que paguen
     6.   Opcional: Crear un botón de Paypal personalizado
     7.   Publicar la página/tiendita :)

Vamos allá:

Paso 1. Crear una tabla para mostrar nuestros productos

Lo primero es crear una tabla o cuadrícula para mostrar nuestros productos. Simplemente escribís el texto que queráis en la parte de arriba de la página de la tiendita, y luego, donde queráis que ya se muestren los productos, copiáis el código que os voy a dar, en la zona HTML. Así:


El código es este:

<table align="center" cellpading="8">
<!--pb-shop-add-on-->
<tr>
<td valign=bottom>Foto<br>Nombre<br>Precio<br></td>
<td valign=bottom>Foto<br>Nombre<br>Precio<br></td>
<td valign=bottom>Foto<br>Nombre<br>Precio<br></td>
</tr>
<tr>
<td valign=bottom>Foto<br>Nombre<br>Precio<br></td>
<td valign=bottom>Foto<br>Nombre<br>Precio<br></td>
<td valign=bottom>Foto<br>Nombre<br>Precio<br></td>
</tr>
</table>

No recomiendo más de tres columnas porque no entrarán bien en el ancho de vuestro blog. Si necesitáis una fila más hacia abajo, tenéis que pegar abajo, después de </tr> pero antes de </table> esto de nuevo:

<tr>
<td valign=bottom>Foto<br>Nombre<br>Precio<br></td>
<td valign=bottom>Foto<br>Nombre<br>Precio<br></td>
<td valign=bottom>Foto<br>Nombre<br>Precio<br></td>
</tr>

Y si por ejemplo queréis que en lugar de tres columnas os salgan dos, deberéis borrar la línea esta en cada uno de los bloques:

<td valign=bottom>Foto<br>Nombre<br>Precio<br></td>

Una vez pegado o editado de acuerdo a las filas y columnas que necesitéis, cuando cambiéis de nuevo la vista a Redactar lo veréis así más o menos:


Paso 2. Añadir las fotos, precios y demás

Una vez de que tenemos la tabla creada deberemos editar el nombre y el precio así como poner una foto. Seleccionamos donde dice foto y le damos al dibujito de la foto de nuestro editor de Blogger para subir una foto.

Nos ponemos sobre la foto y con el menú horizontal que sale le decimos tamaño Pequeño.

Nos quedará así:


Entonces seleccionáis donde dice Foto, nombre y precio y le dais a la opción de alineación al centro.

Luego borráis donde dice foto, escribís el nombre del artículo y le ponéis el precio. Y así sucesivamente:


Ajustar los espacios como veáis conveniente hasta que la tengáis lista:


Pasos 3 y 4 (opcionales). Crear la página de venta de cada producto si es necesario

Si necesitáis dar una explicación de cada producto o mostrar más fotos de cada uno, podéis crear una página individual para cada uno.

Ejemplo: crear una página para el anillo Tiffany Setting. Otra para el Tiffany Lucida. Etc.

Luego, obviamente, habrá que ocultarlas de la pestaña principal para que no salgan en el menú (diseño - páginas - editar - desmarcar las que no necesitemos), pero creadas están.

Lo que haríamos es enlazar cada foto o inlcuso el nombre del producto si queréis a la página en cuestión. Es decir, la primera foto la enlazaría a la página que he creado expresamente para el anillo Tiffany Setting y así sucesivamente (nota: cómo poner un link en una foto).

Paso 5. Conseguir nuestro botón de Paypal para que paguen

Para esto, obviamente, tenéis que tener cuenta en Paypal (OJO: en el momento en que cobráis más de 2.500 € con vuestra cuenta de Paypal, ellos mismos se encargan de pasarle la información a Hacienda, así que para trabajar con Paypal hay que hacer todo legalmente... ;).

Mi cuenta de Paypal está en inglés, así que no sé como se llaman las opciones en castellano, pero bueno, Paypal es muy intuitivo.

Para crear el botón, una vez dentro de vuestra cuenta debéis de ir a la cuarta pestañita (en inglés Merchant Services):


Una vez ahí le dais a Crear botones de pago para vuestra web o algo así (veréis el dibujito de los botones) y vais rellenando los campos que necesitáis.

Yo para el ejemplo he elegido la opción Añadir al carro de la compra (Shopping cart en la captura de pantalla), en el que la gente puede ir añadiendo productos. También hay una opción de compra directa.


Y una vez de que habéis rellenado el nombre del producto, precio, personalizado si hay diferentes opciones (imaginaos que tenéis un mismo producto en diferentes colores y tienen que elegir qué color quieren o la talla o lo que sea), el tamaño que queréis para el botón, etc. ya creáis el botón.

Os saldrá esta página:


Y ya lo único que tenéis que hacer es añadir ese código en la vista HTML justo debajo del nombre del artículo. Para hacerlo yo recomiendo usar la que yo llamo la técnica del corazón. Es decir, poner un corazón justo dónde queréis que vaya a ir luego el botón y luego ya cambiar la vista a HTML. Así no tiene pérdida dónde debéis copiar el código.

Después repetís el proceso de crear el botón en vuestra cuenta de Paypal para cada uno de los artículos de vuestra tiendita, y vais poniéndolos uno a uno debajo de los artículos correspondientes. Una vez hecho os quedará así. Voilà, tiendita terminada.


Luego deberéis estar pendientes en Paypal de si alguien os compra algo ;)

Paso 6 (opcional). Crear un botón de Paypal personalizado

Si los botoncitos de Añadir al carro no os gustan, podéis crear uno personalizado en un momento. En ese caso lo que hacéis es subir la foto del botón debajo del precio o nombre en lugar de ir al HTML para pegar el código del botón que nos da Paypal.

Una vez subidas todas las fotos de los botones os quedará así (bueno, vale, esos no quedan nada monos, pero para vuestra tiendita os esforzáis un pelín más ;)


Y ya lo único que os faltaría es enlazar cada botón personalizado a la URL de añadir al carrito, que en ese caso en lugar de ser la que hemos visto antes, sería la que sale en la pestaña que dice Email:


Así de nuevo, con cada uno de los botones personalizados.

¿Veis qué fácil?

Eso sí, lo dicho, si tenéis muchos productos o si estos cambian constantemente yo en lugar de hacer eso tendría una tiendita fuera del blog. Una en Etsy, Bigcartel o similar y enlazada desde el blog.

Mil besos y gracias por vuestros comentarios.

No os olvidéis tampoco, si queréis compartirlo, que tenéis los botoncitos para hacerlo justo aquí debajo. Ah, y ahora que estáis con Google+, también podéis darle a +1 :)


Únete a mi newsletter para recibir cada semana un resumen con trucos y recursos

76 comentarios

  1. ¡Gracias, gracias y mil veces gracias! y ya que estoy, te doy una sugerencia para otro post: Funcionamiento de Paypal, comisiones, forma de cobro... ¡Un besote!

    ResponderEliminar
  2. Muchs gracias!!! Me ha encantado!!! Cuando tenga un momento lo pondré en práctica!!! Besitosss Blanca!!1

    ResponderEliminar
  3. Muy buen post como siempre. Supongo que esto no se aplica a un blog de repostería. Me refiero a que si que puedes vender artículos de repostería (capsulas, colorantes...) pero no galletas, cupcakes...

    ResponderEliminar
    Respuestas
    1. No entiendo por qué no.

      La gente te paga, tu recibes la orden a través de Paypal, y se lo envías igual que si fueran cápsulas o colorantes....

      Eliminar
  4. Muchas gracias por el tutorial Blanca! Mi blog es de wordpress pero ya tengo alojamiento propio y puedo editar la página así que podré aprovechar los códigos. Gracias again! Tengo una duda con respecto a paypal. Cuando el producto que vendes es algo para descargar, (no quiero dar muchos detalles porque estoy trabajando en ello) como por ejemplo tus cursos, ¿de qué forma se consigue que tras pagar en paypal aparezca en la pantalla del comprador el botón de descarga, o un link? No sé si me he expresado bien y si podrás contestarme. Se sale un poco del tema de la entrada... En cualquier caso, muy agradecida.
    Besos

    ResponderEliminar
    Respuestas
    1. Hola Gracia,

      Eso lo vemos en el curso Cómo ganar dinero con tu blog ;)

      Besos,

      Blanca

      Eliminar
    2. Jajajaja! Ok, Blanca. Hice el de de Como promocionar tu blog el verano pasado y me gustó, así que igual para este verano hago el otro. En este momento ya no me "da la vida" para más!! Besos

      Eliminar
  5. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  6. Muchísimas gracias! Este post me viene genial para un antiguo blog que tengo un poco abandonado precisamente por no saber muy bien cómo colocar los productos.
    Besos :)

    ResponderEliminar
  7. Muy buen post Blanca! Yo no vendo nada pero como nunca se sabe... Por cierto, al final compré el curso Cómo Promocionar tu blog, lo estoy leyendo, a ver que tal... Un saludo, Zior (Zeta&Petra)

    ResponderEliminar
  8. ¡Muchas gracias Blanca! Este post me viene al pelo y además muy bien explicadito...
    Besos!!

    ResponderEliminar
  9. Justo el otro día estaba pensando en còmi se podría hacer, lo explicas muy bien, gracias

    ResponderEliminar
  10. Maravilloso! Un post estupendo. A lo mejor este es el comienzo de mi soñada Patty's Cake Bakery! Muchas gracias, guapa! Bss.

    ResponderEliminar
  11. Magnifico blog. Yo estoy ahora queriendo vender por pay pal pero aun no lo tengo muy claro. ¿cuanto cobran por recibir dinero?¿me lo ingresan directamente en mi cuenta o tengo que hacer un traspaso? Y por ultimo, como le digo a alguien que puede pagarme por PayPal.¿como me paga? me refiero sin en botón de compra...
    Cuantas dudas.........
    Gracias por el post blanca. Me encanta como explicas

    ResponderEliminar
  12. Este me lo apunto!! A ver si me animo a vender un poco :)

    ResponderEliminar
  13. ¡Mil gracias Blanca! me resulta super-útil y muy bien explicado. Besos

    ResponderEliminar
  14. Está genial este tutorial, me va a venir súper bien cuando saque lo que estoy preparando. Muchas gracias Blanca!

    ResponderEliminar
  15. Me ha encantado el tutorial Blanca! una pasada. Lo pienso probar en cuanto tenga un momento de tranquilidad! Muchas gracias por compartirlo con todas nosotras! Un beso! <3

    ResponderEliminar
  16. Yo uso etsy, y me gustaria poner algo asi parecido a un catálogo, ando pensando qué hacer. Gracias por tu explicación, lo haces parecer sencillo. El otro dia lei en un blog que explicaban cómo hacerla y la verdad era como leer en chino ;)

    Saludos!

    ResponderEliminar
  17. Muy interesante todo. Gracias x ayudarnos tanto.

    ResponderEliminar
  18. Muchas gracias Blanca, vaya currada de post, muy útil y muy bien explicado, espero que pronto pueda tener una tiendita!! Un saludo

    ResponderEliminar
  19. ¡Madre mía Blanca! ¡Pero cómo te lo has curradoooooooooo! No tengo palabras para agradecerte toda esta información que nos has dado.
    Muchas muchas muchas gracias!

    ResponderEliminar
  20. Holaaa! Acabo de descubrir tu blog, le he estado echando un vistazo y me quedo sin palabras!! que cantidad de información super útil! que además me viene muy bien porque estoy empezando a abrir un blog y una no sabe por donde empezar!
    Ya he rellenado y todo el formulario para la guía de PicMonkey =)
    Muchas gracias por compartir toda la info.

    Saludos!!

    ResponderEliminar
  21. Muchísimas gracias Blanca! De momento no voy a abrir ninguna tiendita en el blog, pero no lo descarto para un futuro y creo que este tutorial será muy útil. Gracias!

    ResponderEliminar
  22. Hola Blanca
    Una vez más has hecho un super tutorial!
    Me encanta!

    ResponderEliminar
  23. Muchísimas gracias Blanca! Tengo la misma duda que Gracia, o sea que me toca comprar el curso de ganar dinero :)
    besos

    ResponderEliminar
  24. HOLA!! Cómo molas!!!! Gracias a ti todo parece fácil y sencillo... y el html... eso es pan comido con tus explicaciones!! Gracias por compartir con todos tos estos tutoriales! MOLAS!!! ;D un besote!!!

    ResponderEliminar
  25. Gracias por tu generosidad, justo queremos lanzar una colección con poquitos modelos, y estábamos en el tema de una web...para empezar igual sería más interesante blogger....
    Saludos
    Leti
    Sin pereza

    ResponderEliminar
  26. Gracias por esta información. La he enlazado a uno de mis tableros en Pinterest, por si alguien por allá también resulta estar interesado en aprender esta destreza.

    ResponderEliminar
  27. Muchísimas gracias, la verdad es que me va a venir muy bien, porque quiero abrir una tienda, pero no me atrevo a hacerlo a lo grande por si no funciona, así que puede ser una forma de ver como vienen las cosas. ¡Ah!, que conste que lo de darle a +1 no es por los deberes...

    ResponderEliminar
  28. Hola blanca, me ha parecido estupendo el articulo y creo que me gustaría poder tenerlo e mi blog.
    Un beso
    Noelia

    ResponderEliminar
  29. Muchas gracias, me viene genial!! De momento no voy a hacer tienda pero creo que a la tabla le voy a dar muy buen uso como galería ;)

    ResponderEliminar
  30. Chiquito curro de post... ¡muy bueno! Gracias

    ResponderEliminar
  31. Un tutorial genial para pequeñas tiendas!! Gracias Blanca!

    ResponderEliminar
  32. Un tutorial muy útil, ¡Muchas Gracias! por escribirlo y después publicarlo para compartirlo con nosotras... Gracias por este Regalo.

    Un Abrazo ..;-)

    ResponderEliminar
  33. Mil gracias por compartir, es muy interesante, besos.

    ResponderEliminar
  34. Gracias por compartir esto, intentaré hacerlo en mi blog;Handmade By A

    ResponderEliminar
  35. Ha sido un tutorial muy muy instructivo! Ya tengo lista la tiendita de mi blog y ha salido todo a pedir de boca y a la primera! Muchísimas gracias por tu ayuda! El resultado no podría ser mejor!

    Un saludo

    Laura
    www.cocoatutoriales.blogspot.com

    ResponderEliminar
  36. Hola. He llevado a cabo tu tutorial, pero me he dado cuenta después de trastear un buen rato, que el término cellpading, le falta una "d", cellpadding, y por eso no hacía caso a lo que le modificaba. Lo digo por si a alguien le pasa lo mismo que a mí, y está un rato buscando la manera.
    Gracias, el tutorial es super instructivo.

    ResponderEliminar
  37. Hola , que medidas tienen las fotos???

    ResponderEliminar
  38. Muchísimas gracias!!! Lo declaró tabla me viene genial que hace un tiempo quería hacer una y no vi la forma.... Besicos

    ResponderEliminar
  39. Muchísimas gracias por explicarnos tan bien todo Blanca. es una gozada encontrarse con personas tan generosas que nos ayudan tanto. Nosotras andamos montando nuestra tienda online en el propio blog y nos ha surgido una duda. Habria alguna forma de incluir el stock de cada producto y que se fuera descontando automáticamente. Nos resultaria muy interesante poder incluirlo. Muchisimas gracias por adelantado. Un besazo

    ResponderEliminar
  40. Estaba buscando algo para una "fiesta" de enlaces y la verdad, todo lo que encontraba resultaba muy, pero que muy lioso. Y esto también me puede servir. He probado a poner en donde supuestamente va el precio, el nombre y enlace a otra web, y si me deja. Y así lo tengo guardado por si alguna vez necesito vender algo. 1000 Gracias desde 1000 manualidades fáciles.

    ResponderEliminar
  41. La verdad es que éste post, está muy bueno, es muy valioso, nunca pensé que se podía hacer eso con tan solo una cuenta publica de blogge, mil felicitaciones por este post.

    ResponderEliminar
  42. Me acabas se alegar el día! Muchas gracias , a ver si lo intento y no meto la pata... Pero una pregunta que lo miro todo... No hay que estar alta de autónomo o algo ? O a efectos fiscales ? Aunque la verdad es que ganar 70€ al mes como mucho no creo que sea necesario no?

    ResponderEliminar
  43. Me costó encontrar esta información, para saber cómo insertar el dichoso botón de paypal en un único post de blogger. ¡¡Muchísimas gracias por tu trabajo!! Ha sido una gran ayuda.
    Enhorabuena por tu blog ;)

    ResponderEliminar
  44. Justo lo que andaba buscando muchas gracias :D

    ResponderEliminar
  45. Hola Blanca, estoy pensando en poner una tienda en el blog, o desde otra plataforma, no se aún, pero quería saber si hacen falta algunos derechos o algo para vender tu propio producto??? Es decir, hacerlo todo legalmente como tu dices jaja ;)
    Un besito y gracias por la información.

    ResponderEliminar
    Respuestas
    1. Hola Raquel, si estas pensando en abrir una tienda te puedo recomendar este sitio: https://www.suempresa.com/su-tienda-en-linea, acercate a un asessor quien resolvera todas tus dudas a mi me resulto muy bien. Saludos.

      Eliminar
  46. Muchisimas gracias. Está muy muy bien explicado. He hecho una prueba y funciona muy bien, ahora voy a ajustarlo a mis necesidades.

    ResponderEliminar
  47. Muchas gracias, me ayudaste un monton... pense tomar mas tiempo, pero esta mas que claro

    ResponderEliminar
  48. Madre mia, parece que me hayas leido la mente en un tiempo pasadl jajaja, todas las respuestas a mis preguntas las tienes tu :) como agradecimiento puse en mi blog un boton del tuyo para que más gente pueda leerte. Seguro que les resulta todo tan util como a mi.
    Gracias!

    ResponderEliminar
  49. Hola, si algo me gusta de las tiendas online es que muchas e ellas ofrecen contacto para poder solicitar mas informacion, tal es el caso de Telefono Privalia españa en donde he consultado sobre todo tipo de precios en lo que a tecnologia se refiere

    ResponderEliminar
  50. Muy buena aportación. Muy útil para los que comienzan en este mundo del blog... Un saludo!!!

    ResponderEliminar
  51. Eres genial!!! algo que me parecía imposible de hacer y que fácil que me lo has puesto ;)

    ResponderEliminar
  52. Hola! excelente post, tengo una duda, ojalá pudieras ayudarme o darme alguna idea, quiero crear un blog que tenga tienda virtual, pero con una cesta de productos, me explico: que las personas elijan sus objetos señalados como en una lista para comprarlos al final todos juntos? como una wishlist?... gracias! :)

    ResponderEliminar
  53. Hola, a todo el mundo;
    Gracias por crear este post, me hacia falta el siguiente paso, me gustaría que la visiten, y me comenten sus opiniones, gracias. www.marsuresteshopping.blogspot.com

    ResponderEliminar
  54. Un gran post sin duda, paypal ayuda mucho a crear una tienda online ya que facilita el pago y el control de los inventarios, además existen otros widgets como Ecwid o Codeeta(que está en español) te facilita mucho la labor.

    ResponderEliminar
  55. muy bien explicado pero hay que mejorar algunas expresiones al explicarte, pero por todo lo demas muy bien explicado

    ResponderEliminar
  56. Muchas gracias buena explicación ya horita termino la primera parte de mi tienda gracias :)

    ResponderEliminar
  57. ¡Bendiciones!

    Muchas gracias por el post. Hace tiempo abrí una tienda online pero por problemas la tuve que dejar. Espero que tu info me sea de mucha utilidad a la hora de comenzar nuevamente y también aprovecho para comentarles a todos que sería bueno saber qué son el up selling y el cross selling para mejorar las ventas.

    ¡Bendiciones y saludos!

    ResponderEliminar
  58. elrincondelavaloracion.blogspot.com un blog donde se valora muchas cosas, si tienes duda sobre algo metase en ela blog y mandenos un email.
    Blanca me ayudas a promocionarme y yo te promociono?

    ResponderEliminar
  59. Hola. Cómo están?Es un blog interesante y sobre todo me gusta cuando habla acerca de los Cambios tecnológicos. Saludos.

    ResponderEliminar
  60. Buen día... Excelente información... Y si en vez de imágenes necesito colocar un audio... Para vender producciones, cosas relacionadas con la edición de audio... Salu2...

    ResponderEliminar
  61. Me parece muy interesante, hemos abierto hace poco nuestro negocio de outsorcing comercial así que intentar vendernos por internet de momentos es la mejor elección y a gasto casi cero. Gracias por la ayuda Blanca

    ResponderEliminar
  62. Hola Blanca, me parece que lo has explicado genial, pero mi duda es: ¿cómo finalizo la compra del carrito? Me refiero a que la gente va añadiendo productos al carrito y claro, después quiero crear una página donde aparezcan los productos que el cliente ha seleccionado y pueda darle a un botón de finalizar compra donde se incluya la suma de los importes mas los gastos de envío... Muchas gracias por todo!

    ResponderEliminar
  63. excelente informacion!!!! sabes de algun software punto de venta para poder utilizar en mi comercio?

    ResponderEliminar
  64. Hola Blanca,acabo de crear la tienda online,aun no la tengo operativa,una preguntilla,como puedo poner el stock del articulo?
    Enhorabuena por el articulo.
    Muchas gracias
    La Nube Tejedora

    ResponderEliminar
  65. Muy buena tu ayuda con el código html y todo. En lo personal me parece algo rosita jajaja pero con los códigos html es mas sencillo luego modificar el diseño de colores a gusto. Me ha sido muy útil para intentar poner mi propia tienda online y empezar el emprendimiento que tenemos con mis hermanos.
    Gracias por tu ayuda.

    ResponderEliminar
  66. Wow, pues a mi me ha encantado, hasta el momento tenía la tienda por facebook, pero volví a blogger con la idea de llegar a más gente (hago cosas a crochet), tengo en etsy algún producto digital, pero no me termina de llamar tanta comisión. Estuve mirando tictail, pero no sé... casi que la prefiero integrada en el blog, a ver como me apaño con este super tutorial. Muchas gracias!

    ResponderEliminar

© Personalización de Blogs. Diseño: Eve y Blanca.