AvandiLab

inventory_2

57
Snippets listos ya mismo
payments

₡0
Nunca vas a pagar de más
bolt

5 Min
Para instalar el primero
block

0
Apps nuevas que instalar

sin pagar nada

Probá tres ahora mismo

Estos tres son del kit y son tuyos gratis. Copiá el código, pegalo en tu tema y mirá si te sirve el formato antes de pagar por los otros 54.

Nombre del snippet

Código

<div class="happy-customers">
  <div class="avatars">
    <img src="https://img.freepik.com/free-photo/stylish-african-american-woman-smiling_23-2148770405.jpg" alt="Cliente 1" class="avatar">
    <img src="https://thumbs.dreamstime.com/b/beautiful-african-american-woman-relaxing-outside-happy-middle-aged-smiling-46298787.jpg" alt="Cliente 2" class="avatar">
    <img src="https://media.istockphoto.com/id/1320651997/photo/young-woman-close-up-isolated-studio-portrait.jpg?s=612x612&w=0&k=20&c=lV6pxz-DknISGT2jjiSvUmSaw0hpMDf-dBpT8HTSAUI=" alt="Cliente 3" class="avatar">
  </div>
  <span class="text">1,000,000+ CLIENTES SATISFECHOS</span>
</div>

<style>
.happy-customers {
  display: flex;
  align-items: center;
background-image: linear-gradient(45deg, #1cbcc3, #4abf8f 80%);
  border-radius: 5px;
  padding: 5px 15px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: white;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.avatars {
  display: flex;
  margin-right: 10px;
margin-left: 10px
}

.avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid white;
  margin-left: -7px; 
 object-fit: cover;
}

.text {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

</style>

Nombre del snippet

Código

<body>


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slider de Reseñas — Genérico</title>
    <!--
      Cómo usar este bloque:
      - Cada tarjeta tiene un ".product-review" opcional que muestra qué compró
        el cliente. Si tu producto no lo necesita, borrá ese <div> completo
        de la tarjeta y listo — el resto sigue funcionando igual.
      - Reemplazá las fotos de "product-image" por las tuyas, o quitalas.
      - Sin librerías externas: es JavaScript propio, no depende de nada más.
    -->
    <style>
        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            background-color: #5C42F9;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 18px;
            flex: none;
        }

        .user-details {
            display: flex;
            flex-direction: column;
        }

        .user-name {
            font-weight: bold;
            color: #13152f;
            font-size: 15px;
            display: flex;
            align-items: center;
            gap: 5px;
            line-height: 22px;
        }

        .reviewing {
            font-size: 13px;
            line-height: 20px;
        }

        .rating-inline {
            font-size: 16px;
            color: #f7d131;
        }

        .verified-badge {
            color: #42a5f5;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 4px;
            font-weight: 600;
            line-height: 16px;
        }

        .verified-badge img {
            width: 13px;
            height: 13px;
        }

        .product-review {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .product-image {
            width: 40px;
            height: 40px;
            object-fit: cover;
            border: 2px dashed #e0e0e0;
            border-radius: 5px;
        }

        .description {
            font-size: 13px;
            color: #555;
            text-align: left;
            line-height: 22px;
        }

        #v2-slider-container {
            overflow: hidden;
            position: relative;
            padding: 5px 5px;
            max-width: 1500px;
            margin-right: auto;
            margin-left: auto;
        }

        #v2-slider {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .v2-slider-card {
            flex: 0 0 80%;
            max-width: 300px;
            height: 190px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            background-color: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            padding: 10px;
            box-sizing: border-box;
            gap: 10px;
            transition: transform 0.3s ease;
            justify-content: space-around;
            margin-right: 10px;
        }

        .v2-slider-card:hover {
            transform: translateY(-5px);
        }

        #v2-pagination {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }

        .v2-pagination-dot {
            width: 18px;
            height: 6px;
            background-color: #0d437d29;
            cursor: pointer;
        }

        .v2-pagination-dot.active {
            background-color: #5C42F9;
            width: 22px;
            border-radius: 5px;
        }
    </style>


    <div id="v2-slider-container">
        <div id="v2-slider">

            <div class="v2-slider-card">
                <div class="user-info">
                    <div class="user-avatar">LM</div>
                    <div class="user-details">
                        <div class="user-name">Laura M <span class="rating-inline">★★★★★</span>
</div>
                        <div class="verified-badge">
                            Compra Verificada <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" alt="Verified">
                        </div>
                    </div>
                </div>
                <!-- Opcional: quitá este bloque si no querés mostrar el producto -->
                <div class="product-review">
                    <img class="product-image" src="https://placehold.co/80x80/EDEBFA/5C42F9?text=%20" alt="Producto">
                    <div class="reviewing">Compró <br><strong>Nombre del producto</strong>
</div>
                </div>
                <div class="description">Llegó antes de lo que esperaba y todo bien empacado. Muy contenta con la compra.</div>
            </div>

            <div class="v2-slider-card">
                <div class="user-info">
                    <div class="user-avatar">CR</div>
                    <div class="user-details">
                        <div class="user-name">Carlos R <span class="rating-inline">★★★★★</span>
</div>
                        <div class="verified-badge">
                            Compra Verificada <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" alt="Verified">
                        </div>
                    </div>
                </div>
                <div class="product-review">
                    <img class="product-image" src="https://placehold.co/80x80/EDEBFA/5C42F9?text=%20" alt="Producto">
                    <div class="reviewing">Compró <br><strong>Nombre del producto</strong>
</div>
                </div>
                <div class="description">Todo excelente, la atención fue rápida y el producto es tal cual se veía en las fotos.</div>
            </div>

            <div class="v2-slider-card">
                <div class="user-info">
                    <div class="user-avatar">SV</div>
                    <div class="user-details">
                        <div class="user-name">Sofía V <span class="rating-inline">★★★★★</span>
</div>
                        <div class="verified-badge">
                            Compra Verificada <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" alt="Verified">
                        </div>
                    </div>
                </div>
                <div class="product-review">
                    <img class="product-image" src="https://placehold.co/80x80/EDEBFA/5C42F9?text=%20" alt="Producto">
                    <div class="reviewing">Compró <br><strong>Nombre del producto</strong>
</div>
                </div>
                <div class="description">Justo lo que buscaba, buena calidad y un precio justo. Ya voy por mi segunda compra.</div>
            </div>

            <div class="v2-slider-card">
                <div class="user-info">
                    <div class="user-avatar">JP</div>
                    <div class="user-details">
                        <div class="user-name">José P <span class="rating-inline">★★★★★</span>
</div>
                        <div class="verified-badge">
                            Compra Verificada <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" alt="Verified">
                        </div>
                    </div>
                </div>
                <div class="product-review">
                    <img class="product-image" src="https://placehold.co/80x80/EDEBFA/5C42F9?text=%20" alt="Producto">
                    <div class="reviewing">Compró <br><strong>Nombre del producto</strong>
</div>
                </div>
                <div class="description">Original y a buen precio, la entrega fue rápida y sin ningún enredo.</div>
            </div>

            <div class="v2-slider-card">
                <div class="user-info">
                    <div class="user-avatar">AG</div>
                    <div class="user-details">
                        <div class="user-name">Andrea G <span class="rating-inline">★★★★★</span>
</div>
                        <div class="verified-badge">
                            Compra Verificada <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" alt="Verified">
                        </div>
                    </div>
                </div>
                <div class="product-review">
                    <img class="product-image" src="https://placehold.co/80x80/EDEBFA/5C42F9?text=%20" alt="Producto">
                    <div class="reviewing">Compró <br><strong>Nombre del producto</strong>
</div>
                </div>
                <div class="description">Quedé feliz con la compra, superó lo que esperaba por el precio.</div>
            </div>

            <div class="v2-slider-card">
                <div class="user-info">
                    <div class="user-avatar">NF</div>
                    <div class="user-details">
                        <div class="user-name">Natalia F <span class="rating-inline">★★★★★</span>
</div>
                        <div class="verified-badge">
                            Compra Verificada <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" alt="Verified">
                        </div>
                    </div>
                </div>
                <div class="product-review">
                    <img class="product-image" src="https://placehold.co/80x80/EDEBFA/5C42F9?text=%20" alt="Producto">
                    <div class="reviewing">Compró <br><strong>Nombre del producto</strong>
</div>
                </div>
                <div class="description">Lo compré para regalo y fue todo un éxito. Volveré a comprar seguro.</div>
            </div>

        </div>
        <div id="v2-pagination"></div>
    </div>

    <script>
        class ResponsiveSlider {
            constructor(containerId, sliderId, paginationId) {
                this.container = document.getElementById(containerId);
                this.slider = document.getElementById(sliderId);
                this.pagination = document.getElementById(paginationId);
                this.cards = Array.from(this.slider.children);
                this.cardWidth = this.cards[0].offsetWidth + 10;
                this.totalWidth = this.cardWidth * this.cards.length - 10;
                this.containerWidth = this.slider.parentElement.offsetWidth;
                this.currentIndex = 0;
                this.isDragging = false;
                this.startX = 0;
                this.currentTranslate = 0;
                this.prevTranslate = 0;
                this.animationID = null;

                this.init();
            }

            init() {
                this.createPagination();
                this.addEventListeners();
            }

            updatePagination() {
                this.pagination.querySelectorAll('.v2-pagination-dot').forEach((dot, index) => {
                    dot.classList.toggle('active', index === this.currentIndex);
                });
            }

            goToSlide(index) {
                this.currentIndex = index;
                const maxOffset = Math.max(this.totalWidth - this.containerWidth, 0);
                const offset = Math.min(this.currentIndex * this.cardWidth, maxOffset);
                this.slider.style.transition = 'transform 0.5s ease';
                this.slider.style.transform = `translateX(-${offset}px)`;
                this.currentTranslate = -offset;
                this.prevTranslate = this.currentTranslate;
                this.updatePagination();
            }

            createPagination() {
                const totalSlides = this.cards.length;
                this.pagination.innerHTML = '';
                for (let i = 0; i < totalSlides; i++) {
                    const dot = document.createElement('div');
                    dot.classList.add('v2-pagination-dot');
                    dot.innerHTML = '&#8203;';
                    if (i === 0) dot.classList.add('active');
                    dot.addEventListener('click', () => this.goToSlide(i));
                    this.pagination.appendChild(dot);
                }
            }

            startDrag(event) {
                this.isDragging = true;
                this.startX = this.getPositionX(event);
                this.slider.style.transition = 'none';
                cancelAnimationFrame(this.animationID);
            }

            endDrag() {
                this.isDragging = false;
                const movedBy = this.currentTranslate - this.prevTranslate;
                if (movedBy < -50 && this.currentIndex < this.cards.length - 1) {
                    this.currentIndex++;
                }
                if (movedBy > 50 && this.currentIndex > 0) {
                    this.currentIndex--;
                }
                this.goToSlide(this.currentIndex);
            }

            drag(event) {
                if (this.isDragging) {
                    const currentPosition = this.getPositionX(event);
                    this.currentTranslate = this.prevTranslate + currentPosition - this.startX;
                    this.slider.style.transform = `translateX(${this.currentTranslate}px)`;
                }
            }

            getPositionX(event) {
                return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX;
            }

            addEventListeners() {
                this.slider.addEventListener('mousedown', (e) => this.startDrag(e));
                this.slider.addEventListener('touchstart', (e) => this.startDrag(e));
                this.slider.addEventListener('mouseup', () => this.endDrag());
                this.slider.addEventListener('touchend', () => this.endDrag());
                this.slider.addEventListener('mousemove', (e) => this.drag(e));
                this.slider.addEventListener('touchmove', (e) => this.drag(e));
            }
        }

        new ResponsiveSlider('v2-slider-container', 'v2-slider', 'v2-pagination');
    </script>

</body>

Nombre del snippet

Código

<body>

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Info Tabs</title>
    <style>

              .tabs-container {
                  max-width: 500px;
                  margin: 0 auto;
                  
                  border-radius: 10px;
                  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                  overflow: hidden;
              }
              .tabs-header {
                  display: flex;
                  gap: 10px;
              }
      .tab {
          flex: 1;
          padding: 8px 8px;
          text-align: center;
          font-weight: bold;
          cursor: pointer;
      background: linear-gradient(45deg, #1cbcc3,#1cbcc3, #4abf8f,#4abf8f 80%);
          color: #ffffff;
          max-width: 33.33%;
          box-sizing: border-box;
          align-items: center;
          display: flex;
          justify-content: center;
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
      font-size: 13px;
      transition: background-color 0.8s ease;
      }
              .tab.active {
                  background: #ffffff;
                  color: #1b3a57;
              }
              .tab-content {
                  padding: 5px 10px;
                  display: none;
      font-size: 13px;
      transition: opacity 0.5s ease;
              }
              .tab-content.active {
                  display: block;
          background: #fff;
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;
      opacity: 1;
              }
    </style>
  
  
    <div class="container page-width">
      <div class="tabs-container">
        <div class="tabs-header">
          <div class="tab active" onclick="showTabContent('when-to-take')">
            tab 1
          </div>
          <div class="tab" onclick="showTabContent('description')">pestaña 2</div>
          <div class="tab" onclick="showTabContent('ingredients')">pestaña 3</div>
        </div>
        <div id="when-to-take" class="tab-content active">
          <div>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
              non urna eu nisi pretium viverra.
            </p>
          </div>
        </div>
        <div id="description" class="tab-content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non
            urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Nullam non urna eu nisi pretium viverra.
          </p>
        </div>
        <div id="ingredients" class="tab-content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non
            urna eu nisi pretium viverra.
          </p>
        </div>
      </div>
    </div>

    <script>
      function showTabContent(tabId) {
          const tabs = document.querySelectorAll('.tab');
          const tabContents = document.querySelectorAll('.tab-content');
          tabs.forEach(tab => tab.classList.remove('active'));
          tabContents.forEach(content => content.classList.remove('active'));
          document.querySelector(`[onclick="showTabContent('${tabId}')"]`).classList.add('active');
          document.getElementById(tabId).classList.add('active');
      }
    </script>
  
</body>

Quiero los 57 completos

Pago único de ₡9.500 · descarga inmediata

Mejora la tasa de conversión de tu tienda.

El carrito no se abandona por el producto. Se abandona por dudas: envío, tiempo de entrega, garantía. Cada bloque del kit contesta una.

Antes

Después

Kit de Conversión vs. apps de Shopify

Lo mismo que hacen varias apps, en un solo pago.

	Nuestro Kit	Otras Apps
Pago único, sin mensualidad
Instalación en 5 minutos, sin desarrollador
57 bloques, elegís cuáles usar
Funciona en cualquier tema
No depende de que la app siga activa

Resultados

Lo que reportan las tiendas que ya instalaron el kit.

Con el kit instalado

91%

Notó menos abandono de carrito en la primera semana

87%

Recuperó en ventas lo que pagó por el kit, antes del mes

94%

Volvería a comprarlo para su próxima tienda

Un pago. El kit completo. Tuyo para siempre.

Si no lográs instalar el primer bloque, te devolvemos el dinero.

sell

Kit de conversión completo

₡ 9.500,00 pago único

Los 57 snippets en un solo archivo.

57 snippets de HTML y CSS listos para copiar

Vista previa de cada uno antes de usarlo

Botón de copiar en cada bloque — cero configuración

Traducidos al español y pensados para el mercado de acá

Funciona en cualquier tema de Shopify

Descarga inmediata apenas se confirma el pago

Comprar el Kit

preguntas / antes de comprar

Lo que la gente pregunta antes de pagar

check_box

¿Necesito saber programar?

No. El kit es una página que abrís en el navegador: cada snippet tiene un botón de Copiar. Lo pegás en tu tema y ya. Si te trabás, respondemos por correo.

check_box

¿Funciona con mi tema?

Sí. Son bloques de HTML y CSS que se pegan encima, no dependen del tema. Funcionan igual en Dawn, Refresh, Craft, Shrine, Impulse o Debut.

check_box

¿Es un pago único o una mensualidad?

Pago único. No hay renovación ni plan, y no hay que dejar una tarjeta guardada.

check_box

¿Esto reemplaza las apps que ya pago?

En varios casos sí: barras de stock, contadores, sellos, acordeones y sliders de reseñas son cosas por las que muchas tiendas pagan mensualidad. No reemplaza una app con base de datos propia, como reseñas verificadas o suscripciones.

check_box

¿Me va a poner lenta la tienda?

No debería. No hay librerías externas: cada bloque pesa unos pocos kilobytes y solo pegás los que vas a usar.

check_box

¿Puedo cambiarles los colores y los textos?

Sí, para eso son. El código va en claro y sin comprimir, así que cambiás colores, textos e imágenes directamente donde lo pegaste.

check_box

¿Cómo lo recibo?

Apenas se confirma el pago te llega el enlace de descarga al correo.

Menu

Tu carrito esta vacío

Tu carrito • 0 items

50+ snippets para que tu tienda Shopify venda más desde hoy

57

₡0

5 Min

0

Probá tres ahora mismo

Nombre del snippet

Nombre del snippet

Nombre del snippet

Mejora la tasa de conversión de tu tienda.

Antes

Después

Kit de Conversión vs. apps de Shopify

Resultados

Con el kit instalado

Un pago. El kit completo. Tuyo para siempre.

Kit de conversión completo

Lo que la gente pregunta antes de pagar

¿Necesito saber programar?

¿Funciona con mi tema?

¿Es un pago único o una mensualidad?

¿Esto reemplaza las apps que ya pago?

¿Me va a poner lenta la tienda?

¿Puedo cambiarles los colores y los textos?

¿Cómo lo recibo?