Dentro de esta guía vamos a ver cómo poder realizar un sitio web e-commerce a través de Framework360.
Primero es oportuno distinguir si queremos crear un sitio web e-commerce con un solo producto o con múltiples productos. En el primer caso, es decir, si quisiéramos vender un solo producto, nos bastará ir en la opción Checkout del menú principal de Framework360, configurar el checkout e insertar manualmente nuestro producto; de esto nos hemos ocupado en una guía específica que podrás consultar clicando aquí.
Dentro de esta guía, en cambio, nos ocuparemos de cómo realizar un sito web e-commerce para la venta de múltiples productos.
Paso 1: Instalemos el plugin Ecommerce
Primero debemos instalar el plugin Ecommerce, para hacer esto dirijámonos a la opción Plugin del menú principal de Framework360 siguiendo los siguientes pasos:
Personalización > Plugin
Una vez dentro de la pantalla de los plugins busquemos, a través del área correspondiente para la búsqueda, el plugin Ecommerce e instalémoslo.
Una vez instalado el plugin dentro del menú principal de Framework360 se abrirá una nueva sección llamada, precisamente, Ecommerce a través de la cual podremos ampliar nuestro sitio web con todas las funcionalidades multiproducto.
Paso 2: Configuramos las preferencias del plugin Ecommerce
Después de haber instalado el plugin Ecommerce debemos ir a la sección Preferencias del Plugin del menú principal de Framework360 y acceder a la opción Preferencias Ecommerce siguiendo los siguientes pasos:
Personalización > Preferencias del Plugin > Ecommerce
Una vez dentro de la página de personalización de las Preferencias Ecommerce, a través de la opción Sistema de reseñas podríamos decidir si activar o no la posibilidad de permitir que nuestros clientes dejen reseñas.
Mientras tanto, al ir a la opción Moderar reseñas, podríamos aprobar personalmente las reseñas dejadas por los clientes antes de su publicación efectiva en el sitio.
Finalmente, a través de la voz Actualización automática del inventario podremos decidir si el inventario deberá escalar la cantidad de lo vendido automáticamente en el momento en que el cliente realiza el pedido o en el momento en que el pedido resulta pagado.
Paso 3: Añadimos un producto a nuestro E-commerce
Para poder añadir un producto a nuestro E-commerce dirijámonos dentro de la voz del menú principal de Framework360 Productos siguiendo los siguientes pasos:
Ecommerce > Productos
Una vez dentro de la pantalla Productos hacemos clic en el botón verde en la parte superior derecha Añadir.
Dentro de la pantalla de creación del producto tenemos varias pestañas que nos permiten personalizar de manera precisa la creación de nuestro producto.
PESTAÑA PRODUCTO
Dentro de la pestaña Producto podemos añadir:
- el nombre del producto;
- la categoría de referencia (en un momento también nos ocuparemos del aspecto de la creación de la categoría);
- el precio;
- el posible impuesto a aplicar al precio;
- Un posible descuento del artículo y el límite temporal del descuento;
- la cantidad de stock del producto;
- la cantidad mínima de producto comprable (útil para los sitios que se dedican a la venta al por mayor);
- la descripción breve y la descripción extensa del producto;
- decidir si resaltar el producto;
- la tipología de producto (estándar, digital o tarjeta de regalo);
- el código del producto;
- el EAN;
- El peso del producto.
TAB ATRIBUTOS Y VARIACIONES
A medida que nos movemos en la pestaña Atributos y Variaciones podemos seleccionar los posibles atributos del producto si este presenta variaciones, por ejemplo, de talla o color.
Para poder insertar atributos a nuestro producto es necesario que dichos atributos hayan sido creados previamente en el área correspondiente del menú principal de Framework360 llamada Atributos. Para alcanzar el área Atributos debemos ir al menú principal de Framework260 y seguir los siguientes pasos:
Ecommerce > Atributos
Una vez dentro del área Atributos para poder agregar un nuevo atributo hacemos clic en el botón verde en la parte superior derecha Agregar. En este punto se abrirá la pantalla de creación del atributo en la que podemos realizar y definir la variación deseada.
Después de haber creado nuestro atributo podemos regresar al tab Atributos y variaciones, presente en la pantalla de creación de productos donde estábamos anteriormente, y seleccionar el atributo creado. En la figura siguiente vemos un ejemplo en el que estamos seleccionando el atributo color de nuestro producto:
Una vez seleccionado el atributo deseado, al continuar desplazándose dentro de la pestaña Atributos y Variaciones podremos insertar una imagen, el código, la cantidad y el precio de cada variante de nuestro atributo. En el ejemplo representado tenemos la posibilidad de insertar la imagen del producto de color rojo, la imagen del producto de color verde, y los respectivos códigos, cantidades y precios, si estos últimos deben variar respecto a lo que se insertó en la pestaña Producto vista anteriormente.
TAB ARTÍCULOS RELACIONADOS
Dentro de la pestaña Artículos Relacionados tenemos la posibilidad de añadir artículos relacionados en:
- Up-Sell, es decir, añadir una mejora del producto (por ejemplo, si el producto en cuestión es un modelo de zapato, el up-sell podría ser un modelo de zapato similar pero más caro), se le propondrá al cliente comprar la mejora en lugar del producto que está mirando;
- Cross-Sell, es decir, añadir un producto relacionado con el que el cliente está mirando (por ejemplo, si el producto en cuestión es un modelo de zapato, el cross-sell podría ser un par de calcetines), se le propondrá al cliente la combinación de compra de ambos productos.
TAB IMÁGENES
En el tab imágenes tenemos la posibilidad de cargar diferentes imágenes del producto. Recordemos que para insertar imágenes diferentes según un determinado atributo, como se vio anteriormente, deberíamos ir al tab Atributos y Variaciones.
TAB SEO
En este SEO tenemos la posibilidad de insertar un TAG Title y un TAG Description para decidir cómo aparecerá el producto en el motor de búsqueda.
TAB SOCIAL
Finalmente, dentro del tab Social podemos decidir cómo aparecerá nuestro producto en las redes sociales, por lo tanto, el mismo principio que hemos visto para el tab dedicado al SEO pero para las Redes Sociales.
Paso 3: Vamos a crear las categorías y subcategorías de nuestros productos
Sobre cómo crear las categorías y subcategorías de nuestros productos hemos realizado un artículo específico que te invito a consultar haciendo clic aquí.
Paso 4: Agreguemos los productos en el sitio para hacerlos comprables
Una vez creados los productos no nos queda más que insertarlos en el sitio web para hacerlos comprables.
Primero debemos ir a la página del sitio web dentro de la cual queremos que aparezcan nuestros productos que, por ejemplo, podría ser la página principal del sitio. Para hacer esto, dirijámonos dentro de la opción Páginas del menú principal de Framework360 siguiendo los siguientes pasos:
Sitio Web > Páginas
Una vez dentro de la pantalla resumida de todas las páginas del sitio web, hacemos clic en la página donde queremos insertar nuestros productos para modificarla.
Bien, en este punto estamos dentro de la pantalla de modificación de la página que hemos seleccionado, ahora vamos a agregar una fila y, a través del visual builder de Framework360, insertamos dentro de la fila el bloque Lista de Productos (presente dentro de la pestaña Ecommerce) como se muestra en las figuras siguientes:
A este punto Framework360 nos dirá que es necesario crear una estructura del bloque, para ello dirígete a la pestaña Estructura para crear una nueva estructura o importar una estructura previamente creada como se muestra en la figura siguiente:
Una vez definida nuestra estructura, si quisiéramos modificar su visualización (por ejemplo, definir si queremos que los productos aparezcan dentro de una cuadrícula o de un carrusel y cuántos productos deben ser visualizados dentro de la cuadrícula o del carrusel en las distintas ubicaciones móvil, tableta y pc) deberíamos ir a la pestaña Generales en la sección Visualización.
Paso 5: Modificamos la página del producto
Una vez creado el producto Framework360 nos creará automáticamente la página en la que se visualizará el producto, si quisiéramos modificar esta página no tendríamos más que ir a la opción Páginas presente dentro del menú principal de Framework360 siguiendo los siguientes pasos:
Sitio Web > Páginas
Una vez dentro de la opción Páginas buscamos la página de nuestro producto y al hacer clic en ella podremos modificarla a través del visual builder de Framework360.
O bien, si no quisiéramos modificar manualmente los gráficos de nuestras páginas de producto podríamos instalar uno de los muchísimos templates dedicados al e-commerce que Framework360 nos pone a disposición. Para cambiar el template tendríamos que ir a la opción Temas del menú principal de Framework360 siguiendo los siguientes pasos:
Personalización > Temas
Paso 6: Añadimos el carrito dentro del menú principal
Veamos ahora cómo podemos añadir dentro del menú de nuestro sitio, es decir, en el header del sitio, el carrito. Para hacer esto, dirijámonos a la opción Bloques Globales del menú principal de Framework360 siguiendo los siguientes pasos:
Sitio Web > Bloques Globales
Una vez dentro de la pantalla de Bloques Globales vamos a hacer clic en el bloque Menú Principal para modificarlo. En este punto, insertemos dentro de nuestro menú una nueva columna y nos moveremos dentro de ella, a través del visual builder de Framework360, el bloque Carrito como se muestra en la figura siguiente. El bloque carrito lo encontramos dentro de la pestaña Pagos del constructor visual.
Después de haber insertado el bloque Carrito vamos a configurarlo a nuestro gusto, siempre a través del constructor visual, ¡y el juego é hecho!
Si quieres descubrir cómo realizar el header de tu sitio web con Framework360 hemos realizado una guía específica que puedes consultar haciendo clic aquí.
Paso 7: Configuramos el Checkout
Ha llegado el momento de configurar el Checkout. Un checkout es la última parte de un sitio web de comercio electrónico que permite al cliente comprar los productos que ha introducido previamente en el carrito o que de todos modos tiene intención de comprar.
Sobre cómo configurar el Checkout correctamente hemos realizado una guía específica que te invito a consultar haciendo clic aquí.
Paso 8: Conectamos los métodos de pago PayPal y Stripe
Bien, hemos llegado al último paso de la fase de compra, es decir, el pago. Para permitir al cliente realizar el pago debemos conectar a nuestro sitio web de comercio electrónico un método de pago; los métodos más utilizados son
PayPal y Stripe. Hemos creado dos guías específicas dentro de las cuales explicamos cómo conectar estos dos métodos de pago a Framework360. Para consultarlas, haz clic en los enlaces que se indican a continuación:- Cómo conectar PayPal a nuestro sitio web realizado en Framework360
- Cómo conectar Stripe a nuestro sitio web realizado en Framework360
Paso 9: Creamos un cupón de descuento
Por último, è oportuno especificar que Framework360 también nos da la posibilidad de crear un cupón de descuento que los clientes pueden utilizar en el proceso de compra en nuestro e-commerce. También sobre este tema, para mayor claridad, hemos considerado oportuno realizar una guía específica que podrás consultar haciendo clic aquí.
