Popup informativo

Instalación

Para instalar el pop up informativo es necesario contar con la versión 2.0 de Shopify, en caso de no contar con esta versión, favor de contactar a atención a cliente para poder instalar el modal de otra manera.

El método de pago debe de estar previamente instalado para poder completar la configuración de la aplicación con los cuales se desplegará el Modal Informativo.

La aplicación se encuentra en el siguiente link Atrato Pago Modal.

Video de instalación

Colocar el modal informativo

Video para colocar el modal informativo

Para colocar el modal informativo dentro de nuestro tema nos debemos de dirigir a:

Online Store (Tienda en Linea)
Theme (Temas)
Customize (Editar)

Imagen de referencia para editar un tema.

Una vez que nos encontremos desde la sección de editar el tema, nos abrirá una vista con nuestra tienda, después deberemos navegar para ver el detalle de cualquier producto dentro del tema.

Cuando nos encontremos dentro de esta sección tendremos que ubicar las siguientes secciones:

Product Information (Información de Producto)
Add Block (Agregar Bloque)
Atrato Pago Modal

Una vez que se haya agregado el bloque, se puede colocar en cualquier parte de tema siempre y cuando se encuentre en la sección de información de producto.

Para poder cambiarlo de lugar se tiene que usar los tres puntos juntos a la aplicación de Atrato Pago modal (1), y se podrá tener una visualización de cómo se vería en su página

🚧
Video para temas no compatibles con la aplicación de Atrato

  <atrato-bnpl-widget-info
    data-sandbox="false"
    data-plataform="shopify"
>
  </atrato-bnpl-widget-info>
  <script id="atrato-information-script" type="text/javascript" src="https://app.atratopago.com/ecommerce_plugin/v3/atratobnplWidgetInfo.js?codeStore={{shop.name}}" defer="defer"></script>

Personalizar leyenda de producto

Para poder configurar el modal la leyenda del producto se tiene que hacer dentro del Store View como se muestra indicó anteriormente.

Debajo de la configuración del modal se encuentra la configuración de la leyenda del producto, que incluye atributos con los cuales se puede cambiar el estilo de la leyenda que se despliega en el detalle del producto.
Los atributos a configurar son los siguientes:

Id del comercio: Este campo se encuentra en tu panel de partner en atratopago. En la sección de API.
Color: El color con de la leyenda de Atrato puede aceptar texto como black, white o colores hexadecimales. Ejemplo #ffffff
Color del logo de Atrato: Para personalizar el color del logo de Atrato puede ser modificado de la misma manera que la leyenda. Ejemplo #8A8AFF
Tamaño de la leyenda: Modifica el tamaño de la fuente de la leyenda. Ejemplo 1rem.
Tamaño del precio: Modifica el tamaño de la fuente del precio. Ejemplo 1rem.
Font Family: Cambia el tipo de letra (Font Family) de la leyenda de Atrato (El tipo de letra debe de estar dentro de tu página de e-commerce). Ejemplo Merienda

Personalizar popup informativo

Una vez instalada la aplicación y haber otorgado los permisos para usar la aplicación, se desplegará la siguiente pantalla, donde se puede elegir entre el ambiente de producción y el de sandbox.

Versión : Puede indicar una de las siguientes versiones: 1.0, 2.0 ó 3.0.
Modal : Los valores a configurar son: 1, 2, 3, 4,ó 5. Solo disponible para la versión 3.0
Style : Solo aplica para la versión 2.0. Existen 2 estilos de fondo diferentes, una con fondo claro y la otra con fondo oscuro que se configuran como: dark o light.
Parcialidades : Se configura indicando tres parcialidades para el cálculo demostrativo de los pagos ejem: 3,9,12.
Color de fondo : Color del fondo de la modal. Solo disponible para la versión 3.0.
Color de títulos : Color del título de la modal. Solo disponible para la versión 3.0.
Color de texto : Color del texto de la modal. Solo disponible para la versión 3.0.
Color de los iconos : Color de los iconos de la modal. Solo disponible para la versión 3.0.
Font family : Tipo de letra (Font Family) Debe de ser un font disponible en Google fonts. Solo disponible para la versión 3.0.
Link a página informativa : Enlace para conocer más información: "https://......". Solo disponible para la versión 3.0.
Partner logo : Logo del Partner: "https://......". Solo disponible para la versión 3.0.
Imagen : (Para el modal 4): "https://......". Solo disponible para la versión 3.0.

Versión
Por el momento se cuentan con 3 versiones de la modal informativa y para una mejor personalización se cuentan con una serie de atributos que se pueden utilizar de manera dinámica.

-Versión 1.0 : Solo incluye una modal única.
-Versión 2.0 : Incluye dos estilos de modal dark y ligth, se obtienen indicando el estilo en el atributo style .
-Versión 3.0 : Incluye 5 tipos de modal diferente: modal 1,2,3,4 y 5, se obtienen indicando el número en el atributo modal.

Versión 1.0