Tienda

Las tiendas online son el modelo de negocio del futuro. Cada día es mas frecuente que pasemos horas revisando catálogos en línea en lugar de visitar una tienda física.

Si has decidido aumentar tus ventas emprendiendo en el mundo digital o quieres mudar tu tienda física a la web, las tiendas online son para ti.

Ahora en MGPanel puedes tener tu propia tienda online auto-gestionable, personalizarla a tu gusto y brindarles a tus clientes un nuevo canal para ver tu catálogo.

¡Aprende a crearla ahora mismo!

Gestor de Tienda

El Gestor de Tienda es la herramienta que te permitirá manejar tu propio catálogo de productos en la web. Desde aquí puedes agregar, actualizar y eliminar productos de tu inventario, así como ver su información básica como el nombre, precio y estatus.

Para acceder a este gestor, dirígete al menú lateral izquierdo y selecciona la opción “Tienda”.

Dentro del Gestor de Tienda podrás acceder a la lista de productos que has agregado, ordenarlos según diversos criterios y buscarlos por categorías o directamente por el nombre del producto.

Agregar Productos

Los Productos se crean desde el Gestor de Tienda, en la opción “Nuevo Producto”. Una vez que hayas ingresado estarás en la pestaña de información general del producto. En la parte superior encontrarás otras pestañas como “Galería” & las OPCIONES DE NIVEL que agregaste en la CONFIGURACIÓN DE LA TIENDA.

A continuación, te explicaremos para que sirven estas pestañas y los campos asociados a cada una de ellas:

Información General del Producto (PRODUCTO)

En la pestaña “Producto” se encuentran los campos de información básica del producto. Desde acá podrás agregar su nombre, identificación, precio, existencia, categorías del producto y descripción. Los campos asociados a la pestaña “Producto” son los siguientes:

Galería

En esta pestaña se agregan los recursos gráficos como las demás fotos, imágenes o infografías relacionadas con el producto. Las dimensiones de la foto no deben superar los 1200px de ancho ni debe tener un peso mayor a 1Mb.

Esta pestaña solo cuenta con un campo para agregar contenido multimedia: Imágenes para Galería.

Imágenes para Galería

Las imágenes para galería sirven para mostrar tu producto desde otros ángulos y perspectivas, también puedes agregar infografías relacionadas que permitan a tus clientes conocer mejor tu producto.

Una vez que hayas terminado de agregar la información de tu producto, presiona el botón “Guardar” y lo habrás agregado a tu inventario. Ahora solo falta mostrarlo en tu sitio web.

Donde veo mis productos en MGPanel

Al crear un producto y al añadirle algunas categorías, automáticamente se generan páginas adicionales en tu sitio web, una para mostrar el producto y otra para mostrar los productos que coincidan con esa categoría.

Vista del producto

Para acceder a la página de tu producto has lo siguiente: Ingresa al Gestor de Tienda, ubica un producto y has clic en la acción “Ver Producto”, esto abrirá una pestaña en tu navegador con la página de tu producto con toda la información que has ingresado al crearlo.

Vista de categorías

Dentro de la página del producto verás las categorías encima de su nombre. Basta con hacer clic en alguna de ellas y te redirigirá a la página donde se muestran los productos relacionados con esa categoría.

Mostrar mis productos en mi sitio web

Puedes incorporar una lista de productos en prácticamente cualquier sección de tu sitio web. La forma de hacerlo es a través de los códigos de incorporación de MGPanel. Estos códigos se utilizan para añadir fragmentos de código desde un gestor hasta el cuerpo de la página web.

En el caso de la tienda, se tienen dos códigos para agregar un fragmento del catálogo con los últimos productos y los productos destacados.

Para agregar tus últimos productos a tus módulos y contenidos, copia el siguiente código y colócalo dentro del Editor HTML:

Últimos Productos: ##_TIENDA0001

Por otro lado, para agregar tus productos destacados, copia el siguiente código y colócalo dentro del Editor HTML:

Productos Destacados: ##_TIENDA0002

Linkear mis productos o categorías

Una vez que has creado tus productos con sus respectivas categorías, quieres que sean visibles y que tus usuarios puedan acceder a ellos. Para esto debes crear accesos en tu sitio web usando botones con enlaces que los lleven directamente al producto o a la página de una determinada categoría.

En MGPanel puedes agregar enlaces en prácticamente cualquier lugar de tu sitio web, sin embargo, te recomendamos crear un apartado en el menú principal con tus categorías de productos para que los usuarios tengan el acceso a la mano. Otra forma de enlazar estas páginas es añadiendo botones para categorías específicas en el Home o en el cuerpo de tus páginas web.

Para colocar estos enlaces puedes acceder a tu página del producto o a la página de la categoría que deseas enlazar y copiar la URL sin incluir el dominio. Esto lo vas a colocar en el atributo href=”” del botón donde vas a colocar el enlace. Lo entenderás mejor con el siguiente ejemplo:

Digamos que la URL de tu sitio web es:

www.misitioweb.com

Este enlace correspondería a la página principal, pero si se tratase de un producto tendría la siguiente estructura:

www.misitioweb.com/producto/camisa-de-mgpanel

Si por otro lado estuvieses en la vista de una categoría, la estructura sería de esta manera:

www.misitioweb.com/productos/camisas

La forma de enlazarlos sería entonces:

<a href=”/producto/camisa-de-mgpanel”>Camisa de MGPanel</a>

<a href=”/productos/camisas”>Camisas</a>

Así podrás linkear cada uno de tus productos o categorías al botón que necesites de ahora en adelante.

Agregar buscador de productos

Cuando tienes un e-commerce o una tienda online muy grande, probablemente sea dificil para tus clientes el encontrar una linea de productos e incluso puede que intenten buscar un producto en específico.

Agregar un buscador de productos les permitirá encontrar rápidamente el producto que estan buscando, de este modo disfrutarán de una mejor experiencia de usuario, lo cual te permitirá generar conversiones (ventas) y al mismo tiempo fidelizar clientes.

Para icorporar el buscador de productos en tu sitio web, basta con colocar el siguiente código dentro de tu HTML:

Buscador de productos: ##_TIENDA0003

Los productos listados en el buscador provienen directamente de tu inventario, así que las coincidencias que tus clientes tendrán dependerán del nombre de tu producto y de la palabra o palabras clave que la persona ingrese en el buscador.

Editar Aspecto de Mis Productos

La primera vez que veas tus productos en tu sitio web notarás que su aspecto es bastante simple, sin embargo, como casi todo en MGPanel se puede personalizar, tienes la posibilidad de cambiar ese aspecto agregando estilos CSS.

Para darle estilos a las vistas de tus productos debes conocer su estructura HTML. Una opción bastante cómoda es usar el Inspector de los navegadores para echarle un ojo al código y editar el CSS en vivo. Luego puedes agregar estos estilos al Editor CSS de MGPanel para que sean permanentes.

También puedes chequear la estructura HTML de la miniatura y la vista detallada del producto a continuación:

Miniatura del Producto

<article>
    <div class="mg_producto_img">
        <a href="">
            <img src="" alt="">
        </a>
    </div>
    <div class="mg_producto_content">
        <a href="" class="mg_producto_title">Nombre de tu producto</a>
        <a href="" class="mg_btn-accion btn btn-primary">Más detalles</a>
    </div>
</article>

Vista Detallada del Producto

<div class="row mg_principal_producto">
    <div class="col-md-6">
        <div class="mg_producto_portada">
            <img src="" alt="">
        </div>
    </div>
    <div class="col-md-6">
        <div class="mg_producto_todo">
            <div class="mg_producto_categorias">
                <a href="/productos/categoria1">Categoría 1</a>
                <a href="/productos/categoria2">Categoría 2</a>
                <a href="/productos/categoria3">Categoría 3</a>
            </div>
            <h1>Título del producto</h1>
            <div id="mg_producto_contenido_data" class="mg_producto_contenido">Descripción del Producto</div>
        </div>
    </div>
</div>

Esto puede ayudarte a comprender mejor el cuerpo del producto y a incorporarlo en desarrollos locales para personalizarlo desde tu editor preferido.

Importar productos

A continuación encontrarás un paso a paso de como importar tus productos al inventario de tu tienda a través de archivos .CSV:

Formato .CSV:

Los archivos CSV son un tipo de documento en formato abierto sencillo para representar datos en forma de tabla, en las que las columnas se separan por comas y las filas por saltos de línea.

En el siguiente enlace podrás encontrar un ejemplo con el formato de archivo que debes usar para importar tus productos al inventario de tu tienda:
Excel: https://mgpanel.s3.us-east-2.amazonaws.com/base_importarV11_3_093.xlsx
.CSV: https://mgpanel.s3.us-east-2.amazonaws.com/base_importarV11_3_093.csv

Importando archivo:

• En nuestro panel principal de MGPanel en el menú de la izquierda damos clic sobre TIENDA y buscamos la opción de INVENTARIO.
• Estando allí ubicamos el botón de IMPORTAR, damos clic sobre él.
• Seguido damos clic sobre el cuadro "Carga tu archivo aquí" y seleccionamos el archivo .csv que queremos importar.
• Finalizamos dando clic en el botón SUBIR CSV.

De esta forma automáticamente tu inventario se actualizará en solo unos segundos.

Importante:

• Esta funcionalidad aún está en fase BETA, si te encuentras con algún error o tienes un comentario adicional puedes dejarlo a soporte@mgpanel.org o comentarlo en la comunidad de telegram o discord.
• Las características habilitadas en la opción de importar por producto son: CÓDIGO, TÍTULO, PRECIO, DESCRIPCIÓN, FOTO* & EXISTENCIA.
• * Las fotos previamente deben ser cargadas en nuestro servidor multimedia, puedes enviarlas a soporte@mgpanel.org en una carpeta en donde cada foto tenga como nombre el código del producto para su relación.