En este tutorial te vamos a compartir un diseño de una tienda virtual para que la personalices y la implementes en Google Sites de acuerdo con las necesidades de tu negocio. Es ideal para vender pequeños catálogos de productos que no necesita estar actualizándose diariamente.

Te mostraremos cómo realizar una tienda virtual atractiva de manera rápida y sencilla. Utilizando código HTML y un poco de diseño en la plataforma amigable Google Sites.

Lo más importante:

● Asegúrate de que tu tienda virtual sea accesible y se vea bien en dispositivos móviles y de escritorio.

● Selecciona imágenes de alta resolución, pero de tamaño reducido para evitar ralentizar la carga de la página.

● Destaca en tu página web: promociones y ofertas especiales: que pueden incentivar la compra.

● Personaliza tu tienda virtual con estilos y colores que se ajusten a la imagen corporativa.

¿Por qué es Importante un Carrito de Compras en una Tienda Virtual?

Un carrito de compras es una función esencial en las tiendas en línea y sitios de comercio electrónico. Permite a los usuarios seleccionar y acumular los productos que desean comprar antes de finalizar su compra. Funciona como un equivalente digital al carrito físico que se utiliza en una tienda física para colocar los artículos, mientras se navega por la tienda.

Algunas ventajas de colocar un carrito de compras en tu tienda virtual sol las siguientes:

● Agregar Productos: Los clientes pueden seleccionar productos y añadirlos al carrito mientras navegan por la tienda en línea.

● Gestionar Cantidad: Pueden ajustar la cantidad de cada producto en el carrito, agregar o quitar elementos según sus necesidades.

● Revisar y Modificar: Antes de finalizar la compra, los usuarios pueden revisar los productos en el carrito, modificar cantidades o eliminar elementos.

● Calcular el Costo Total: El carrito muestra el costo total de los productos seleccionados, incluyendo impuestos y gastos de envío si son aplicables.

● Proceder al Pago: Una vez satisfechos con su selección, los usuarios pueden avanzar para completar el proceso de pago y finalizar la compra.

TUTORIAL: ¿Cómo Hacer una Tienda Virtual con Google Sites con un Carrito de Compras?

Paso 1: Preparación y Planificación

Antes de comenzar, es importante tener un plan claro. Define qué productos o servicios ofrecerás en tu tienda virtual, establece los precios, las descripciones y las imágenes de los productos. También considera cómo organizarás tus páginas, como la página de inicio, la página de catálogo de productos y la página de contacto.

Paso 2: Preparativos Iniciales

1) Primero, necesitarás tener una cuenta de Google y crear una página en Google Sites.

2) Carga las imágenes en una sección de tu sitio en Google Sites. Opta por crear una página vacía donde puedas elaborar un borrador y subir ahí tus imágenes.

Coloca vista previa.

Seleccionar la imagen que desea copar el enlace. Dar clic derecho, selecciona abrir imagen en una pestaña nueva. Luego, ubica la pestaña etiquetada como "Enlace" o "URL" en la que encontrarás las direcciones web de las imágenes cargadas. Copia la URL y pégala en la sección en el código que te proporcionaremos más adelante.

¿Qué Resolución y Peso Debe Tener la Imagen?

Antes de comenzar, asegúrate de tener las imágenes por cada producto del mismo tamaño, Una resolución de 72 PPI (o DPI) es adecuada para imágenes que se mostrarán en la pantalla. Esto significa que una imagen con dimensiones de 1000x600 píxeles tendría una calidad suficiente para una página web.

Paso 3: Creación de un Nuevo Sitio en Google Sites

1) Inicia sesión en tu cuenta de Google y accede a Google Sites.
Haz clic en el botón "+". Selecciona "Sitio en blanco" para empezar desde cero.
Asigna un nombre y una dirección a tu sitio.

2) realiza un carrusel de imágenes y configura el encabezado de la tienda virtual.

3: Descarga el código HTML, que dejamos en esta página y personalízalo de acuerdo a tus productos y a tu negocio.

Te dejamos abajo la descripción de como hacerlo:

1) Título: Desplázate hasta el “Header” e ingresa el título, de la tienda virtual.

     <header>
<!— TITULO -->
        <h1>Escribe el título aquí</h1>
    </header>

2) Menú. En el menú de navegación secundario cambia los títulos y enlace "Home",”·contacto” y demás.

<!—MENU DE NAVEGACION -->
        <nav class="menu">
<div class='menu-secondary-container'>
<ul class='menus menu-secondary'>
    <li><a expr:href='data:blog.homepageUrl'>Home</a> </li>
    <li><a href=' https://api.whatsapp.com/send?phone=xxxxxxx'>Contacto</a> </li>    <li><a expr:href =''data:blog.homepageUrl'>Menu</a>
      <ul class='Producto 1'>
        <li><a href=' https://www.xxxxx.com/'>Principal</a> </li>
        <li><a href='#'>Producto 1</a> </li>
        <li><a href='#'>Producto 2</a> </li>
      </ul>
    </li>        </nav>

3) Categorías. Establece los nombres de las categorías que vas a filtrar los productos.

<!—CATEGORIAS -->

   <div class="wrap">
       <h1> </h1>
       <div class="store-wrapper">
           <div class="category_list">
               <a href="#" class="category_item" category="all">Todo</a>
               <a href="#" class="category_item" category="Promociones">Promociones</a>
               <a href="#" class="category_item" category="Plantillas">Plantillas</a>
               <a href="#" class="category_item" category="Ebooks">Ebooks</a>
               <a href="#" class="category_item" category="Cursos">Cursos</a>
               <a href="#" class="category_item" category="Web">Web</a>
           </div>
    <main>

4) Imágenes: Revisa la etiqueta coloca el enlace, de cada producto.

/ PRODUCTOS */

            <section class="products-list">
                <div class="product-item" category="Plantillas">
                            <img src="https://tu-imagen-aqui.png" alt="Producto 1">
            <h2>Producto1 </h2>
            <p>Descripción. </p>
            <li><a href="https://www.enlace.html">Leer más. </a></li>
            <span class="price">$60.00</span>
            <button class="add-to-cart" onclick="addToCart('Producto 1', 25)">Agregar al Carrito</button>                    </div>

Asimismo, revisa la etiqueta ingresa los nombres de los productos y actualiza el precio en la parte donde dice "price". Agrega productos si, es necesario.

5). Agregar menú social. Agrega el enlace por cada red social.

<div class="social-menu">
    <a href="https://www.facebook.com"><i class="fab fa-facebook"></i></a>
    <a href="https://www.youtube.com " class="social-link youtube"><i class="fab fa-youtube"></i></a>
    <a href="https://www.tu.sitio1.com/" class="social-link website"><i class="fas fa-globe"></i></a>
</div>

6). Agrega el enlace de pago. Agrega el enlace de pago por cada producto y totaliza la suma de varios productos con un enlace para cancelar varios productos. Revisa el checkoutLink = 'www.xxxx.'.

<!— Enlace de pago del producto 1, producto 2 y producto 3-->
if (productNames.includes('Producto 1') && productNames.includes('Producto 2') && productNames.includes('Producto 3')) {
checkoutLink = 'www.xxxx.6';

Paso 4: Contacto y Pago

Enlazar una página web a WhatsApp para proporcionar información de contacto como dirección de correo electrónico o número de teléfono. Igualmente, integra una pasarela de pago segura, como PayPal, Epayco o Stripe. Si planeas aceptar pagos en línea.

Finalmente ingresa el código en la pagina de Google Sites.

Descargar

TIENDA VIRTUAL DESCARGAR

Conclusión

Crear una tienda virtual en Google Sites es una forma efectiva y accesible de entrar en el mundo del comercio electrónico. Aprovecha la sencillez de la plataforma para mostrar tus productos, interactuar con los clientes y brindar una experiencia de compra en línea fluida. Al seguir este tutorial, podrás establecer tu tienda virtual y llevar tu negocio al mundo digital.

Destaca tus productos con esta tienda virtual y coméntanos: ¿Cuál ha sido el resultado?, ¿Que te ha parecido?

Ver ejemplo de tienda virtual

Eso es todo, esperamos que esta información te sea útil.