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 necesitarás para el código en 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 con 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.
Previsualizar tu Sitio Web
Haz clic en la Flecha de Salida junto a tu dominio para ver una vista previa de tu sitio de Wishlist.
Descripción: Usa la opción de vista previa para confirmar que tu integración de Wishlist 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 y Galerías de Artículos
Paso 1: Abre tu Proyecto en Designer
Entra 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 Navigator y localiza la sección donde quieres insertar la galería.
Descripción: Usa el Navigator 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 que los márgenes y el diseño se ajusten a tu estilo.
Descripción: Vista de ejemplo de la Galería de Artículos incrustada.
Puedes aprender más sobre cómo un cliente usará la Wishlist aquí.
Configurar Filtros de Inventario Predeterminados
Para mostrar inventario específico 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
Listados por categoría
Galerías de artículos incrustadas donde las colocaste
🎉 ¡Éxito! Tu integración de Goodshuffle Pro está activa.
¿Necesitas ayuda adicional?
¿Necesitas ayuda adicional? Haz clic en la burbuja de chat azul en la esquina inferior de tu pantalla para escribirle a nuestro equipo de soporte—¡estamos para ayudarte!
Descargo de responsabilidad: 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.