¿Cómo puedo adaptar la visualización del Trustbadge en el móvil?

¿Todavía no has integrado el Trustbadge? Entonces continua al siguiente enlace: Integra a Trusted Shops en tu tienda y comprueba si tenemos algún plugin disponible para el software de tu tienda online, en caso contrario realiza la integración estándar siguiendo estos pasos: ¿Cómo puedo integrar el Trustbadge® en mi tienda sin un plugin?
En el artículo enlazado arriba (¿Cómo puedo integrar el Trustbadge® en mi tienda sin un plugin? ) encontrarás el código del Trustbadge, que es la base para todos los ajustes descritos en el siguiente texto.

Puedes configurar la visualización móvil del Trustbadge independientemente de la visualización en la vista de escritorio.

Dentro de la integración estándar, el Trustbadge móvil está por defecto configurado de la siguiente manera:

  • El Trustbadge muestra tus estrellas de valoración recopiladas y, tras la certificación, tu Sello de Calidad.
  • El Trustbadge se muestra en el lado izquierdo de la pantalla.
  • El Trustbadge se muestra 10 píxeles por encima del borde inferior de la pantalla.

Obviamente puedes adaptar la configuración a tus requisitos individuales. En este artículo te explicamos cómo a través del código del Trustbadge® puedes...

¿Cómo puedo visualizar el Trustbadge móvil de otra forma?

Dentro de la integración estándar, el Trustbadge muestra tus estrellas de valoración recopiladas y, tras la certificación, tu Sello de Calidad.

01_ES.png

Con la ayuda del código del Trustbadge, tienes tres posibilidades para modificar la visualización del Trustbadge:

  • Puedes ocultar las estrellas de valoración recopiladas y mostrar solo tu Sello de Calidad.
    02_ES.png
  • También puedes utilizar la variante de escritorio del Trustbadge en la vista móvil de tu página web.
    03_ES.png
  • En la vista móvil puedes utilizar la variante de barra superior del Trustbadge.
    04_ES.jpg

Ocultar las estrellas de valoración

  1. Dentro del código del Trustbadge encontrarás la siguiente línea de código:
    data-mobile-disable-reviews="false"
  2. Sustituye esa línea de código por la siguiente:
    data-mobile-disable-reviews="true"

De este modo, habrás ocultado correctamente las estrellas de valoración en la vista móvil.

Utilizar la variante de escritorio del Trustbadge en la vista móvil

  1. Dentro del código del Trustbadge encontrarás la siguiente línea de código:
    data-disable-mobile="false"
  2. Sustituye esa línea de código por la siguiente:
    data-disable-mobile="true"

De este modo, utilizarás la variante de escritorio del Trustbadge también en la vista móvil.

Utilizar la variante de barra superior del Trustbadge en la vista móvil

  1. Dentro del código del Trustbadge encontrarás la siguiente línea de código:
    data-mobile-enable-topbar="false"
  2. Sustituye esa línea de código por la siguiente:
    data-mobile-enable-topbar="true"

De este modo, en la vista móvil utilizarás la variante de barra superior del Trustbadge.

La variante de barra superior del Trustbadge está colocada de forma fija en el borde superior de la pantalla. No puedes cambiar este posicionamiento.

¿Cómo puedo colocar el Trustbadge móvil en otro lugar?

Dentro de la integración estándar, el Trustbadge móvil se muestra en el lado izquierdo de la pantalla y 10 píxeles por encima del borde inferior de la pantalla.

Con ayuda del código del Trustbadge puedes...

...mover el Trustbadge móvil horizontalmente del borde izquierdo de la pantalla al centro o a la derecha.

... desplazar el Trustbadge móvil verticalmente hacia arriba o hacia abajo.

... colocar el Trustbadge móvil de forma flexible en tu sitio web.

Colocar el Trustbadge en el borde derecho de la pantalla o en el centro

  1. Dentro del código del Trustbadge encontrarás la siguiente línea de código:
    data-mobile-position="left"
  2. Sustituye esa línea de código por una de las siguientes:
    - Si quieres colocar el Trustbadge en el lado derecho:
    data-mobile-position="right"
    - Si quieres colocar el Trustbadge en el centro:
    data-mobile-position="center"

De esta forma, habrás colocado el Trustbadge correctamente en el borde derecho de la pantalla o en el centro.

Desplazar el Trustbadge hacia arriba o hacia abajo

  1. Dentro del código del Trustbadge encontrarás la siguiente línea de código:
    data-mobile-y-offset="0"
  2. Sustituye el 0 por el número de píxeles que debe desplazarse el Trustbadge hacia arriba o hacia abajo.

Dos ejemplos:

  • ¿Deseas desplazar el Trustbadge 5 píxeles hacia arriba? Entonces utiliza la siguiente línea de código:
    data-mobile-y-offset="5"
  • ¿Deseas desplazar el Trustbadge hacia abajo? Entonces utiliza valores negativos. Para desplazar el Trustbadge 5 píxeles hacia abajo utiliza la siguiente línea de código:
    data-mobile-y-offset="-5"
    Utiliza únicamente valores de hasta -10.

Con ello, habrás desplazado correctamente el Trustbadge hacia abajo o hacia arriba.

Colocar el Trustbadge de forma flexible en tu página web

En la vista móvil de tu sitio web, además de la variante estándar del Trustbadge descrita hasta ahora, también puedes integrar la variante custom (personalizada).

La variante personalizada se diferencia de la variante estándar en tres puntos:

  1. Su aspecto es diferente al de la variante estándar. Aquí puedes ver la variante personalizada:
    05_ES.png  06_ES.png
         (con estrellas de valoración)                                             (sin estrellas de valoración)
  2. Puedes colocar la variante personalizada en tu sitio web de forma totalmente flexible.
  3. Puedes modificar el tamaño de la variante personalizada.

De forma predeterminada, la variante personalizada en la vista móvil tiene una anchura de 156 píxeles y una altura de 78 píxeles.

A continuación te explicamos cómo cambiar el tamaño del Trustbadge en la vista móvil. ¿Estás de acuerdo con los valores estándar mencionados anteriormente? Entonces omite los dos pasos siguientes y continúa con el paso 3.

  1. Dentro del código del Trustbadge encontrarás la siguiente línea de código:
    data-mobile-custom-width="156"
  2. Sustituye el 156 por el número de píxeles que quieres establecer como anchura del Trustbadge.

El número de píxeles que puedes seleccionar aquí depende de si has ocultado las estrellas de valoración en la vista móvil.

  • ¿Has ocultado las estrellas de valoración? Entonces selecciona un número de píxeles entre 32 y 58.
  • ¿No has ocultado las estrellas de valoración? Entonces selecciona un número de píxeles entre 100 y 500.

El número de píxeles para la altura del Trustbadge resulta automáticamente del ancho que hayas seleccionado. No tienes que establecerlo tú.

  1. Dentro del código del Trustbadge encontrarás la siguiente línea de código:
    data-mobile-enable-custom="false"
  2. Sustituye esa línea de código por la siguiente:
    data-mobile-enable-custom="true"
  3. Abre el código fuente de tu página web.
  4. Coloca la siguiente línea de código en la posición de tu página web en la que debe aparecer el Trustbadge:
    <div id="trustbadgeCustomMobileContainer"></div>

Las posibles posiciones serían, por ejemplo, la cabecera o el pie de página.

De este modo, habrás integrado correctamente el Trustbadge en el lugar que hayas elegido en tu página web.

¿Cómo puedo desactivar el modo Fade Out en el Trustbadge móvil?

En la vista móvil, el modo Fade Out (desaparición progresiva) está automáticamente activado. En este modo, el Trustbadge se muestra en la parte superior de cada página. Sin embargo, desaparecerá lentamente cuando tus clientes se desplacen hacia abajo. Volverá a aparecer cuando tus clientes vuelvan a la parte superior de la página. Puedes desactivar el modo Fade Out para que no desaparezca el Trustbadge.

  1. Dentro del código del Trustbadge encontrarás la siguiente línea de código:
    data-mobile-enable-fadeout="true"
  2. Sustituye esa línea de código por la siguiente:
    data-mobile-enable-fadeout="false"

De este modo habrás activado correctamente el modo Fade Out en la vista móvil.


¿Ha sido útil el artículo?

Usuarios a los que les pareció útil: 13 de 25