Esta función está disponible en todos los planes de Goodshuffle Pro.
1. Requisitos
Antes de comenzar:
Compra la Integración de Sitio Web desde la pestaña de Integraciones en Goodshuffle Pro.
Copia tu Clave Pública de Navegador desde la misma pestaña; la usarás en tu código de Webflow.
Puedes encontrar los fragmentos de código aquí.
Configuración en Webflow
Paso 1: Abre la Configuración del Proyecto en Webflow
Haz clic en el símbolo “W” en la esquina superior izquierda de tu página de Webflow y selecciona "Project Settings".
Descripción: Abre la Configuración del Proyecto de Webflow desde el panel de tu sitio.
Paso 2: Abre la Sección de Código Personalizado
Luego, haz clic en Custom Code en la Configuración del Proyecto.
Descripción: Selecciona la pestaña de Código Personalizado para agregar los scripts de integración.
3. Agrega los Scripts de Goodshuffle Pro
En la sección de Header de Código Personalizado, pega lo siguiente:
<script type="module" src="https://unpkg.com/@goodshuffle/[email protected]/dist/gspro-wc/gspro-wc.esm.js"></script> <script nomodule="" src="https://unpkg.com/@goodshuffle/[email protected]/dist/gspro-wc/gspro-wc.js"></script> <gspro-wishlist-config data-url="https://data.goodshuffle.com/vendor/YOUR-PUBLIC-WEBSITE-KEY" ></gspro-wishlist-config>
⚠️ Reemplaza YOUR-PUBLIC-WEBSITE-KEY por la Clave Pública de Navegador que copiaste antes.
Una vez agregado, haz clic en Save Changes.
Paso 4: Publica tu Sitio
Después de guardar el Código Personalizado:
Haz clic en Publish en la esquina superior derecha de Webflow.
Elige el/los dominio(s) donde quieres publicar.
Descripción: Publica tu sitio después de agregar el código personalizado.
💡 Si tienes varios dominios, prueba primero en un dominio de pruebas o demo.
Vista previa de tu sitio web
Haz clic en la Flecha de Salida junto a tu dominio para ver una vista previa de tu sitio con la Lista de Deseos.
Descripción: Usa la opción de vista previa para confirmar que la integración de la Lista de Deseos está activa.
Quitar la insignia “Made in Webflow” (Opcional)
Si quieres quitar la insignia de Webflow:
Ve a Project Settings → General.
Desplázate hacia abajo y desactiva Webflow Branding.
Haz clic en Save Changes.
Descripción: Desactiva la insignia de Webflow en la configuración general.
⚠️ No olvides publicar después de hacer cambios.
Mostrar galerías de artículos
Paso 1: Abre tu proyecto en Designer
Ve a tu Designer de Webflow para el sitio publicado.
Descripción: Abre el Designer de Webflow para agregar elementos incrustados.
Paso 2: Abre el Navegador
Haz clic en el panel de Navegador y localiza la sección donde quieres insertar la galería.
Descripción: Usa el Navegador para encontrar la sección correcta de la página.
Paso 3: Agrega un elemento Embed
Haz clic en Add → desplázate hasta Embed.
Luego, haz clic en 'Add' en la parte superior derecha y selecciona agregar un nuevo 'Embed'.
Nota: puede que tengas que desplazarte hacia abajo para ver la opción Embed.
Descripción: Agrega un elemento Embed donde quieras que aparezca la Galería de Artículos.
Paso 4: Inserta la etiqueta de Galería de Artículos
Para agregar una Galería de Artículos (más información aquí), pega este fragmento:
<gspro-item-gallery></gspro-item-gallery>
Luego haz clic en Save and Close.
💡 Puedes arrastrar la sección embed para ajustar los márgenes y el diseño según tu preferencia.
Descripción: Elemento embed de Galería de Artículos mostrando artículos de ejemplo.
Puedes aprender más sobre cómo un cliente usará la Lista de Deseos aquí.
Configurar filtros de inventario predeterminados
Para mostrar cierto inventario por defecto:
Haz clic en el icono de engranaje junto a tu elemento Embed.
Agrega instrucciones de búsqueda (por ejemplo, artículos con “Boda” en el título, descripción o etiqueta).
Guarda y haz clic en Publish.
Descripción: Usa el icono de engranaje para establecer filtros predeterminados en tu Galería de Artículos.
Puedes aprender más sobre cómo buscar artículos aquí.
¡Listo!
Una vez publicado, tu sitio de Webflow mostrará:
Sección de búsqueda y filtros
Listado de categorías
Galerías de artículos incrustadas donde las colocaste
🎉 ¡Listo! Tu integración de Goodshuffle Pro está activa.
¿Necesitas ayuda adicional?
¿Necesitas ayuda adicional? Haz clic en la burbuja azul de chat en la esquina inferior de tu pantalla para escribirle a nuestro equipo de soporte—¡estamos para ayudarte!
Aviso: Este artículo fue traducido usando IA. Si tienes preguntas o necesitas aclaraciones, contáctanos usando la burbuja de chat en la esquina inferior de tu pantalla.