Wuaps

Herramienta gratuita

Generador de Catálogo para WhatsApp

Crea un catálogo profesional de productos o servicios y permite que tus clientes consulten directamente por WhatsApp.

Sin registro · Sin programación · Código listo para instalar

Plantillas prediseñadas

Empieza con un catálogo completo y edita solo lo que necesites.

Al cambiar de plantilla se reemplazan los productos de ejemplo, pero se conserva tu número de WhatsApp.

Constructor del catálogo

Información del catálogo

Estos datos aparecen en la cabecera y en los mensajes de WhatsApp.

Enlace generado: wa.me/51987654321

Acepta espacios, guiones o paréntesis: se limpian automáticamente.

Logo

Imagen de portada

Con proporción fija actúa como tope; con “Altura fija” define la altura exacta.

Categorías

Agrupa tus productos. El cliente puede filtrar por categoría en el catálogo.

3 de 6 categorías

Productos y servicios

Cada elemento genera su propio botón de WhatsApp con el mensaje ya redactado.

4 de 12 productos

  • Imagen del producto

    62/160 caracteres

    Si lo dejas vacío se usa el mensaje sugerido con el nombre y el precio.

    Etiqueta visible en el catálogo: Oferta

Apariencia

Elige un estilo base y ajústalo con tus colores de marca.

Estilo visual

Títulos, etiquetas y detalles

Botones de WhatsApp

Bordes

Sombra

3
2
1

Tamaños y espaciado

Empieza con un preajuste y afina los valores si lo necesitas.

1120px
24px
20px
220px
34px

Publicar y compartir

Descarga el paquete, pégalo en tu web y comparte el enlace real de tu catálogo.

  1. 1. Descarga el paquete

    Incluye index.html, catalogo.css, catalogo.js y la carpeta assets/ con tus imágenes en rutas relativas.

    Esta vista previa es temporal y no es un enlace público.

  2. 2. O copia el código

    «Código completo» incluye HTML, estilos y JavaScript en un solo bloque: pégalo tal cual en un widget HTML de Elementor, WordPress o cualquier web.

    Tamaño del código completo: 28 KB.

    <!-- Catálogo WhatsApp generado con Wuaps — pega este bloque completo en un widget HTML -->
<style>
/* Catálogo WhatsApp generado con Wuaps — estilos aislados con el prefijo wuaps-cat- */
.wuaps-cat-root {
  --wcat-primary: #4511AD;
  --wcat-button: #25D366;
  --wcat-button-text: #ffffff;
  --wcat-bg: transparent;
  --wcat-surface: #ffffff;
  --wcat-card: #ffffff;
  --wcat-text: #161327;
  --wcat-muted: #6b6880;
  --wcat-divider: #eeecf6;
  --wcat-radius: 16px;
  --wcat-radius-sm: 10px;
  --wcat-shadow: 0 1px 2px rgba(16,12,40,.05), 0 8px 20px rgba(16,12,40,.07);
  --wcat-max: 1120px;
  --wcat-pad: 24px;
  --wcat-gap: 20px;
  --wcat-image-height: 220px;
  --wcat-title: 34px;
  --wcat-cols: 3;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  background: var(--wcat-bg);
  color: var(--wcat-text);
  font-family: "Plus Jakarta Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}
.wuaps-cat-root,
.wuaps-cat-root * {
  box-sizing: border-box;
}
/* Reset explícito con :where() para no competir en especificidad con los estilos del catálogo */
:where(.wuaps-cat-root) :where(div, span, p, h2, h3, ul, li, a, img, svg, input, button, header, footer, label) {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  color: inherit;
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
  float: none;
  box-shadow: none;
}
:where(.wuaps-cat-root) :where(input, button) {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  line-height: 1.4;
}
:where(.wuaps-cat-root) :where(img, svg) {
  max-width: 100%;
  display: block;
}
:where(.wuaps-cat-root) :where(ul) {
  list-style: none;
}
:where(.wuaps-cat-root) :where(a) {
  text-decoration: none;
}

.wuaps-cat-shell {
  max-width: var(--wcat-max);
  margin: 0 auto;
  padding: var(--wcat-pad);
  display: block;
}
.wuaps-cat-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 6; height: auto; max-height: 260px;
  min-height: 160px;
  border-radius: var(--wcat-radius);
  overflow: hidden;
  margin: 0 0 18px;
  background: transparent;
}
.wuaps-cat-cover-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.wuaps-cat-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.wuaps-cat-logo {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: var(--wcat-radius-sm);
  object-fit: contain;
  background: var(--wcat-card);
  border: 1px solid #ecebf3;
  padding: 4px;
}
.wuaps-cat-headings {
  flex: 1 1 240px;
  min-width: 0;
}
.wuaps-cat-title {
  font-family: "Plus Jakarta Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: min(var(--wcat-title), 30px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 6px;
  color: var(--wcat-text);
  overflow-wrap: anywhere;
}
.wuaps-cat-subtitle {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--wcat-muted);
  overflow-wrap: anywhere;
}
.wuaps-cat-welcome {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--wcat-primary);
  font-weight: 600;
}
.wuaps-cat-toolbar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 18px;
  width: 100%;
}
.wuaps-cat-searchbox {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 420px;
}
.wuaps-cat-search-icon {
  position: absolute;
  left: 16px;
  color: var(--wcat-muted);
  pointer-events: none;
}
.wuaps-cat-search {
  width: 100%;
  height: 48px;
  font-size: 15px;
  font-weight: 500;
  color: var(--wcat-text);
  background: #f7f6fc;
  border: 1px solid #e7e5f2;
  border-radius: 14px;
  padding: 0 44px 0 44px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wuaps-cat-search::-webkit-search-cancel-button {
  display: none;
}
.wuaps-cat-search::placeholder {
  color: var(--wcat-muted);
  opacity: 1;
}
.wuaps-cat-search:focus {
  border-color: var(--wcat-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wcat-primary) 22%, transparent);
}
.wuaps-cat-clear {
  position: absolute;
  right: 10px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  color: var(--wcat-muted);
  background: color-mix(in srgb, var(--wcat-muted) 14%, transparent);
  cursor: pointer;
}
.wuaps-cat-clear[data-visible="true"] {
  display: inline-flex;
}
.wuaps-cat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.wuaps-cat-filter {
  font-size: 14px;
  font-weight: 600;
  
  color: #2b2542;
  background: #f4f2fb;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 9px 16px;
  min-height: 38px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wuaps-cat-filter:hover {
  border-color: var(--wcat-primary);
}
.wuaps-cat-filter[aria-pressed="true"] {
  background: var(--wcat-primary);
  border-color: var(--wcat-primary);
  color: #ffffff;
  font-weight: 700;
}
.wuaps-cat-grid {
  display: grid;
  grid-template-columns: repeat(var(--wcat-cols), minmax(0, 1fr));
  gap: var(--wcat-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.wuaps-cat-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  background: var(--wcat-card);
  border: 1px solid #ecebf3;
  border-radius: var(--wcat-radius);
  box-shadow: var(--wcat-shadow);
  overflow: hidden;
}
.wuaps-cat-media {
  position: relative;
  width: 100%;
  height: var(--wcat-image-height);
  background: #f2f2f5;
  display: block;
  overflow: hidden;
  flex: 0 0 auto;
}
.wuaps-cat-image {
  width: 100%;
  height: var(--wcat-image-height);
  object-fit: cover;
  object-position: center;
  display: block;
}
.wuaps-cat-image[data-fit="contain"] {
  object-fit: contain;
}
.wuaps-cat-image[data-pos="top"] {
  object-position: top;
}
.wuaps-cat-image[data-pos="bottom"] {
  object-position: bottom;
}
.wuaps-cat-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #f2f2f5;
  color: #9a9aa6;
}
.wuaps-cat-ph-text {
  font-size: 13px;
  font-weight: 600;
}
.wuaps-cat-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-block;
  background: var(--wcat-primary);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  padding: 5px 10px;
  border-radius: 999px;
}
.wuaps-cat-badge[data-badge="agotado"] {
  background: #64646f;
}
.wuaps-cat-badge[data-badge="oferta"] {
  background: #e0363c;
}
.wuaps-cat-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px;
  flex: 1 1 auto;
  min-width: 0;
}
.wuaps-cat-name {
  font-family: "Plus Jakarta Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--wcat-text);
  overflow-wrap: anywhere;
}
.wuaps-cat-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--wcat-muted);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wuaps-cat-prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.wuaps-cat-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--wcat-primary);
}
.wuaps-cat-oldprice {
  font-size: 14px;
  color: var(--wcat-muted);
  text-decoration: line-through;
}
.wuaps-cat-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--wcat-muted);
  border: 1px solid var(--wcat-divider);
  border-radius: 999px;
  padding: 3px 10px;
}
.wuaps-cat-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  margin-top: auto;
  padding: 11px 16px;
  border: none;
  border-radius: 999px;
  background: var(--wcat-button);
  color: var(--wcat-button-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.wuaps-cat-button .wuaps-cat-icon,
.wuaps-cat-button span {
  color: var(--wcat-button-text);
}
.wuaps-cat-button:hover {
  filter: brightness(.93);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--wcat-button) 30%, transparent);
  transform: translateY(-1px);
}
.wuaps-cat-button--off {
  background: color-mix(in srgb, var(--wcat-muted) 18%, transparent);
  color: var(--wcat-muted);
  cursor: not-allowed;
  pointer-events: none;
}
.wuaps-cat-icon {
  flex: 0 0 auto;
}
.wuaps-cat-empty {
  display: none;
  margin: 24px 0 0;
  padding: 20px;
  text-align: center;
  font-size: 15px;
  color: var(--wcat-muted);
  border: 1px dashed var(--wcat-divider);
  border-radius: var(--wcat-radius);
}
.wuaps-cat-root[data-empty="true"] .wuaps-cat-empty {
  display: block;
}
.wuaps-cat-footer {
  margin: 24px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--wcat-divider);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  font-size: 14px;
  color: var(--wcat-muted);
}
.wuaps-cat-footer a {
  color: var(--wcat-primary);
  text-decoration: none;
  font-weight: 600;
}
.wuaps-cat-footer a:hover {
  text-decoration: underline;
}
.wuaps-cat-contact {
  margin-left: auto;
  margin-top: 0;
  width: auto;
}
@media (max-width: 900px) {
  .wuaps-cat-root { --wcat-cols: 2; }
}
@media (max-width: 560px) {
  .wuaps-cat-root {
    --wcat-cols: 1;
    --wcat-title: 24px;
  }
  .wuaps-cat-shell { padding: 17px; }
  .wuaps-cat-cover {
    height: clamp(160px, 45vw, 240px);
    aspect-ratio: auto;
    max-height: 240px;
  }
  .wuaps-cat-searchbox { max-width: 100%; }
  .wuaps-cat-contact { margin-left: 0; width: 100%; }
}

/* Blindaje contra temas agresivos (Elementor, WordPress) que usan !important */
.wuaps-cat-root,
.wuaps-cat-root *,
.wuaps-cat-root *::before,
.wuaps-cat-root *::after {
  font-family: "Plus Jakarta Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  box-sizing: border-box !important;
}
.wuaps-cat-root .wuaps-cat-title {
  font-family: "Plus Jakarta Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: min(var(--wcat-title), 30px) !important;
  color: var(--wcat-text) !important;
  text-transform: none !important;
}
.wuaps-cat-root .wuaps-cat-name {
  font-family: "Plus Jakarta Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important;
  color: var(--wcat-text) !important;
  text-transform: none !important;
}
.wuaps-cat-root .wuaps-cat-subtitle { font-size: 15px !important; color: var(--wcat-muted) !important; }
.wuaps-cat-root .wuaps-cat-welcome { font-size: 14px !important; color: var(--wcat-primary) !important; }
.wuaps-cat-root .wuaps-cat-desc { font-size: 14px !important; color: var(--wcat-muted) !important; }
.wuaps-cat-root .wuaps-cat-price { font-size: 18px !important; color: var(--wcat-primary) !important; }
.wuaps-cat-root .wuaps-cat-oldprice { font-size: 14px !important; color: var(--wcat-muted) !important; text-decoration: line-through !important; }
.wuaps-cat-root .wuaps-cat-tag { font-size: 12px !important; color: var(--wcat-muted) !important; text-transform: none !important; }
.wuaps-cat-root .wuaps-cat-search {
  font-size: 15px !important;
  color: var(--wcat-text) !important;
  background: #f7f6fc !important;
  border: 1px solid #e7e5f2 !important;
  text-transform: none !important;
}
.wuaps-cat-root .wuaps-cat-filter {
  color: #2b2542 !important;
  background: #f4f2fb !important;
  border: 1px solid transparent !important;
  text-transform: none !important;
}
.wuaps-cat-root .wuaps-cat-footer { color: var(--wcat-muted) !important; }
.wuaps-cat-root .wuaps-cat-footer a:not(.wuaps-cat-button) {
  color: var(--wcat-primary) !important;
  background: transparent !important;
  border: 0 !important;
  text-transform: none !important;
}
.wuaps-cat-root .wuaps-cat-filter[aria-pressed="true"] {
  background: var(--wcat-primary) !important;
  border-color: var(--wcat-primary) !important;
  color: #ffffff !important;
}
.wuaps-cat-root .wuaps-cat-button,
.wuaps-cat-root .wuaps-cat-button span {
  background: var(--wcat-button) !important;
  color: var(--wcat-button-text) !important;
  border: none !important;
  text-transform: none !important;
  font-size: 15px !important;
}
.wuaps-cat-root .wuaps-cat-button span { background: transparent !important; }
.wuaps-cat-root .wuaps-cat-button--off,
.wuaps-cat-root .wuaps-cat-button--off span {
  background: color-mix(in srgb, var(--wcat-muted) 18%, transparent) !important;
  color: var(--wcat-muted) !important;
}
.wuaps-cat-root img { border: 0 !important; }
.wuaps-cat-root .wuaps-cat-logo { border: 1px solid #ecebf3 !important; }

</style>
<div class="wuaps-cat-root" data-wuaps-cat>
  <div class="wuaps-cat-shell">
    <header class="wuaps-cat-header">
      <div class="wuaps-cat-headings">
        <h2 class="wuaps-cat-title">Tienda Aurora</h2>
        <p class="wuaps-cat-subtitle">Productos seleccionados con entrega rápida y atención por WhatsApp.</p>
        <p class="wuaps-cat-welcome">Explora nuestros productos y consulta por WhatsApp.</p>
      </div>
    </header>
    <div class="wuaps-cat-toolbar">
      <div class="wuaps-cat-searchbox">
        <svg class="wuaps-cat-search-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false"><path fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" d="M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm5.2 12.2L21 21"/></svg>
        <input id="wuaps-cat-search" class="wuaps-cat-search" type="search" autocomplete="off" placeholder="Buscar productos o servicios" aria-label="Buscar productos o servicios">
        <button type="button" class="wuaps-cat-clear" aria-label="Borrar búsqueda"><svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" focusable="false"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M6 6l12 12M18 6 6 18"/></svg></button>
      </div>
      <div class="wuaps-cat-filters" role="group" aria-label="Categorías">
        <button type="button" class="wuaps-cat-filter" data-filter="all" aria-pressed="true">Todo</button>
        <button type="button" class="wuaps-cat-filter" data-filter="cat-destacados" aria-pressed="false">Destacados</button>
        <button type="button" class="wuaps-cat-filter" data-filter="cat-tecnologia" aria-pressed="false">Tecnología</button>
        <button type="button" class="wuaps-cat-filter" data-filter="cat-hogar" aria-pressed="false">Hogar</button>
      </div>
    </div>
    <ul class="wuaps-cat-grid">
        <li class="wuaps-cat-card" data-category="cat-destacados" data-name="auriculares bluetooth sono x2 cancelación activa de ruido y 32 horas de batería con estuche. destacados">
          <div class="wuaps-cat-media"><span class="wuaps-cat-placeholder"><svg class="wuaps-cat-ph-icon" viewBox="0 0 24 24" width="26" height="26" aria-hidden="true" focusable="false"><path fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" d="M3 5.5h18v13H3zM3 15l5-4.5 4.5 4 3-2.5L21 17"/><circle cx="8.5" cy="9.5" r="1.4" fill="currentColor"/></svg><span class="wuaps-cat-ph-text">Sin imagen</span></span>
          <span class="wuaps-cat-badge" data-badge="oferta">Oferta</span>
          </div>
          <div class="wuaps-cat-body">
            <h3 class="wuaps-cat-name">Auriculares Bluetooth Sono X2</h3>
            <p class="wuaps-cat-desc">Cancelación activa de ruido y 32 horas de batería con estuche.</p>
            <div class="wuaps-cat-prices">
              <span class="wuaps-cat-price">S/ 249</span>
              <span class="wuaps-cat-oldprice">S/ 319</span>
              <span class="wuaps-cat-tag">Destacados</span>
            </div>
            <a class="wuaps-cat-button" href="https://wa.me/51987654321?text=Hola%2C%20estoy%20interesado%20en%3A%0A%0AProducto%3A%20Auriculares%20Bluetooth%20Sono%20X2%0APrecio%3A%20S%2F%20249%0A%0A%C2%BFPodr%C3%ADan%20darme%20m%C3%A1s%20informaci%C3%B3n%3F" target="_blank" rel="noopener noreferrer"><svg class="wuaps-cat-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false"><path fill="currentColor" d="M19.05 4.91A9.82 9.82 0 0 0 12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.86 9.86 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.91-7.02Zm-7.01 15.24h-.01a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.17 8.17 0 0 1-1.25-4.38c0-4.54 3.7-8.23 8.24-8.23 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.69 8.23-8.24 8.23Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.79.97-.14.16-.29.18-.54.06-.25-.13-1.05-.39-1.99-1.23-.74-.66-1.24-1.47-1.38-1.72-.15-.25-.02-.38.11-.5.11-.11.25-.29.37-.43.13-.15.17-.25.25-.41.09-.17.04-.31-.02-.44-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43h-.48c-.16 0-.43.06-.66.31s-.86.85-.86 2.07.89 2.4 1.01 2.56c.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29Z"/></svg><span>Comprar</span></a>
          </div>
        </li>
        <li class="wuaps-cat-card" data-category="cat-tecnologia" data-name="laptop lenovo ideapad 3 ryzen 5, 16 gb ram y 512 gb ssd. incluye windows 11 home. tecnología">
          <div class="wuaps-cat-media"><span class="wuaps-cat-placeholder"><svg class="wuaps-cat-ph-icon" viewBox="0 0 24 24" width="26" height="26" aria-hidden="true" focusable="false"><path fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" d="M3 5.5h18v13H3zM3 15l5-4.5 4.5 4 3-2.5L21 17"/><circle cx="8.5" cy="9.5" r="1.4" fill="currentColor"/></svg><span class="wuaps-cat-ph-text">Sin imagen</span></span>
          <span class="wuaps-cat-badge" data-badge="destacado">Destacado</span>
          </div>
          <div class="wuaps-cat-body">
            <h3 class="wuaps-cat-name">Laptop Lenovo IdeaPad 3</h3>
            <p class="wuaps-cat-desc">Ryzen 5, 16 GB RAM y 512 GB SSD. Incluye Windows 11 Home.</p>
            <div class="wuaps-cat-prices">
              <span class="wuaps-cat-price">S/ 2,190</span>
              
              <span class="wuaps-cat-tag">Tecnología</span>
            </div>
            <a class="wuaps-cat-button" href="https://wa.me/51987654321?text=Hola%2C%20estoy%20interesado%20en%3A%0A%0AProducto%3A%20Laptop%20Lenovo%20IdeaPad%203%0APrecio%3A%20S%2F%202%2C190%0A%0A%C2%BFPodr%C3%ADan%20darme%20m%C3%A1s%20informaci%C3%B3n%3F" target="_blank" rel="noopener noreferrer"><svg class="wuaps-cat-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false"><path fill="currentColor" d="M19.05 4.91A9.82 9.82 0 0 0 12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.86 9.86 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.91-7.02Zm-7.01 15.24h-.01a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.17 8.17 0 0 1-1.25-4.38c0-4.54 3.7-8.23 8.24-8.23 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.69 8.23-8.24 8.23Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.79.97-.14.16-.29.18-.54.06-.25-.13-1.05-.39-1.99-1.23-.74-.66-1.24-1.47-1.38-1.72-.15-.25-.02-.38.11-.5.11-.11.25-.29.37-.43.13-.15.17-.25.25-.41.09-.17.04-.31-.02-.44-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43h-.48c-.16 0-.43.06-.66.31s-.86.85-.86 2.07.89 2.4 1.01 2.56c.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29Z"/></svg><span>Comprar</span></a>
          </div>
        </li>
        <li class="wuaps-cat-card" data-category="cat-hogar" data-name="silla ergonómica vertex pro soporte lumbar regulable, apoyabrazos 3d y malla transpirable. hogar">
          <div class="wuaps-cat-media"><span class="wuaps-cat-placeholder"><svg class="wuaps-cat-ph-icon" viewBox="0 0 24 24" width="26" height="26" aria-hidden="true" focusable="false"><path fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" d="M3 5.5h18v13H3zM3 15l5-4.5 4.5 4 3-2.5L21 17"/><circle cx="8.5" cy="9.5" r="1.4" fill="currentColor"/></svg><span class="wuaps-cat-ph-text">Sin imagen</span></span>
          </div>
          <div class="wuaps-cat-body">
            <h3 class="wuaps-cat-name">Silla ergonómica Vertex Pro</h3>
            <p class="wuaps-cat-desc">Soporte lumbar regulable, apoyabrazos 3D y malla transpirable.</p>
            <div class="wuaps-cat-prices">
              <span class="wuaps-cat-price">S/ 399</span>
              
              <span class="wuaps-cat-tag">Hogar</span>
            </div>
            <a class="wuaps-cat-button" href="https://wa.me/51987654321?text=Hola%2C%20estoy%20interesado%20en%3A%0A%0AProducto%3A%20Silla%20ergon%C3%B3mica%20Vertex%20Pro%0APrecio%3A%20S%2F%20399%0A%0A%C2%BFPodr%C3%ADan%20darme%20m%C3%A1s%20informaci%C3%B3n%3F" target="_blank" rel="noopener noreferrer"><svg class="wuaps-cat-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false"><path fill="currentColor" d="M19.05 4.91A9.82 9.82 0 0 0 12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.86 9.86 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.91-7.02Zm-7.01 15.24h-.01a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.17 8.17 0 0 1-1.25-4.38c0-4.54 3.7-8.23 8.24-8.23 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.69 8.23-8.24 8.23Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.79.97-.14.16-.29.18-.54.06-.25-.13-1.05-.39-1.99-1.23-.74-.66-1.24-1.47-1.38-1.72-.15-.25-.02-.38.11-.5.11-.11.25-.29.37-.43.13-.15.17-.25.25-.41.09-.17.04-.31-.02-.44-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43h-.48c-.16 0-.43.06-.66.31s-.86.85-.86 2.07.89 2.4 1.01 2.56c.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29Z"/></svg><span>Comprar</span></a>
          </div>
        </li>
        <li class="wuaps-cat-card" data-category="cat-hogar" data-name="cafetera espresso brava 15 bar vaporizador de leche y doble salida para dos tazas. hogar">
          <div class="wuaps-cat-media"><span class="wuaps-cat-placeholder"><svg class="wuaps-cat-ph-icon" viewBox="0 0 24 24" width="26" height="26" aria-hidden="true" focusable="false"><path fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" d="M3 5.5h18v13H3zM3 15l5-4.5 4.5 4 3-2.5L21 17"/><circle cx="8.5" cy="9.5" r="1.4" fill="currentColor"/></svg><span class="wuaps-cat-ph-text">Sin imagen</span></span>
          <span class="wuaps-cat-badge" data-badge="nuevo">Nuevo</span>
          </div>
          <div class="wuaps-cat-body">
            <h3 class="wuaps-cat-name">Cafetera espresso Brava 15 bar</h3>
            <p class="wuaps-cat-desc">Vaporizador de leche y doble salida para dos tazas.</p>
            <div class="wuaps-cat-prices">
              <span class="wuaps-cat-price">S/ 329</span>
              
              <span class="wuaps-cat-tag">Hogar</span>
            </div>
            <a class="wuaps-cat-button" href="https://wa.me/51987654321?text=Hola%2C%20estoy%20interesado%20en%3A%0A%0AProducto%3A%20Cafetera%20espresso%20Brava%2015%20bar%0APrecio%3A%20S%2F%20329%0A%0A%C2%BFPodr%C3%ADan%20darme%20m%C3%A1s%20informaci%C3%B3n%3F" target="_blank" rel="noopener noreferrer"><svg class="wuaps-cat-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false"><path fill="currentColor" d="M19.05 4.91A9.82 9.82 0 0 0 12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.86 9.86 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.91-7.02Zm-7.01 15.24h-.01a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.17 8.17 0 0 1-1.25-4.38c0-4.54 3.7-8.23 8.24-8.23 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.69 8.23-8.24 8.23Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.79.97-.14.16-.29.18-.54.06-.25-.13-1.05-.39-1.99-1.23-.74-.66-1.24-1.47-1.38-1.72-.15-.25-.02-.38.11-.5.11-.11.25-.29.37-.43.13-.15.17-.25.25-.41.09-.17.04-.31-.02-.44-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43h-.48c-.16 0-.43.06-.66.31s-.86.85-.86 2.07.89 2.4 1.01 2.56c.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29Z"/></svg><span>Comprar</span></a>
          </div>
        </li>
    </ul>
    <p class="wuaps-cat-empty">No encontramos productos con esa búsqueda.</p>
    <footer class="wuaps-cat-footer">
      <span>Jr. Camaná 780, Lima</span>
      <a href="https://tiendaaurora.com" target="_blank" rel="noopener noreferrer">Sitio web</a>
      <a href="https://instagram.com/tiendaaurora" target="_blank" rel="noopener noreferrer">@tiendaaurora</a>
      <a class="wuaps-cat-contact wuaps-cat-button" style="width:auto" href="https://wa.me/51987654321?text=Hola%20Tienda%20Aurora%2C%20vi%20su%20cat%C3%A1logo%20y%20quisiera%20m%C3%A1s%20informaci%C3%B3n." target="_blank" rel="noopener noreferrer"><svg class="wuaps-cat-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false"><path fill="currentColor" d="M19.05 4.91A9.82 9.82 0 0 0 12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.86 9.86 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.91-7.02Zm-7.01 15.24h-.01a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.17 8.17 0 0 1-1.25-4.38c0-4.54 3.7-8.23 8.24-8.23 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.69 8.23-8.24 8.23Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.79.97-.14.16-.29.18-.54.06-.25-.13-1.05-.39-1.99-1.23-.74-.66-1.24-1.47-1.38-1.72-.15-.25-.02-.38.11-.5.11-.11.25-.29.37-.43.13-.15.17-.25.25-.41.09-.17.04-.31-.02-.44-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43h-.48c-.16 0-.43.06-.66.31s-.86.85-.86 2.07.89 2.4 1.01 2.56c.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29Z"/></svg><span>Escribir por WhatsApp</span></a>
    </footer>
  </div>
</div>
<script>
/* Catálogo WhatsApp generado con Wuaps — filtros y búsqueda sin dependencias */
(function () {
  var roots = document.querySelectorAll('[data-wuaps-cat]');
  Array.prototype.forEach.call(roots, function (root) {
    var cards = root.querySelectorAll('.wuaps-cat-card');
    var filters = root.querySelectorAll('.wuaps-cat-filter');
    var search = root.querySelector('.wuaps-cat-search');
    var clear = root.querySelector('.wuaps-cat-clear');
    var active = 'all';

    function apply() {
      var term = search && search.value ? search.value.trim().toLowerCase() : '';
      var visible = 0;
      Array.prototype.forEach.call(cards, function (card) {
        var byCat = active === 'all' || card.getAttribute('data-category') === active;
        var byTerm = !term || (card.getAttribute('data-name') || '').indexOf(term) !== -1;
        var show = byCat && byTerm;
        card.style.display = show ? '' : 'none';
        if (show) visible += 1;
      });
      if (clear) clear.setAttribute('data-visible', term ? 'true' : 'false');
      root.setAttribute('data-empty', visible === 0 ? 'true' : 'false');
    }

    Array.prototype.forEach.call(filters, function (button) {
      button.addEventListener('click', function () {
        active = button.getAttribute('data-filter') || 'all';
        Array.prototype.forEach.call(filters, function (other) {
          other.setAttribute('aria-pressed', other === button ? 'true' : 'false');
        });
        apply();
      });
    });

    if (search) {
      search.addEventListener('input', apply);
    }

    if (clear) {
      clear.addEventListener('click', function () {
        if (search) { search.value = ''; search.focus(); }
        apply();
      });
    }

    apply();

  });
})();
</script>

  3. 3. Comparte tu enlace publicado

    Primero publica el catálogo en tu web. Después pega aquí su URL para generar el QR o compartirlo.

    Publica primero tu catálogo y pega aquí su enlace.

    ¿Cómo obtengo una URL?

    1. Descarga el ZIP o copia el código completo.
    2. Publícalo en WordPress, Elementor o tu hosting.
    3. Copia la URL final de la página.
    4. Pégala aquí para compartirla.

Vista previa en vivo

Así se verá tu catálogo al abrirlo desde WhatsApp.