Artículos en esta sección

Widget Carrusel para las Páginas de Producto

  • Actualización

Los widgets en las páginas de productos es de donde provienen el mayor número de conversiones, ya que proporciona una prueba social a los visitantes en el punto de compra. Este tipo de widget filtra el contenido que muestra asegurando que solo se muestran esas fotos/videos relacionados con el producto que el visitante está viendo.

Management note: El carrusel en la página del producto muestra solo el contenido relacionado con el producto específico que el visitante está viendo PERO, cuando no hay fotos relacionadas con un producto específico, todas las fotos aprobadas se mostrarán en el carrusel. Hay varias opciones explicadas a continuación en casos donde no hay fotos, o muy pocas, disponibles.

#Inspiration

Configuración de Widget

Crear un snippet llamado ‘photoslurp_product’ y pegar el siguiente código en él, teniendo en cuenta los parámetros obligatorios que deben ser personalizados:

<!-- Start Photoslurp Embed Code -->

<div id="photoslurpcarousel" class="ps-container">
  
    <script data-type="photoslurp">

    if(!photoSlurpWidgetSettings) { 

        var photoSlurpWidgetSettings = {};

    } 

    (function() { 

        photoSlurpWidgetSettings['photoslurpcarousel'] = { 

            widgetId: 'product page carousel', 

            widgetType: 'carousel', 

            albumId: yourCampaignID, 

            productId: [{% for variant in product.variants %}'{{variant.sku | strip_html | strip_newlines | escape |

replace: '&amp;', 'and' | replace: '&#38;', 'and' | replace: "..", ". " | replace: "

", " " | replace: "†̃", "&#39;" | replace: "â€TM", "&#39;" | replace: "&#8216;",

"&#39;" | replace: "&#8217;", "&#39;" | replace: "&#8217;", "&#39;" | replace:

"’", "&#39;" | replace: "“", "&#39;" | replace: "‘", "&#39;" |

replace: " ́", "&#39;" | replace: "“", "&#34;" | replace: "―", "&#34;" |

replace: "&#8211;", "-" | replace: "–", "-" | replace: "â€―", "-" |

replace: "–", "&mdash;" | replace: "—", "&mdash;" | replace: "%", "&#37;" |

replace: "©", "&copy;" | replace: "®", "&reg;" | replace: "™",

"&trade;" | replace: "£", "&pound;" | replace: "à ̄¿Â-", "&#42;" | replace:

"•", "&#42;" | replace: "―", "&#39;" | replace: "&#233;", "e" |

replace: "é", "e" | replace: "à ", "a" | replace: "Ã3", "o" | replace: "Ãa", "e" |

replace: "Ø", "O" | replace: "&#8482;", "" | replace: "&#174;", "" }}',{% endfor %}], 

            lang: '{{ shop.locale }}', 

            pageLimit: 7,

            strictProducts: false

        };

    var script = document.createElement('script'); 

    script.async = true; 

    script.src = '//static.photoslurp.com/widget/v3/widget_loader.js'; 

    var entry = document.getElementsByTagName('script')[0]; 

    entry.parentNode.insertBefore(script, entry); 

})();

</script>

</div>

<!-- End Photoslurp Embed Code -->

Insertar el widget en la página de producto 

Dirígete de nuevo a Online Store -> Themes -> Actions -> Edit code y localiza el archivo product-template.liquid en el apartado "Sections". Pulsa en el nombre del archivo para editarlo e incluye la siguiente línea a la altura del código en que quieras mostrar el carrusel.

{% include 'photoslurp_product' %}

Ahora el carrusel debería mostrarse en las páginas de producto. A continuación se muestran una serie de parámetros adicionales que permiten personalizar el comportamiento del widget.

Configuración del comportamiento del widget de página de producto cuando la cantidad de imágenes es insuficiente

Hay una serie de opciones de configuración para decidir cómo se desea manejar una situación en la que no hay / sólo unas pocas fotos relacionadas con un producto, explicadas a continuación.

  1. addPhotosImg (url) - URL de una imagen que se mostrará en el caso de que aún no haya imágenes asignadas al producto mostrado en la ficha. Recomendamos mostrar una imagen estilo "banner" invitando a los usuarios a postear sus imágenes.
  2. emptyThreshold (integer) – establece el número minimo necesario de imágenes asignadas al producto para que se muestre el widget "carousel".
  3. strictProducts (true/false) – solo muestra las imágenes relacionadas con el producto correspondiente y rellena el resto con otras fotos aprobadas.

Parámetros Obligatorios

1. widgetContainerId (texto) - ID del elemento HTML en el que se mostrará el widget.
Por ejemplo, para un contenedor con el marcado HTML <div id="photoslurp_container"> el parámetro se establecerá de la siguiente forma:
widgetContainerId: "photoslurp_container",
2. widgetId (texto) - nombre que permite distinguir de forma unívoca esta instancia del widget. Esto permite a la plataforma Photoslurp discriminar los datos estadísticos de uso de cada uno de los widgets configurados en la tienda, y al usuario le facilitará el poder identificar cada widget en el panel de analítica de Photoslurp. Una forma práctica de nombrar los widgets es indicando la página en que se van a mostrar. Por ejemplo "Producto".

Otros parámetros relevantes para el widget carrusel en las páginas de producto:

1. widgetType (texto) - se configura como "carousel".
2. albumId (número) -  el número ID de la campaña que se desea usar. Este es el número que enviamos en los emails de bienvenida a la plataforma.
3. theme (texto) - establece el tema de la plantilla utilizado para el widget. Las opciones disponibles son: "retro", "modern", y "dark".
4. productId (texto / matriz de cadenas de texto) - se emplea únicamente en las páginas de producto, y permite mostrar sólo aquellas imágenes relacionadas con el producto que se muestra en la ficha. Acepta valores individuales o múltiples productos en una matriz [‘product1’,’product2’] 5. lang (text) -puede ser cualquier formato de código de idioma (en, en-us, en_US) y debe ser el código de idioma utilizado en la tienda online. Por lo tanto, debe coincidir con el que se ha establecido en el catálogo de productos importado a la plataforma Photoslurp.
6. pageLimit (número) - número de imágenes que se mostrarán por página, tanto en el modo galería como en el modo "carrusel".
7. showSubmit (true/false) - habilita la opción para los visitantes de la tienda de subir sus imágenes desde el propio widget. Cuando el valor se establece en true se muestra el botón ‘Submit’ en la esquina superior derecha de la galería o carrusel. 
8. submitText (texto) - texto que se muestra en el botón "Submit".
9. addPhotosImg (texto) - URL de una imagen que se mostrará en el caso de que aún no haya imágenes asignadas al producto mostrado en la ficha. Recomendamos mostrar una imagen estilo "banner" invitando a los usuarios a postear sus imágenes.
10. randomOrder (true/false) - si su valor se establece en true muestra las imágenes ordenándolas de forma aleatoria.
11. noteAddPicsText (texto) - texto mostrado en la parte superior de la galería o carrusel. Este texto servirá para invitar a los clientes a participar en la comunidad de la marca con sus publicaciones en redes sociales, y a interactuar con las imágenes mostradas para descubrir los productos relacionados.
12. socialIcons (true/false) - habilita los iconos de las redes sociales en el lightbox, permitiendo a los usuarios compartir las imágenes en las redes sociales.
13. tocLink (texto) - enlace a la página de términos y condiciones que los usuarios deben conocer antes de subir imágenes directamente desde los widgets de la tienda.
14. shopThisLookText (texto) - este texto se añade sobre la imagen de los productos en el Lightbox.

Parámetros avanzados relevantes para el widget carrusel en las páginas de producto:

1. enableGA (true/false) - habilita Google Analytics. Cuando se configura; true, todos los eventos de las métricas se enviarán a la propiedad Google Analytics ya habilitada en la página.
2. initDelay (integer) - en el caso de que otros elementos de la página interfieran con el widget de Photoslurp, se puede establecer aquí un valor en mili-segundos para retrasar su carga y evitar interferencias.
3. ctaButton (string) - agrega un botón CTA debajo de la imagen de producto que se muestra en el lightbox.
4. thumbOverlay (true/false) - habilita el efecto mouseover que muestra los detalles del autor sobre las imágenes en miniatura.
5. autoScrollCarousel (true/false) - habilita la rotación automática de las imágenes en el modo "carousel".
6. submissionformCSSURL (URL) - permite habilitar la URL de un archivo CSS que Photoslurp ha configurado para un cliente y así personalizar el uploader.
7. inStockOnly (true/false) - solo muestra las imágenes relacionadas a los productos que están en stock.
8. strictProducts (true/false) - solo muestra las imágenes relacionadas con el producto correspondiente y rellena el resto con otras fotos aprobadas. Se usa con el parámetro product_id.
9. emptyThreshold (integer) - establece el número mínimo necesario de imágenes asignadas al producto para que se muestre el widget Carousel. Se usa con el parámetro product_id.
10. rightsClearedOnly (true/false) - solo muestra las imágenes a las que se le ha concedido los derechos de autor.
11. assignedOnly (true/false) - solo muestra las imágenes a las que se les ha asignado un producto.
12. visibleProducts (integer entre 2-6) - configura el número de productos que desea se muestren simultáneamente en el lightbox cuando varios productos han sido asignados a una misma imagen.
13. utmParams (true/object) - cuando se configura como true todas las URLs de productos se agregarán parámetros UTM de Google Analytics. Este parámetro también admite un objeto con valores personalizados para cada parámetro UTM. Por ejemplo: utmParams: {'utm_medium':'test'}

(&utm_source=photoslurp&utm_medium=widget&utm_campaign=albumid&utm_content=productId)

14. postedByText (string) - personaliza el texto "Posted by" cuando el parámetro thumbOverlay está activo. Este parámetro también acepta un objeto con valores customizados para cada parámetro UTM.
15. viewAndShopText (string) - personaliza el texto "View and Shop" cuando el parámetro thumbOverlay está activo.