Scalapay proporciona una App nativa de Shopify.
Puedes encontrar todas las instrucciones para descargar e instalar Scalapay en el siguiente enlace: https://developers.scalapay.com/docs/shopify-plugin
La instalación de Scalapay en un sitio web Shopify consta de 2 pasos obligatorios.
Tendrás que instalar dos aplicaciones diferentes (una para el pago y otra para el widget en la página de producto y la página del carrito), ambos disponibles en la tienda de Shopify. Ambas le permitirán beneficiarse de toda la experiencia de pago Scalapay.
❤ Instalación y activación de la app de pago para tener Scalapay en el checkout
Necesitas instalar la App yendo a "Ajustes" del menú izquierdo de tu backend de Shopify. Vaya a Payments → Additional Payment Methods → Add payment method. Busca Scalapay, haz clic en él e instala la app.
Si es necesario, aquí está el enlace directo:
Scalapay Payment App for Shopify
📘PRODUCTO A ACTIVAR
Sólo el producto/los productos acordados según los términos contractuales pueden ser activados.
Para cualquier información o aclaración sobre los productos a activar, puede consultar los términos de su contrato, puede ponerse en contacto con su referente de ventas de Scalapay o con el Integration Manager.
Cuando haga clic en "Instalar", se abrirá una página de Scalapay y tendrá que introducir su clave API.
Esta clave API debe ser activada por un Integration Manager de Scalapay y sólo se puede encontrar en su Scalapay Merchant Portal en la sección "Desarrollador".
Si no es usted merchant de Scalapay, regístrese en nuestra página oficial Scalapay website.
📘 SCALAPAY EN EL CHECKOUT
Debido a las configuraciones de Shopify, en el checkout Scalapay aparecerá como disponible para cualquier importe y para cualquier dirección.
Si el cliente intenta realizar un pedido con un importe superior al autorizado o desde un país no permitido, aparecerá un mensaje de error y no se completará la compra.
No es posible personalizar el mensaje de error.
Shopify no permite ningún cambio en las configuraciones de pago.
Shopify - Scalapay widget
❤ Instalar la aplicación para el widget en la página del producto y la página del carro
Descargue aquí la aplicación Scalapay para instalar el widget en la página del producto y en la página del carrito: Scalapay widget for Shopify.
Vaya a la sección "Apps" de su backend de Shopify, haga clic en ella y escriba "Scalapay" en la barra de búsqueda de la parte superior de la página. Elige el resultado "On-Site Messaging" en la ventana emergente que aparecerá.
📘 COMPATIBILIDAD DEL TEMA SHOPIFY
Si su tema Shopify es compatible con la App "On-Site Messaging", puede hacer clic en los dos primeros botones para instalar el widget automáticamente en la página Producto y en la página Carrito.
Si su tema Shopify no es compatible, un mensaje en la página le informará. En este caso, haz clic en el botón "Use Embed App" y ve a nuestra guía para descubrir cómo instalar el widget en la página Producto y en la página Carrito.
❤ Configurar la App para el widget en la página de Producto
El widget Scalapay tiene que aparecer en la página de producto de todos los artículos en su sitio de comercio electrónico.
El texto y la ventana emergente son establecidos por Scalapay pero hay algunos campos que le permiten configurar el widget.
Aquí están los pasos para instalar el widget Scalapay.
Haga clic en "Add to Product Page".
Aparecerá el backend de su página de Producto.
En la columna de la izquierda están todas las secciones de la página de Producto incluyendo una llamada "Scalapay on-page message": representa el widget que aparecerá en la página de Producto y recoge sus configuraciones.
Si no aparece el apartado "on-site messagging" de Scalapay o quieres añadir uno nuevo, puedes añadirlo pinchando en Añadir bloque y luego en Apps y lo encontrarás.
Arrastre el bloque widget debajo de la sección Precio (el precio del producto).
Si haces clic en "Scalapay on-page message" aparecerá un nuevo menú. Podrá modificar los parámetros del widget.
Ingrese su Merchant Token
Vas a tener que ingresar tu Merchant Token in la sección "Merchant token" para mostrar los productos correctos de Scalapay en el widget. Encontrarás tu Merchant Token en tu Scalapay Merchant Portal, en la sección "Desarrollador".
Parámetro | Opciones | Descripción |
Merchant Token | El Merchant token tiene que ser agregado para poder mostrar los productos correctos de Scalapay | El Merchant token está disponible en Scalapay Merchant Portal en la sección “Desarrollador” |
DOM selectors for price |
| Añada todos sus selectores de precio (precio normal, precio especial, etc.) separados por comas ([". current-price-value",". price-selector-2"]). |
DOM selectors for granular positioning |
| Añade el selector CSS para cambiar la posición del widget Scalapay (copia y pega el código). |
Countries where widget is enabled | Set as default (full list of allowed countries): AT, BE, FI, FR, DE, IT, NL, PT, ES, YT, RE, GF, GP, MQ | La lista de los códigos de país donde se mostrará el on-site message. |
Hide below this price amount | Fijado por defecto: 5€ | Importe mínimo para mostrar el widget. Está establecido por defecto en 5€. Asegúrese de modificarlo en función de su contrato. |
Hide above this price amount | Fijado por defecto: 2000€ | Importe máximo para mostrar el widget. Asegúrese de modificarlo en función de su contrato. |
CSS Style to add to the on-page message |
| Personalizar el on-site message via CSS (e.g. font, tamaño, margen, posición) |
Si utilizas diferentes plantillas de página de producto en tu backend, tienes que asegurarte de añadir el widget de Scalapay en todas ellas: en este caso, utiliza la opción Embed Scalapay App for Shopify.
❤ Configurar la aplicación para el widget en la página del carrito
Después de instalar el widget en la página del producto, vuelva a la aplicación Scalapay y haga clic en "Add to Cart page".
Para configurar el widget en la página de la cesta, tendrá que añadir un producto al carrito en su backend.
En cuanto a la página de Producto, en la columna de la izquierda están todas las secciones de la página del Carrito incluyendo una llamada "Scalapay on-page message": representa el widget que aparecerá en la página del Carrito y recoge sus configuraciones.
Si no aparece la sección "on-page message" de Scalapay o quieres añadir uno nuevo, puedes añadirlo pinchando en Añadir bloque y luego en Apps y lo encontrarás.
Arrastre el bloque del widget debajo de la sección Checkout button.
Si hace clic en "Scalapay on-page message" aparecerá un nuevo menú. Podrá modificar los parámetros del widget.
Ingrese su Merchant Token
Vas a tener que ingresar tu Merchant Token in la sección "Merchant token" para mostrar los productos correctos de Scalapay en el widget. Encontrarás tu Merchant Token en tu Scalapay Merchant Portal, en la sección "Desarrollador".
Embed Scalapay App for Shopify
❤ Instala la aplicación
Se recomienda utilizar la aplicación Embed Scalapay para Shopify en los siguientes casos:
cuando el plugin de Scalapay no es compatible con el tema utilizado por el merchant en Shopify
cuando en el sitio web del comerciante no está visible el carrito de la página clásica y es necesario añadir el widget de Scalapay en el minicarrito
cuando hay muchas plantillas diferentes para las páginas de Producto
A continuación encontrará los pasos a seguir para instalar correctamente el widget de Scalapay a través de la App Embed.
1. En el backend de Shopify, en el menú de la izquierda, haga clic en Apps, escriba Scalapay en la barra de búsqueda que aparece en la parte superior de la página y seleccione Scalapay On-Site Messaging.
2. Click en Use Embed App.
3. Habilita el Scalapay Widget en el menu del lado izquierdo y haz click en el texto para modificar las configuraciones del widget.
❤ Configure la App
Ingrese su Merchant Token
Vas a tener que ingresar tu Merchant Token in la sección "Merchant token" para mostrar los productos correctos de Scalapay en el widget. Encontrarás tu Merchant Token en tu Scalapay Merchant Portal, en la sección "Desarrollador".
2. Después de añadir su token de comerciante, los ajustes del widget tienen que ser configurados para asegurarse de que está bien instalado y visible en el frontend.
3. Para mostrar el widget debajo del precio del artículo en la página del producto, haga clic con el botón derecho del ratón sobre el precio y, a continuación, seleccione Inspeccionar para buscar la posición correcta y para los selectores de precio y escriba la información en el cuadro Configuración de widgets en el lado izquierdo.
Como se explica más abajo en el cuadro "Configuraciones de widgets", es necesario seguir unas reglas y un orden precisos.
Cada elemento está separado por
|(es un carácter pipa, no una i en mayúsculas)El primer elemento es el tipo de widget (
productorcart);Luego sigue la posición del widget
Al final, los selectores de precio son indicados
Ejemplos
Para mostrar el widget en la página producto, debajo del elemento con la clase .price y el precio del producto se indica con un elemento de clase .price-product-amount:
product|.price|.price-product-amount
Para mostrar el widget en la página Producto, debajo del elemento con clase .precio y el precio del producto podría estar rebajado, por lo que hay dos precios para el mismo producto, indique primero el elemento rebajado (.price-product-amount-discounted) y el elemento con el precio completo (.price-product-amount-full):
product|.price|.price-product-amount-discounted|.price-product-amount-full
Para mostrar el widget en la página Carrito, debajo del elemento con un id #totals y el importe de la cesta se indica con un elemento de clase .total-amount:
cart|#totals|.total-amount
4. Para añadir el widget en la página del carrito, es necesario añadir un producto en el carrito (en este caso es un mini carrito), seleccionar el precio, pulsar el botón derecho del ratón, seleccionar Inspeccionar para buscar la posición correcta y los selectores de precio y escribir la información en la casilla Configuración de Widgets en la parte izquierda.
Después de escribir cart|, escriba la configuración de la posición (e.g. .cart-subtotal) y luego los selectores de precio (e.g. |#mini-cart-subtotal-val).
Por ejemplo: cart|.cart-subtotal|#mini-cart-subtotal-val