Guía de uso del Widget Editor

 

Required settings:

Estos parámetros son los que se han de configurar como mínimo para que el widget funcione. A continuación, detallamos los parámetros uno por uno:

1. Widget Id - El identificador único generado para este widget en particular. Usa el icono de copia en la derecha para copiarlo a tu portapapeles y enviarlo a tu equipo IT, o para copiarlo directamente en el módulo de Photoslurp que uses.

2. Campaign - La campaña en la que se ha asociado el widget. Esta se elige al crear el widget, por lo que no puede ser cambiada.

3. Widget type - Elige el tipo de widget que vas a crear. Las opciones disponibles son: carousel, gallery, circular y masonry. En la vista previa al lado derecho del editor podrás comprobar qué aspecto tienen.

4. Theme - Elige el tema que se aplicará al widget. Actualmente hay dos opciones, "modern" y "dark".

5. Photo size - Este parámetro especifica el tamaño del thumbnail usado por el widget.

6. Layout flexibility (Gallery/Masonry) - Elige entre tener tamaños de imagen adaptables o tener un tamaño de imagen fijo.

7. Photos per row (Gallery/Masonry) - Especifica cuantas fotos por fila quieres en tu widget o, en otras palabras, cuantas columnas.

 Filters:

Para aprovechar aún mejor tus widgets, tenemos disponibles una serie de filtros que pueden aplicarse para customizar el tipo de contenido que se mostrará:

1. Assigned only - Activar este parámetro garantiza que el widget mostrará únicamente el contenido que haya sido asignado como mínimo a un producto, y que éste se encuentre disponible en la tienda. Esto previene al widget de mostrar contenido que aún no ha sido enlazado a productos.

2. Strict products - Cuando este parámetro está activado y se envía un SKU de producto en el código del widget (dentro del parámetro "product id"), sólo se mostrarán en el widget aquellas imágenes en las que el producto asignado coincide con el SKU. Cuando el parámetro está desactivado y se envía un SKU de producto en el código del widget, se mostrarán primero aquellas imágenes que asociadas al SKU de producto establecido; y luego, el resto de imágenes de la campaña.

3. Rights cleared only - Activar este parámetro garantiza que el widget sólo muestre contenido del cual se te han otorgado derechos de imagen, o tu propio contenido.

4. In stock only - Este parámetro activa la sincronización de stock, de modo que sólo se muestre en el widget aquel contenido asignado a productos en stock. Activar esta opción no es recomendable en el caso de que en tu tienda se permita reservar productos fuera de stock.

5. Order photos - Selecciona el orden en el que aparecerá el contenido, las opciones actuales son "Default" (primero los más nuevos) y "Random". También existen las opciones "By conversions" y "By product types", que solo están disponibles para planes específicos de Photoslurp que requieren un suplemento adicional. La opción "By photos" muestra primero aquellas fotos que tienen mayor número de conversiones. Por lo tanto, requiere que el pixel tracker esté implementado para que el análisis de datos funcione correctamente. La opción "By product types" ordena las fotos a partir de los tipos de producto asignados al parámetro adicional "productType".

5. Order photos - Selecciona el orden en el que aparecerá el contenido, las opciones actuales son:

• Default: muestra primero el contenido más nuevo.
• Random: muestra el contenido en orden aleatorio.
• By conversions (*): muestra primero aquellas fotos que tienen mayor número de conversiones. Por lo tanto, es necesario que el pixel tracker esté implementado para que el análisis de datos funcione correctamente.
• By product types (*): ordena las fotos a partir de los tipos de producto asignados al parámetro adicional "productType".

Las opciones marcadas con un asterisco (*) son características avanzadas que podrían requerir una mejora para tu plan de Photoslurp. Contacta con el encargado de tu cuenta en Photoslurp en el caso que estés interesado en activar alguna de estas características.

6. Collection - Introducir un nombre de colección aquí hará que el widget sólo muestre contenido de esa colección en particular. Nota: El valor en este parámetro es sensible a mayúsculas/minúsculas, por lo que el nombre de la colección debe coincidir con el que se ha aplicado a las imágenes en la campaña.

7. Empty threshold - Sirve para especificar el umbral mínimo de contenido que se necesita de un producto para que el widget se muestre. Recomendamos permitir al widget que muestre otro contenido relacionado de la misma categoría del producto o campaña, en lugar de usar este parámetro.

 

Design and Look & Feel:

La segunda pestaña en la configuración del editor permite cambios en el diseño del widget. Aquí, cada elemento puede ser modificado, añadir fuentes customizadas, tamaños, colores, etc.

 

 Scroll Options (Carousel/Circular):

Las opciones de desplazamiento se pueden configurar para los widgets "carousel" y "circular":

1. Auto-scroll - Activa el desplazamiento automático para el carrusel, para dar una imagen más dinámica y llamar la atención al widget.

2. Orientation - La orientación del widget carrusel o widget circular se puede establecer como horizontal o vertical.

3. Auto-scroll interval - Establece el intervalo entre el auto-scroll en milisegundos.

 Gallery specific options:

Las siguientes opciones son específicas para el widget "gallery":

1. Varying thumb sizes - Este parámetro cambia la estructura de la galería, de forma que usa thumbnails de distintos tamaños dando lugar a un efecto de mosaico. Una de las opciones de galería más usadas.

2. Photos gap - Especifica el espacio entre los thumbnails de la galería en píxeles.

3. Auto-scroll limit - Por defecto, la galería está configurada para usar scroll infinito (límite 0), mostrando contenido automáticamente mientras el usuario siga desplazándose al final de la galería, hasta que no haya más contenido que mostrar. El valor que este parámetro espera es el número de páginas a cargar antes de mostrar el botón "Load more" para cargar más. El número de imágenes por página está establecido en el parámetro "Page size" en la sección "Miscellaneous".

4. Show "Load more" button - Hace aparecer el botón de "Load more".

 Analytics:

Los widgets recolectan datos sobre cómo los usuarios interactúan con ellos, los cuales son enviados a nuestra suite de análisis de datos. A continuación, diferentes opciones para customizar esta funcionalidad:

1. Enable Google Analytics - Permite a los widgets enviar también todos los eventos recolectados a tu Google Analytics.

2. UTM parameters - Cuando se activa, se añaden los parámetros UTM de Google Analytics (&utm_source=photoslurp&utm_medium=widget&utm_campaign=albumid&utm_content=productId) a todas las URL de producto.

3. Cross-domain tracking - Activa el seguimiento de datos entre dominios distintos.

4. Analytics cookie TTL - Permite cambiar el tiempo de vida de la cookie de datos que le damos a tus visitantes. No recomendamos cambiar este parámetro, que por defecto es de 30 días.

5. Cookie domain - Por defecto, las cookies de seguimiento se encuentran en el mismo dominio/subdominio en que el widget está integrado. Si estás usando múltiples subdominios (ej: tienda.tumarca.com, y para el checkout el visitante es redirigido a pagos.tumarca.com), rellena este valor con tu dominio raíz (tumarca.com) para asegurar el correcto funcionamiento de nuestros análisis de datos.

 Widget Submission:

Otra opción disponible para nuestros widgets es permitir a los visitantes subir contenido directamente desde tu sitio web, sin necesidad de usar ninguna red social. Aquí tenemos las opciones que permiten activar y configurar esta funcionalidad:

1. Show Submit Button - Esta opción activará un botón de "Submit" en la parte superior del widget, para que los visitantes puedan clicar y subir su contenido directamente desde tu sitio web. Clicar en este botón abrirá una ventana en la que el usuario puede elegir una fuente para su contenido y seleccionar aquello que quieren subir.

2. Image for loading photos URL - En el caso de que aún no exista contenido para un producto, en lugar de mostrar contenido de otros productos o directamente esconder el widget, existe una tercera opción: se puede mostrar una imagen que invite a los visitantes a subir su propio contenido. En este parámetro va la URL de la imagen que se quiere usar para este propósito.

3. Submission CSS URL - Te permite añadir un enlace a una librería de estilos CSS para poder personalizar el estilo visual el menú de carga de contenido.

4. Terms of Use link - Se requiere preguntar a todos los usuarios que suban contenido mediante el widget si aceptan tus términos y condiciones de uso antes de que su contenido sea enviado. En este parámetro va la URL de tu página de términos y condiciones.

 Lightbox:

El lightbox/popup que aparece cuando un visitante clica en un thumbnail de nuestros widgets se puede configurar con las siguientes opciones:

1. Lightbox loading - Este parámetro determina si el widget debe cargar las siguientes páginas de contenido cuando un usuario se está desplanzando desde dentro del lightbox. Cuando se muestra una galería de tamaño o número de thumbnails limitados (por ejemplo, la página inicial), puede ser inconveniente mostrar una galería que carga contenido adicional mientras el usuario se desplaza por ella. Este es el motivo más común sobre desactivar esta característica.

2. Auto-play videos - Activarlo hace que se reproduzca automáticamente cualquier contenido de vídeo del widget.

3. Social icons - Activa o desactiva los iconos para compartir en redes sociales del interior del lightbox.

4. CTA button - Esta opción permite mostrar un botón CTA debajo de la imagen de producto en la sección "Shop this look" del lightbox, que también redirige a la página de producto.

5. Visible products - Especifica el número de productos que se mostraran a la vez en la sección "Shop this look".

 Miscellaneous:

Algunas opciones adicionales que se pueden customizar:

1. Inline videos - Si se selecciona esta casilla se reproducirán los vídeos en la vista de miniaturas del widget en lugar de mostrar una imagen con la vista previa del contenido.

2. Same tab links - Activar este parámetro hace que cuando un usuario clique en un producto de la sección "Shop this look", la página de producto se cargue en la misma pestaña del navegador y no una nueva.

3. Thumb overlay - Permite activar o desactivar el overlay que aparece en cada thumbnail cuando se pasa el ratón por encima de estos. Dicho overlay muestra el nombre del autor, la red social de donde proviene el contenido y el número de likes y comentarios, si están disponibles.

4. Lazy load widget - Activa la funcionalidad "lazy load", en la que el widget no carga hasta que el usuario se desplaza al punto en que está integrado. Se recomienda usarlo en páginas con muchas imágenes que puedan ser propensas a cargar lento.
Para más información al respecto, visita el artículo en FAQ: '¿Qué es la Carga Diferida (Lazy Load)?'

5. Font loading method - Este ajuste permite definir de qué forma cargará y mostrará el navegador los ficheros de fuentes usados en el widget. El widget usará el valor seleccionado en la lista como valor de la propiedad CSS "font-display" de sus fuentes. 

6. Page size - El número de contenidos que se cargarán para cada página. Es recomendable cambiar este valor en función de la configuración de tu widget y tu web para sólo cargar el mínimo de fotos requeridas. Por ejemplo, si un carrusel de tu página de inicio solo puede mostrar un máximo de 6 thumbnails a la vez en cualquier resolución, el valor de este parámetro se debería establecer a 6 para no cargar imágenes adicionales de forma innecesaria, las cuales podrían no ser vistas por el usuario. Se pueden configurar distintos tamaños de página para sobremesa y móvil.

 

 Locale Specific Text:

Todos los textos dentro de nuestros widgets se pueden customizar mediante el editor en función del idioma. El menú de selección de idioma tendrá todos los idiomas que se han configurado para tu catálogo de productos, por lo que se puede customizar el texto por idioma y por localización.

Nota: Asegurate de que tu catálogo de productos esté correctamente configurado antes customizar los textos.

 

Estilos CSS:

En esta sección puedes añadir tu propio código CSS para modificar aspectos visuales que no se puedan modificar de otro modo.

 

Embed code:

En esta pestaña se encuentra el código HTML incrustado que te permitirá insertar el widget en tu página (sólo para implementaciones JavaScript). Simplemente copia y pega el código en tu página. Si no vas a implementar el widget mediante JavaScript, esta pestaña también incluye una lista de enlaces a guías para implementar en Magento, Prestashop, WooCommerce y Shopify.

Si estás implementando en JavaScript y necesitas más información acerca del posicionado de widgets o necesitas añadir parámetros adicionales para que estos funcionen, puedes ir aquí para ver como insertar widgets en tu tienda