Para conseguir una buena experiencia de usuario, algo muy recomendado es utilizar videos en la descripción de producto en tu tienda SHOPIFY. Es muy importante que tu cliente pueda tener la mejor referencia del producto que va a adquirir.
🎥Con un video puedes hacer una demostración de cómo se utiliza el producto, entre otras cosas, el cliente puede tener una imagen más real y saber si es realmente lo que está buscando. Un video es una muy buena opción para conseguir este objetivo.
En este artículo te daremos una guía detallada de cómo puedes agregar un video de YouTube en la descripción de tu producto en tu tienda Shopify.
🤖Pasos para agregar un video de YouTube en la descripción de producto de Shopify
Lo primero que debemos hacer, es agregar un campo de código liquid al bloque de secciones, para que puedas agregar lo que queramos dentro.
Crea un nuevo campo en el schema del bloque. Justo entre los tipos de texto enriquecido y bloque de página.
|
{
"type": "liquid", "id": "liquid", "label": "Liquid" }, |
Genera ese campo liquid agregando {{ block.settings.liquid }} junto con el otro contenido, dentro del div de contenido de acordeón.
| <div class="accordion__content rte" id="ProductAccordion-{{ block.id }}- {{ section.id }}">
{{ block.settings.content }} {{ block.settings.liquid }} {{ block.settings.page.content }} </div> |
🤖Hacer que el video sea responsive
Ahora puedes usar el código allí. Ya es posible generar la descripción del producto o los metacampos, o también puedes pegar el iframe del video allí.
Para que puedas agregar un iframe, que es demasiado grande, puedes realizar un ajuste incrustando un video en el tema de Shopify que estés utilizando.
Agrega esto en la descripción de su producto, publicación de blog o página entre las etiquetas <style> </style>.
O crea un archivo .css separado como custom.css y luego inclúyelo en theme.liquid. Entonces no necesitas las etiquetas de estilo.
|
.responsive-video {
aspect-ratio: 16 / 9; width: 100%; height: auto; } |
Ahora cuando insertas un iframe de youtube, solo agrega la clase de video responsive, class="responsive-video" dentro del HTML.
| <iframe class="responsive-video" width="560" height="315" src="https://www.youtube.com/embed/XstikgbeTPI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> |
👉Agregar un ícono de video al menú desplegable
Para agregar un icono de vídeo al menú desplegable debes primero abrir icon-accordion.liquid y agregar una nueva línea 'when' para agregar el SVG que va a renderizar ese icono en especial.
{%- when 'youtube' -%}
Justo debajo de esa línea de código, pega el código SVG (o tu propio SVG, pero asegúrate de que se ajuste a un cuadro de vista de 0 0 20 20).
Código SVG del icono de Youtube:
| <path d="M4.446 3.104h11.108c.945 0 1.807.388 2.432 1.013C18.612 4.74 19 5.601 19 6.55V13.45c0 .946-.388 1.807-1.014 2.433-.623.625-1.484 1.013-2.432 1.013H4.446c-.948 0-1.81-.388-2.434-1.012l-.039-.041C1.372 15.221 1 14.376 1 13.45V6.55c0-.945.388-1.806 1.012-2.431l.002-.002C2.641 3.491 3.501 3.104 4.446 3.104zm7.935 7.333c.435-.281.434-.594 0-.842l-3.488-2.429c-.355-.222-.724-.092-.714.371l.014 4.887c.03.502 .317.639 .739.407l3.45-2.394zm3.173-5.965H4.446c-.573 0-1.092.233-1.467.608l-.002.002c-.375.375-.608.894-.608 1.467V13.45c0 .558.221 1.066.579 1.438l.032.03c.377.377 .896.611 1.467.611h11.108c.571 0 1.091-.234 1.467-.611.378-.375.611-.894.611-1.467V6.55c0-.571-.234-1.091-.611-1.467-.375-.378-.894-.611-1.467-.611z"/> |
Para generar ese ícono, debes poder seleccionarlo en el menú desplegable de configuración del bloque. Entonces, nuevamente debes ir al schema y agregar Youtube como una opción de ícono.
|
{
"value": "youtube", "label": "Youtube" }, |
Ten en cuenta que el video que agregues a la descripción de tu producto le brinde a tu cliente un valor, ya sea porque tu producto necesita un video de demostración para su utilización o simplemente porque tienes un excelente video demostrando cómo y con qué tipos de materiales es elaborado el producto. También recomendamos no agregar videos demasiado largos ya que los consumidores no lo verán en su totalidad.
Lo interesante es también agregar contenidos de video similares a los que compartes en redes, por ejemplo tik tok.
Sabemos que para ejecutar este tutorial, debes tener mínimos entendimientos de la estructura del theme de shopify, y un poco de liquid, HTML y css, pero si no cuentas con el tiempo necesario para realizarla, solicita nuestra ayuda Cotiza una tarea aquí.