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 :)