¿Cómo adapto el Trustbadge® en dispositivos móviles?

Según un estudio de Bitkom, el 50% de los consumidores alemanes compra desde el móvil y la tendencia va en aumento.  Para facilitarte la incorporación a esta tendencia, Trusted Shops ofrece varias posibilidades de visualización del Trustbadge® para que se adapten al diseño de la versión para móviles de tu tienda.

Te presentamos las diferentes variantes del Trustbadge y te explicamos cómo integrarlas.

La variante flotante

trustmark%2Breviews_copy_2.pngMicrosoftTeams-image__7_.png

La variante flotante es la predeterminada para anchos de pantalla reducidos como los de smartphones y tabletas. El Sello de Calidad es visible al acceder a la página y, gracias a su tamaño más reducido, deja a la vista una mayor superficie de tu página y libera un valioso espacio en la parte superior de la página.

Cuando el usuario desciende por la página, el Trustbadge se oculta y solo reaparece cuando vuelve hacia arriba. Puedes ver su funcionamiento si navegas con tu smartphone por nuestra tienda de demostración.

Ajustando el parámetro ’responsive’, variarás la posición y la apariencia del Trustbadge. En los siguientes apartados se explica cómo hacerlo.

Adapta la posición horizontal de la variante flotante

Por defecto, el Trustbadge se muestra en la esquina inferior izquierda de la pantalla, pero es posible centrarlo o alinearlo a la derecha. Accede a la configuración del Trustbadge y busca la siguiente línea de código:

'responsive': {'variant': 'floating'},

Y reemplázala por:

'responsive': {'variant':'floating', 'position':'right'},

Copia la coma final dentro del nuevo código. De lo contrario, el Trustbadge no se mostrará correctamente.

Si no encuentras el parámetro ‘responsive’, deberás añadirlo. Para ello, añade una línea en blanco debajo de

_tsConfig = {

Y copia la siguiente línea:

'responsive': {'variant':'floating', 'position':'right'},

En ‘position’ determinas la posición del Trustbadge: 'right' lo ubicará en la esquina inferior derecha;  'center’, en la parte inferior central y 'left' lo situará en la esquina inferior izquierda.

Eleva la posición de la variante flotante

Es posible elevar la posición del Trustbadge. Para ello, añade o edita el parámetro ‘responsive’ para que quede como a continuación:

'responsive': {'variant':'floating', 'position':'right', 'yOffset':'150'},

Copia la coma final dentro del nuevo código. De lo contrario, el Trustbadge no se mostrará correctamente.

'yOffset' determina la elevación del Trustbadge en número de píxeles. En el ejemplo anterior están preestablecidos 150 píxeles, pero es posible ajustarlo a las necesidades individuales de tu tienda.

La línea de código anterior ubicará el Trustbadge a la derecha. Si prefieres reubicarlo, cambia 'right' por 'left' o 'center', dependiendo de si lo prefieres a la izquierda o a la derecha.

Incluye las estrellas a la variante flotante

Por defecto, la variante flotante solo muestra el Sello de Calidad, pero se pueden añadir las estrellas de valoración. Para ello, reemplaza el valor 'floating'en el parámetro ‘responsive’ por 'floating_reviews'.

Si el parámetro ‘responsive’ no forma parte del código del Trustbadge, añade una nueva línea en blanco debajo de

_tsConfig = {

E inserta la siguiente línea de código:

'responsive': {'variant': 'floating_reviews'},

Copia la coma final dentro del nuevo código. De lo contrario, el Trustbadge no se mostrará correctamente.

Si también quieres cambiar la ubicación del Trustbadge, consulta los apartados anteriores sobre la posición horizontal y vertical de la variante flotante.

La variante topbar o barra superior

trustbadge-mobile-topbar_ES.jpg

También es posible ubicar el Trustbadge en la parte superior. En este caso, el Trustbadge tendrá forma de barra y mostrará el Sello de Calidad, las estrellas y tu nota media.  Hasta marzo de 2020, esta era la variante predeterminada.

Ubica el Trustbadge en la parte superior

Reemplaza el valor 'floating' en el parámetro ‘responsive’ por 'topbar'.

Si el parámetro ‘responsive’ aún no forma parte de la configuración de tu Trustbadge, añade una nueva línea en blanco debajo de

_tsConfig = {

E inserta la siguiente línea de código:

'responsive': {'variant': 'topbar'},      

Copia la coma final dentro del nuevo código. De lo contrario, el Trustbadge no se mostrará correctamente.

Puesto que la variante "topbar" ocupa todo el ancho de la página, no es posible cambiar su posición.

En el futuro dejaremos de ofrecer soporte técnico para la variante topbar. A partir de ese momento, solo se podrá utilizar la variante flotante.

Las variantes móviles personalizadas

Al igual que en la vista de escritorio, en la vista móvil también tienes la posibilidad de colocar el Trustbadge en cualquier lugar de tu tienda. Utiliza para ello una de las dos variantes personalizadas custom o custom_reviews.

helpcenter_BILD.png

La variante custom

trustmark%2Breviews_copy_2.pngreviews-only_copy_2.png

La variante custom_reviews (con y sin Sello de Calidad)

En este artículo explicamos cómo integrar las variantes personalizadas del Trustbadge en tu vista de escritorio: ¿Qué variantes del Trustbadge® existen y cómo las integro en mi tienda?

Con la ayuda del parámetro "responsive" y un elemento DIV, puedes integrar una de las dos variantes personalizadas en la vista móvil de tu tienda. Simplemente sigue las instrucciones que se indican a continuación.

Si lo deseas, también puedes colocar tu Trustbadge en la versión móvil en un lugar diferente al de la versión de escritorio.

Paso 1: Crear un elemento DIV

Para usar una de las dos variantes del Trustbadge custom y custom_reviews, debes crear primero un elemento DIV. Para ello, copia el siguiente código HTML en el sistema de tu tienda donde quieras que aparezca el Trustbadge. Las posibles posiciones serían, por ejemplo, la cabecera o el pie de página.

<div id="myMobileCustomTrustbadge" style="width:100px;height:50px"></div>

Las propiedades width y height permiten ajustar la anchura y la altura del Trustbadge. Simplemente reemplaza los valores numéricos de width (anchura) y height (altura) según tus necesidades. Ten en cuenta que la relación de aspecto original (anchura:altura) del Trustbadge es de 2:1 en la variante custom_reviews o de 1:1 en la variante custom.

Paso 2: Vincular el elemento DIV a la configuración del Trustbadge

Para que el Trustbadge aparezca en el lugar que deseas, debes conectar el elemento DIV creado en el paso 1 con la configuración existente del Trustbadge. Para ello, abre primero la configuración de tu Trustbadge y comprueba si el parámetro “responsive” forma ya parte del código. En este caso, deberías encontrar la siguiente línea de código dentro de la configuración de tu Trustbadge:

'responsive': {'variant': 'floating'},

Y reemplazarla por la siguiente línea de código:

'responsive': {'variant': 'custom', 'customElementId': 'myMobileCustomTrustbadge'},
Con esta línea de código activas la variante custom. Si prefieres utilizar la variante custom_reviews, debes sustituir el valor 'custom' de la propiedad 'variant' por 'custom_reviews'.

Si no encuentras el parámetro "responsive" en la configuración de tu Trustbadge, deberás crearlo. Para ello, debajo de la línea

_tsConfig = {

has de crear una nueva línea de código e insertar en esta posición el código indicado anteriormente.


¿Ha sido útil el artículo?

Usuarios a los que les pareció útil: 9 de 15