Si todavía mandás fotos y precios por WhatsApp uno por uno, esto te ahorra ese trabajo. Con una hoja de Google Sheets y una herramienta gratis de Google que se llama Apps Script, armás una página de catálogo con tus productos, tus fotos, un buscador, las categorías, lo que está agotado y un botón para que el cliente te haga el pedido por WhatsApp. Cuando cambiás un precio en la hoja, el catálogo cambia solo. Aquí tenés el código listo para copiar y cada paso, pantalla por pantalla.
- Nivel
- Principiante
- Tiempo
- 1 hora
- Herramienta
- Google Sheets y Apps Script
- Costo
- Gratis
Gratis y sin registro. Si la querés para leer sin internet o pasarla a tu equipo:
Descargar en PDFAl terminar vas a tener
Un enlace a tu catálogo que podés poner en tu perfil de Instagram, en tu estado de WhatsApp o mandarle a tus clientes. Se ve bien en el celular, tiene buscador y categorías, marca lo agotado y cada producto trae su botón "Pedir por WhatsApp" con el mensaje ya escrito. Vos solo actualizás la hoja.
Es para vos si
- Tenés una tienda, un emprendimiento o un negocio con productos (ferretería, ropa, repuestos, comida, cosméticos) y querés mostrarlos en un solo enlace.
- Ya usás Google Sheets o Excel para tus precios y existencias, o podés aprender a usarlo.
- No querés pagar una tienda en línea todavía, o querés probar antes de pagar una.
No es para vos si
- Querés cobrar con tarjeta en la misma página. Este catálogo no cobra: el pedido llega a tu WhatsApp y el pago lo arreglás con el cliente.
- Tenés miles de productos. La página carga todo de una vez y con tantos productos se pone lenta; ahí conviene una tienda en línea de verdad.
Antes de empezar, tené a mano
- Una cuenta de Google (la misma de Gmail). Es gratis.
- Una computadora. La hoja se puede llenar desde el celular, pero los pasos del código son más fáciles en la compu.
- La lista de tus productos con precio y existencias. Si ya la tenés en Excel, la podés copiar y pegar.
- Fotos de tus productos, tuyas o con permiso para usarlas.
- Tu número de WhatsApp.
Paso a paso
- 01
Creá la hoja y ponele nombre a la pestaña
- Dónde
- En sheets.google.com, con tu cuenta de Google.
- Qué hacer
- a)Entrá a sheets.google.com y hacé clic en el cuadro con el signo "+" de colores (dice "En blanco" u "Hoja de cálculo en blanco") para crear una hoja nueva.
- b)Arriba a la izquierda, donde dice "Hoja de cálculo sin título", hacé clic y escribí el nombre de tu tienda, por ejemplo "Catálogo Mi tienda".
- c)Abajo a la izquierda hay una pestaña que dice "Hoja 1". Hacé doble clic sobre ella, borrá el texto, escribí Productos (con P mayúscula) y presioná Enter.
- Qué vas a ver
- Una hoja vacía con tu nombre arriba y la pestaña "Productos" abajo.
Un consejo: El nombre de la pestaña tiene que ser exactamente Productos. El código busca esa pestaña por su nombre.
- 02
Pegá los títulos de las columnas
- Dónde
- En la hoja, celda A1 (arriba a la izquierda).
- Qué hacer
- a)Copiá los títulos con el botón "Copiar" de aquí abajo.
- b)Hacé clic en la celda A1 y pegá (Ctrl + V en Windows, Cmd + V en Mac). Cada título cae solo en su columna, de la A a la I.
- c)Revisá que quedaron así: ID, Producto, Categoría, Precio, Stock, Descripción, Imagen, Destacado y Crédito de la foto.
- Qué vas a ver
- La fila 1 con los nueve títulos, uno en cada columna.
Títulos para pegar en la celda A1ID Producto Categoría Precio Stock Descripción Imagen Destacado Crédito de la foto
Si te sale distinto: Si todo quedó metido en la celda A1, escribí los títulos a mano, uno por celda, de la A1 a la I1. Copialos tal cual, con sus tildes: el código usa esos nombres. - 03
Elegí la configuración regional (para que los precios salgan bien)
- Dónde
- En la hoja, menú "Archivo".
- Qué hacer
- a)Hacé clic en "Archivo" y después en "Configuración".
- b)En "Configuración regional", elegí "Estados Unidos". El Salvador no aparece en la lista, y Estados Unidos usa el punto para los centavos y el signo de dólar, igual que aquí.
- c)En "Zona horaria", buscá la de El Salvador.
- d)Hacé clic en "Guardar configuración". La hoja se vuelve a cargar.
- Qué vas a ver
- Cuando escribís 9.25 en una celda, queda alineado a la derecha: eso quiere decir que la hoja lo entiende como número.
Si te sale distinto: Si la hoja está configurada en España u otro país que usa coma para los centavos, 9.25 queda como texto y el catálogo muestra los precios mal. Es uno de los dos pasos técnicos del video, y con esto queda listo. - 04
Llená tus productos
- Dónde
- En la pestaña Productos, desde la fila 2.
- Qué hacer
- a)ID: un código corto para cada producto, por ejemplo FER-001, FER-002. Te sirve para saber de qué producto te hablan en WhatsApp.
- b)Producto: el nombre como lo dirías a un cliente. Las filas sin nombre no salen en el catálogo.
- c)Categoría: escribila siempre igual (si una dice "Jardín" y otra "jardin", salen como dos categorías distintas).
- d)Precio: solo el número, con punto para los centavos: 9.25. Sin el signo de dólar.
- e)Stock: cuántos tenés. Si ponés 0, el catálogo lo marca como "Agotado" y apaga el botón de pedir.
- f)Descripción: una o dos frases. Se ve cuando el cliente toca el producto.
- g)Destacado: escribí Sí (con tilde) en los que querés que salgan primero, con una etiqueta naranja. En los demás, No.
- h)Crédito de la foto: solo si la foto es de otra persona y su licencia pide nombrarla. Si las fotos son tuyas, dejala vacía.
- i)Para que los precios se vean con el signo de dólar en la hoja: seleccioná la columna D haciendo clic en la letra D, y andá a "Formato", "Número", "Moneda".
- Qué vas a ver
- Una fila por producto. Si tenés tu lista en Excel, podés copiar y pegar las columnas en el orden de los títulos.
Un consejo: No agregués columnas con datos privados, como el costo o el proveedor. Todo lo que está en la pestaña Productos viaja dentro de la página, aunque no se vea. Si querés llevar costos, hacelo en otra pestaña.
- 05
Poné el enlace de cada foto
- Dónde
- En la columna Imagen.
- Qué hacer
- a)El catálogo necesita el enlace directo de cada foto, el que termina en la imagen. Si tus fotos ya están en tu página web, abrí la foto, hacé clic derecho encima, elegí "Copiar dirección de imagen" y pegala en la columna Imagen.
- b)Si tus fotos están en Google Drive: hacé clic derecho en la foto, "Compartir", y en "Acceso general" elegí "Cualquier persona que tenga el vínculo". Copiá el vínculo.
- c)El vínculo de Drive se ve así: https://drive.google.com/file/d/ESTE-ES-EL-CODIGO/view. Copiá solo el código del medio y armá este enlace: https://drive.google.com/thumbnail?id=ESTE-ES-EL-CODIGO&sz=w1000. Ese es el que va en la columna Imagen.
- d)Para revisar un enlace, pegalo en una pestaña nueva del navegador: tiene que abrir solo la foto.
- Qué vas a ver
- Cada producto con su enlace en la columna G.
Si te sale distinto: Si una foto no aparece en el catálogo, casi siempre es porque el archivo de Drive no está compartido con "Cualquier persona que tenga el vínculo", o porque el enlace es de una página y no de la imagen.Un consejo: Usá fotos tuyas o con permiso. Las fotos de otras tiendas o de Google Imágenes tienen dueño.
- 06
Abrí Apps Script
- Dónde
- En la hoja, menú "Extensiones".
- Qué hacer
- a)Hacé clic en "Extensiones" y después en "Apps Script". Se abre una pestaña nueva.
- b)Arriba a la izquierda dice "Proyecto sin título". Hacé clic ahí, escribí "Catálogo" y hacé clic en "Cambiar nombre".
- c)A la izquierda, en "Archivos", ya hay un archivo que se llama "Código.gs". En el centro trae unas líneas que empiezan con function myFunction.
- Qué vas a ver
- El editor de Apps Script con el archivo Código.gs abierto.
Un consejo: Apps Script viene gratis con tu cuenta de Google. No hay que instalar nada.
- 07
Pegá el primer archivo: Código.gs
- Dónde
- En el editor de Apps Script, archivo Código.gs.
- Qué hacer
- a)Hacé clic dentro del código, seleccioná todo (Ctrl + A o Cmd + A) y borralo.
- b)Copiá el código de aquí abajo con el botón "Copiar" y pegalo en el editor.
- c)Guardá con el ícono del disquete que está arriba del código, o con Ctrl + S (Cmd + S en Mac).
- Qué vas a ver
- Unas veinte líneas. Este archivo lee la pestaña Productos y se la pasa a la página.
Código para copiar: Código.gs// Catálogo de tu tienda: lee la pestaña "Productos" de esta hoja y la muestra como página web. // Cada vez que cambiás un precio, el stock o una foto en la hoja, el catálogo se actualiza al recargar la página. const PESTANA = 'Productos'; function doGet() { const pagina = HtmlService.createTemplateFromFile('Index'); // "<" escapado para que ningún texto de la hoja pueda cerrar el <script> de la página. pagina.datos = JSON.stringify(leerProductos()).replace(/</g, '\\u003c'); return pagina.evaluate() .setTitle('Catálogo · Mi tienda') .addMetaTag('viewport', 'width=device-width, initial-scale=1'); } function leerProductos() { const filas = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(PESTANA).getDataRange().getValues(); const titulos = filas.shift(); return filas .filter((fila) => fila[1] !== '') .map((fila) => Object.fromEntries(titulos.map((titulo, i) => [titulo, fila[i]]))); }Un consejo: Si cambiás "Mi tienda" en la línea de setTitle, cambia el nombre que sale en la pestaña del navegador.
- 08
Creá el segundo archivo: Index
- Dónde
- En el editor de Apps Script, junto a "Archivos".
- Qué hacer
- a)A la par de la palabra "Archivos" hay un signo "+". Hacé clic y elegí "HTML".
- b)Escribí el nombre Index, con I mayúscula y sin ".html" (Apps Script se lo pone solo). Presioná Enter.
- c)Se abre el archivo Index.html con unas líneas de ejemplo. Seleccioná todo y borralo.
- d)Copiá el código de aquí abajo y pegalo.
- e)Buscá la línea que dice const WHATSAPP = ''; y escribí tu número entre las comillas: 503 y tus ocho números, todo junto, sin espacios ni signo +. Por ejemplo: const WHATSAPP = '503XXXXXXXX'; con tu número en lugar de las X.
- f)Cambiá "Mi tienda" en la línea del h1 por el nombre de tu negocio, y el emoji de la bolsa por el que querás.
- g)Guardá con el disquete o con Ctrl + S.
- Qué vas a ver
- Dos archivos a la izquierda: Código.gs e Index.html. Este segundo es la página que ve tu cliente.
Código para copiar: Index.html<!DOCTYPE html> <html lang="es"> <head> <base target="_top" /> <meta charset="utf-8" /> <style> :root { --naranja: #f26b1d; --tinta: #1b2333; --gris: #6b7385; --fondo: #f4f5f8; --borde: #e3e6ec; --verde: #1f9d55; --rojo: #d93a2b; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--fondo); color: var(--tinta); } header { position: sticky; top: 0; z-index: 5; background: var(--tinta); color: #fff; padding: 16px 16px 12px; } .marca { display: flex; align-items: center; gap: 10px; } .logo { width: 38px; height: 38px; border-radius: 10px; background: var(--naranja); display: grid; place-items: center; font-size: 20px; } h1 { font-size: 19px; line-height: 1.2; } .sub { font-size: 12px; color: #b9c0cf; } #buscar { width: 100%; margin-top: 12px; padding: 11px 14px; border-radius: 12px; border: 0; font-size: 15px; } #cats { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px 4px; scrollbar-width: none; } .cat { flex: none; border: 1px solid var(--borde); background: #fff; color: var(--tinta); border-radius: 999px; padding: 7px 14px; font-size: 13px; cursor: pointer; } .cat.on { background: var(--naranja); border-color: var(--naranja); color: #fff; } #cuenta { padding: 8px 16px 0; font-size: 12px; color: var(--gris); } #grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px 16px 24px; } @media (min-width: 720px) { #grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1100px; margin: 0 auto; } #cats, #cuenta { max-width: 1100px; margin: 0 auto; } } .card { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--borde); display: flex; flex-direction: column; cursor: pointer; } .foto { position: relative; aspect-ratio: 1; background: #fff; } .foto img { width: 100%; height: 100%; object-fit: contain; padding: 8px; } .estrella { position: absolute; top: 8px; left: 8px; background: var(--naranja); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 8px; } .info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .nombre { font-size: 14px; font-weight: 600; line-height: 1.25; } .categoria { font-size: 11px; color: var(--gris); } .precio { font-size: 18px; font-weight: 800; margin-top: auto; } .stock { font-size: 12px; font-weight: 600; } .stock.si { color: var(--verde); } .stock.no { color: var(--rojo); } .agotado .foto img { opacity: .45; } #vacio { display: none; padding: 40px 16px; text-align: center; color: var(--gris); } #detalle { position: fixed; inset: 0; background: rgba(15, 20, 30, .55); display: none; align-items: flex-end; justify-content: center; z-index: 10; } #detalle.abierto { display: flex; } .hoja { background: #fff; width: 100%; max-width: 520px; border-radius: 20px 20px 0 0; max-height: 92vh; overflow: auto; } @media (min-width: 720px) { #detalle { align-items: center; } .hoja { border-radius: 20px; } } .hoja img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; } .hoja .cuerpo { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; } .hoja h2 { font-size: 20px; } .hoja p { font-size: 15px; line-height: 1.45; color: #3a4357; } .credito { font-size: 11px; color: var(--gris); } .botones { display: flex; gap: 10px; margin-top: 6px; } .wa { flex: 1; text-align: center; background: #25d366; color: #fff; text-decoration: none; font-weight: 700; border-radius: 12px; padding: 12px; } .wa.off { background: #b9c0cf; pointer-events: none; } .cerrar { border: 1px solid var(--borde); background: #fff; border-radius: 12px; padding: 12px 16px; font-size: 15px; cursor: pointer; } footer { text-align: center; font-size: 11px; color: var(--gris); padding: 0 16px 28px; } </style> </head> <body> <header> <div class="marca"> <div class="logo">🛍️</div> <div><h1>Mi tienda</h1><div class="sub">Precios y existencias al día, directo desde Google Sheets</div></div> </div> <input id="buscar" type="search" placeholder="Buscá un producto…" autocomplete="off" /> </header> <div id="cats"></div> <div id="cuenta"></div> <main id="grilla"></main> <div id="vacio">No encontramos productos con esa búsqueda.</div> <footer>Precios y existencias al día. Pedidos por WhatsApp.</footer> <div id="detalle"> <div class="hoja"> <img id="d-foto" alt="" /> <div class="cuerpo"> <div class="categoria" id="d-cat"></div> <h2 id="d-nombre"></h2> <div class="precio" id="d-precio"></div> <div class="stock" id="d-stock"></div> <p id="d-desc"></p> <div class="credito" id="d-credito"></div> <div class="botones"> <a class="wa" id="d-wa" target="_blank" rel="noopener">Pedir por WhatsApp</a> <button class="cerrar" id="d-cerrar">Cerrar</button> </div> </div> </div> </div> <script> // Número de WhatsApp de la tienda, con código de país y sin "+" (503 y tus 8 números, todo junto). // Vacío = el botón abre WhatsApp para que el cliente elija a quién mandarlo. const WHATSAPP = ''; const PRODUCTOS = <?!= datos ?>; const q = (s) => document.querySelector(s); const dinero = (n) => '$' + Number(n || 0).toFixed(2); const sinAcentos = (s) => String(s).toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, ''); let categoria = 'Todo'; function enlaceWhatsApp(p) { const texto = encodeURIComponent('Hola, me interesa: ' + p['Producto'] + ' (' + p['ID'] + ') a ' + dinero(p['Precio']) + '. ¿Lo tienen disponible?'); return 'https://wa.me/' + WHATSAPP + '?text=' + texto; } function textoStock(p) { const n = Number(p['Stock']) || 0; return n > 0 ? { clase: 'si', texto: 'Disponible (' + n + ')', largo: 'Disponible · ' + n + ' en existencia' } : { clase: 'no', texto: 'Agotado', largo: 'Agotado por ahora' }; } function pintarCategorias() { const cats = ['Todo', ...new Set(PRODUCTOS.map((p) => p['Categoría']).filter(Boolean))]; const caja = q('#cats'); caja.innerHTML = ''; cats.forEach((c) => { const b = document.createElement('button'); b.className = 'cat' + (c === categoria ? ' on' : ''); b.textContent = c; b.onclick = () => { categoria = c; pintarCategorias(); pintarProductos(); }; caja.appendChild(b); }); } function pintarProductos() { const busca = sinAcentos(q('#buscar').value.trim()); const lista = PRODUCTOS .filter((p) => categoria === 'Todo' || p['Categoría'] === categoria) .filter((p) => !busca || sinAcentos(p['Producto'] + ' ' + p['Descripción'] + ' ' + p['Categoría']).includes(busca)) .sort((a, b) => (b['Destacado'] === 'Sí') - (a['Destacado'] === 'Sí')); const grilla = q('#grilla'); grilla.innerHTML = ''; lista.forEach((p) => { const st = textoStock(p); const card = document.createElement('article'); card.className = 'card' + (st.clase === 'no' ? ' agotado' : ''); card.innerHTML = '<div class="foto"><img loading="lazy" alt=""></div><div class="info"><div class="categoria"></div><div class="nombre"></div><div class="precio"></div><div class="stock"></div></div>'; card.querySelector('img').src = p['Imagen']; card.querySelector('img').alt = p['Producto']; if (p['Destacado'] === 'Sí') { const e = document.createElement('span'); e.className = 'estrella'; e.textContent = 'Destacado'; card.querySelector('.foto').appendChild(e); } card.querySelector('.categoria').textContent = p['Categoría']; card.querySelector('.nombre').textContent = p['Producto']; card.querySelector('.precio').textContent = dinero(p['Precio']); const s = card.querySelector('.stock'); s.className = 'stock ' + st.clase; s.textContent = st.texto; card.onclick = () => abrir(p); grilla.appendChild(card); }); q('#vacio').style.display = lista.length ? 'none' : 'block'; q('#cuenta').textContent = lista.length + (lista.length === 1 ? ' producto' : ' productos'); } function abrir(p) { const st = textoStock(p); q('#d-foto').src = p['Imagen']; q('#d-foto').alt = p['Producto']; q('#d-cat').textContent = p['Categoría']; q('#d-nombre').textContent = p['Producto']; q('#d-precio').textContent = dinero(p['Precio']); const s = q('#d-stock'); s.className = 'stock ' + st.clase; s.textContent = st.largo; q('#d-desc').textContent = p['Descripción']; q('#d-credito').textContent = p['Crédito de la foto'] ? 'Foto: ' + p['Crédito de la foto'] : ''; const wa = q('#d-wa'); wa.href = enlaceWhatsApp(p); wa.className = 'wa' + (st.clase === 'no' ? ' off' : ''); wa.textContent = st.clase === 'no' ? 'Agotado' : 'Pedir por WhatsApp'; q('#detalle').classList.add('abierto'); } q('#d-cerrar').onclick = () => q('#detalle').classList.remove('abierto'); q('#detalle').onclick = (e) => { if (e.target.id === 'detalle') q('#detalle').classList.remove('abierto'); }; q('#buscar').oninput = pintarProductos; pintarCategorias(); pintarProductos(); </script> </body> </html>Si te sale distinto: Si dejás vacío el número de WhatsApp, el botón igual funciona, pero el cliente tiene que elegir a quién mandarle el mensaje. Con tu número, el mensaje te llega directo a vos. - 09
Publicalo como aplicación web
- Dónde
- En Apps Script, botón azul "Implementar", arriba a la derecha.
- Qué hacer
- a)Hacé clic en "Implementar" y elegí "Nueva implementación". No uses "Implementaciones de prueba": ese enlace solo te funciona a vos.
- b)A la par de "Seleccionar tipo" hay un engranaje. Hacé clic en él y elegí "Aplicación web".
- c)En "Descripción" escribí algo como "Catálogo versión 1".
- d)En "Ejecutar como" dejá "Yo" con tu correo. Así la página lee tu hoja con tu permiso y la hoja no se comparte con nadie.
- e)En "Quién tiene acceso" elegí "Cualquier usuario". Así cualquiera que tenga el enlace ve el catálogo, aunque no tenga cuenta de Google.
- f)Hacé clic en "Implementar".
- Qué vas a ver
- Una ventana que dice que la aplicación web necesita tu autorización, con el botón "Autorizar acceso".
- 10
Dale permiso a tu app (el aviso de Google es normal)
- Dónde
- En la ventana de Google que se abre.
- Qué hacer
- a)Hacé clic en "Autorizar acceso" y elegí tu cuenta de Google.
- b)Google te va a mostrar un aviso que dice que no ha verificado esta aplicación ("Google hasn't verified this app", si tu cuenta está en inglés). Es normal: Google lo muestra cuando la app es nueva y la hiciste vos. No es un error.
- c)Abajo a la izquierda, hacé clic en "Configuración avanzada" ("Advanced").
- d)Aparece un enlace que dice "Ir a Catálogo (no seguro)" ("Go to Catálogo (unsafe)"). Hacé clic.
- e)En la última pantalla, Google te dice qué va a poder hacer la app. Hacé clic en "Permitir" ("Allow").
- Qué vas a ver
- Vuelve la ventana de Apps Script con el "ID de implementación" y la "URL de la aplicación web", cada uno con su botón "Copiar".
Un consejo: Sale ese aviso porque la app la hiciste vos y es nueva: Google solo revisa las apps que se publican para miles de personas. Google dice que la app puede ver y editar tus hojas de cálculo porque así nombra el permiso, pero este código solo lee la pestaña Productos y no escribe nada. Por eso conviene pegar solo código que entendés o que viene de una fuente en la que confiás.
- 11
Copiá el enlace y probalo en tu celular
- Dónde
- En la ventana de Apps Script, debajo de "URL de la aplicación web".
- Qué hacer
- a)Hacé clic en "Copiar" a la par del enlace. Es largo y termina en /exec.
- b)Mandátelo a vos mismo por WhatsApp y abrilo en tu celular.
- c)Probá el buscador, tocá una categoría, abrí un producto y tocá "Pedir por WhatsApp".
- d)Si todo funciona, ya podés compartir el enlace: en tu perfil de Instagram, en tu estado de WhatsApp o en el mensaje de bienvenida de tu WhatsApp Business.
- Qué vas a ver
- Tu catálogo con tus productos, en tu celular. Arriba Google pone un aviso gris que dice que la aplicación la creó un usuario de Google Apps Script; es normal.
Si te sale distinto: Si te sale una página de error, revisá que el archivo se llame Index (con I mayúscula) y que la pestaña de la hoja se llame Productos. Si te pide iniciar sesión, volvé al paso 9 y revisá que en "Quién tiene acceso" diga "Cualquier usuario". - 12
Cambiá precios y existencias desde la hoja
- Dónde
- En tu hoja de Google Sheets, desde la compu o el celular.
- Qué hacer
- a)Cambiá un precio, una existencia o una foto en la hoja. No hace falta guardar: Google Sheets guarda solo.
- b)Recargá el catálogo en el celular. El cambio ya está.
- c)Para agregar un producto, llená una fila nueva debajo de la última. Para quitarlo, borrá la fila completa.
- Qué vas a ver
- El catálogo con el precio nuevo, sin tocar el código.
Un consejo: La app de Google Sheets en el celular te deja actualizar precios desde la tienda, sin computadora.
- 13
Si cambiás el código, publicá una versión nueva
- Dónde
- En Apps Script, botón "Implementar".
- Qué hacer
- a)Los cambios en la hoja salen solos, pero los cambios en el código (los colores, tu número de WhatsApp, el nombre de la tienda) no salen hasta que publicás una versión nueva.
- b)Hacé clic en "Implementar" y elegí "Gestionar implementaciones".
- c)Hacé clic en el lápiz ("Editar") que está arriba a la derecha.
- d)En "Versión", elegí "Nueva versión" y hacé clic en "Implementar".
- Qué vas a ver
- El mismo enlace de siempre, ahora con los cambios del código.
Un consejo: Si hacés "Nueva implementación" otra vez, Google te da un enlace distinto y el viejo sigue mostrando la versión anterior. Para no cambiar el enlace que ya compartiste, usá "Gestionar implementaciones".
El prompt maestro
El catálogo de esta guía es sencillo a propósito. Si lo querés con tus colores, con otro diseño o con algo más (un aviso de envío gratis, un botón de Instagram), pedíselo a Claude. Este prompt le da el contexto completo. Pegalo en un chat nuevo de Claude, junto con tus dos archivos.
Tengo un catálogo en línea hecho con Google Sheets y Google Apps Script. Funciona así: - Código.gs lee la pestaña "Productos" de mi hoja y le pasa los datos a la página. - Index.html es la página: buscador, categorías, tarjetas con foto, precio y existencias, y un botón para pedir por WhatsApp. - Las columnas de la hoja son: ID, Producto, Categoría, Precio, Stock, Descripción, Imagen, Destacado y Crédito de la foto. Te pego mis dos archivos abajo. Quiero estos cambios: [escribí lo que querés, por ejemplo: los colores de mi marca, que son verde oscuro y amarillo; un aviso arriba que diga "Envíos gratis en San Salvador"; un botón para ver mi Instagram] Reglas: - No cambiés los nombres de las columnas ni la forma en que Código.gs lee la hoja. - Devolveme los dos archivos completos, listos para pegar. - Que siga viéndose bien en el celular. - Al final, explicame en dos líneas qué cambiaste. Código.gs: [pegá aquí tu Código.gs] Index.html: [pegá aquí tu Index.html]
Letra chica (leela, en serio)
- Los precios del catálogo de ejemplo son inventados. Las fotos del ejemplo son de Wikimedia Commons, con licencia libre, y el crédito de cada una está en el catálogo.
- Apps Script es gratis con una cuenta de Google, pero Google le pone límites de uso diarios. Para una tienda pequeña o mediana alcanzan; si un día tu catálogo recibe muchísimas visitas, conviene pasar a una página o tienda en línea de verdad.
- Todo lo que está en la pestaña Productos queda dentro de la página, aunque no se vea en pantalla. No pongás ahí costos, proveedores ni datos de clientes.
- Arriba del catálogo, Google muestra un aviso gris que dice que la aplicación la creó un usuario de Google Apps Script. No se puede quitar en una cuenta gratis.
- El catálogo no cobra ni guarda pedidos: el pedido llega a tu WhatsApp y el pago lo acordás con tu cliente.
- Si le pedís cambios a Claude, revisá el resultado en tu celular antes de compartir el enlace. Claude puede equivocarse.
- Esta guía no vende ningún programa ni tiene enlaces de afiliado.
Un ejemplo: la ferretería de prueba
Ejemplo inventado para ilustrar, no es un caso real
Para esta guía armamos una ferretería de prueba con 13 productos: martillos, alicates, un taladro, una escalera, una pala. Los precios son inventados y las fotos son de Wikimedia Commons, con licencia libre.
Llenamos la hoja, pegamos los dos archivos, la publicamos como aplicación web y la abrimos en un celular Android. Funcionaron el buscador, las categorías, el detalle de cada producto, el "Agotado" de los que tienen 0 en existencias y el botón de WhatsApp con el mensaje ya escrito.
En el camino aparecieron los dos pasos más técnicos: la hoja estaba configurada en España y los precios quedaban como texto, y Google mostró el aviso de app no verificada al autorizar. Los dos están explicados en los pasos 3 y 10.
Después cambiamos el precio del martillo en la hoja, recargamos el catálogo y el precio nuevo ya estaba ahí.
Preguntas frecuentes
¿Cuesta algo?
No. Google Sheets y Apps Script vienen gratis con tu cuenta de Google y el enlace no vence. Lo único que necesitás es tu tiempo para llenar la hoja.
¿Necesito saber programar?
No. El código ya está hecho: lo copiás de esta guía y lo pegás. Lo único que tocás es tu número de WhatsApp y el nombre de tu tienda, y aquí está explicado dónde.
¿La gente puede ver mi hoja?
No. La hoja sigue siendo privada. Los clientes solo ven la página del catálogo, con la información de la pestaña Productos.
¿Puedo usar mi propio dominio?
El enlace es de Google y no se puede cambiar por tu dominio. Lo que sí podés hacer es poner un botón "Ver catálogo" en tu página o en tu perfil que lleve a ese enlace.
¿Y si quiero que se vea diferente?
Usá el prompt para Claude de más arriba: le pegás tus dos archivos, le decís qué querés cambiar y te los devuelve listos. Después publicás una versión nueva, como en el paso 13.
Siguiente paso
Si querés que armemos juntos el catálogo de tu negocio, o que lo conectemos con tu WhatsApp Business y tus redes, escribime.