¿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

custom-tb.pngMobile_custom_device_TB.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.

 


¿Ha sido útil el artículo?

Usuarios a los que les pareció útil: 4 de 5