Vai al contenuto principale

Shopify

Come integrare Scalapay in Shopify

Aggiornato questa settimana


Scalapay fornisce un'applicazione nativa di Shopify.


Puoi trovare tutte le istruzioni per scaricare e installare Scalapay al seguente link: https://developers.scalapay.com/docs/shopify-plugin



L'installazione di Scalapay su un sito web Shopify consiste in 2 passaggi obbligatori.

È necessario installare due diverse App (una per il checkout e una per il widget sulla pagina del prodotto e del carrello), entrambe disponibili su Shopify Store. Esse ti consentiranno di beneficiare dell'intera esperienza di pagamento di Scalapay.



Installazione e attivazione dell'applicazione di pagamento per avere Scalapay al checkout

È necessario installare l'applicazione andando su "Impostazioni" nel menu a sinistra del backend di Shopify. Vai su Pagamenti → Metodi di pagamento aggiuntivi → Aggiungi metodo di pagamento. Cerca Scalapay, cliccaci sopra e installa l'applicazione.

Se necessario, ecco il link diretto:

📘PRODOTTO DA ATTIVARE

È possibile attivare solo i prodotti concordati nei termini contrattuali.

Per qualsiasi informazione o chiarimento sui prodotti da attivare, è possibile consultare i termini del contratto, contattare il rappresentante commerciale Scalapay o l'Integration Manager.


Install the Scalapay App to have Scalapay at checkout


Quando si clicca su "Installa", si apre una pagina di Scalapay e si deve inserire la propria chiave API.
Questa chiave API deve essere attivata da un Integration Manager di Scalapay e può essere trovata solo sul vostro Scalapay Merchant Portal nella sezione "Sviluppatore".

Se non sei un merchant di Scalapay, registrati sul nostro sito ufficiale Scalapay website.


Enter you API key to activate Scalapay at checkout



📘SCALAPAY AL CHECKOUT

Per via delle configurazioni di Shopify, al momento del checkout Scalapay apparirà come disponibile per qualsiasi importo e per qualsiasi indirizzo.

Se il cliente tenta di effettuare un ordine con un importo superiore a quello autorizzato o da un paese non consentito, verrà visualizzato un messaggio di errore e l'acquisto non verrà completato.

Non è possibile personalizzare il messaggio di errore.

Shopify non consente di modificare le configurazioni di checkout.


Shopify - Scalapay widget

Installazione dell'applicazione per il widget nella pagina del prodotto e nella pagina del carrello.

Scarica qui l'App Scalapay per installare il widget nella pagina del prodotto e del carrello: Scalapay widget per Shopify.

Vai nella sezione "Apps" del vostro backend di Shopify, cliccaci sopra e digita "Scalapay" nella barra di ricerca in cima alla pagina. Scegli il risultato "Scalapay On-Site Messaging" dal pop-up che apparirà.


Install the App to have Scalapay on Product page and Cart page



📘 COMPATIBILITÀ DEL TEMA SHOPIFY

Se il tuo tema Shopify è compatibile con l'app di Scalapay On-site messaging, puoi cliccare sui primi due pulsanti per installare automaticamente il widget nella pagina del prodotto e nella pagina del carrello.

Se il tuo tema Shopify non è compatibile, un messaggio nella pagina ti informerà. In questo caso, clicca sul pulsante "Use Embed APP" e consulta la nostra guida per scoprire come installare i widget nella pagina del Prodotto e nella pagina del Carrello.

Install the App to have Scalapay on Product page and Cart page




Configurazione dell'applicazione per il widget nella pagina del prodotto

Il widget di Scalapay deve apparire nella pagina del prodotto di tutti gli articoli del tuo sito di eCommerce.

Il testo e il pop-up sono impostati da Scalapay, ma ci sono alcuni campi che consentono di configurare il widget.

Ecco i passaggi per installare il widget di Scalapay:

  • Fai clic su "Add to Product page".

  • Verrà visualizzato il backend della pagina del prodotto

  • Sulla colonna di sinistra sono presenti tutte le sezioni della pagina del prodotto, tra cui una chiamata "Scalapay on-page message": rappresenta il widget che apparirà nella pagina del prodotto e ne raccoglie le configurazioni.

  • Se la sezione "Scalapay on-page message" non appare o se si desidera aggiungerne una nuova, è possibile aggiungerla facendo clic su Add block e poi su App e la troverai nella lista.



  • Trascina il blocco del widget sotto alla sezione Prezzo (il prezzo del prodotto).

  • Facendo clic su "Scalapay on-page message" appare un nuovo menu. Sarà possibile modificare i parametri del widget.

  • INSERISCI IL TUO MERCHANT TOKEN
    Per visualizzare i corretti prodotti di Scalapay sul widget, dovrai inserire il tuo Merchant Token nella sezione Merchant Token. Troverai il tuo Merchant token nel tuo Scalapay Merchant Portal nella sezione "Sviluppatore".

Scalapay widget configurations on Shopify backend


Parametri

Opzioni

Descrizione

Merchant Token

Il token Merchant deve essere aggiunto per visualizzare i corretti prodotti di Scalapay.

Il Merchant token è disponibile nello Scalapay Merchant Portal nella sezione "Sviluppatore".

DOM selectors for price

Aggiungi tutti i selettori di prezzo (normal price, special price etc.) separati da una virgola ([". current-price-value",". price-selector-2"]).

DOM selectors for granular positioning

Aggiungi il selettore CSS per modificare la posizione del widget di Scalapay (copia e incolla il codice).

Countries where widget is enabled

Impostato come predefinito (elenco completo dei Paesi ammessi): AT, BE, FI, FR, DE, IT, NL, PT, ES, YT, RE, GF, GP, MQ

L'elenco dei codici paese in cui verrà visualizzato il widget.

Hide below this price amount

Impostato come predefinito: 5€

Importo minimo per visualizzare il widget. È impostato di default a 5€. Assicurati di modificarlo in base al tuo contratto.

Hide above this price amount

Impostato come predefinito: 2000€

Importo massimo per la visualizzazione del widget. Assicurati di modificarlo in base al tuo contratto.

CSS Style to add to the on-page message

Personalizza il widget sul sito tramite CSS (e.g. font size, margin, position)


Se si utilizzano diversi modelli di pagina Prodotto nel backend, è necessario assicurarsi di aggiungere il widget di Scalapay in tutti: in questo caso, utilizza l'Embed Scalapay App for Shopify.



Configurazione dell'applicazione per il widget nella pagina del carrello

Dopo aver installato il widget nella pagina del prodotto, torna all'App di Scalapay e clicca su "Add to Cart Page".

Go back to the App to add Scalapay to the Cart page


Per configurare il widget nella pagina del carrello, è necessario aggiungere un prodotto al carrello nel backend.



Per quanto riguarda la pagina Prodotto, sulla colonna di sinistra sono presenti tutte le sezioni della pagina del Carrello, tra cui una denominata "Scalapay on-page message": rappresenta il widget che apparirà nella pagina del Carrello e ne raccoglie le configurazioni.

Se la sezione "Scalapay on-page message" non appare o se si desidera aggiungerne una nuova, è possibile aggiungerla facendo clic su Add block e poi su Apps e la troverai nella lista.



  • Trascina il blocco del widget sotto alla sezione Checkout button.

  • Facendo clic su "Scalapay on-page message" appare un nuovo menu. Sarà possibile modificare i parametri del widget.

  • INSERISCI IL TUO MERCHANT TOKEN
    Per visualizzare i prodotti Scalapay corretti sul widget, dovrai inserire il tuo Merchant Token nella sezione Merchant Token. Troverai il tuo Merchant token nel tuo Scalapay Merchant Portal nella sezione "Sviluppatore".

Scalapay widget configurations on Cart page

Embed Scalapay App per Shopify

❤ Installazione dell'App

Si consiglia di utilizzare l'App Scalapay Embed per Shopify nei seguenti casi:

  • quando il plugin di Scalapay non è compatibile con il tema utilizzato dal Merchant su Shopify

  • quando sul sito web del merchant la classica pagina del carrello non è visibile e c'è la necessità di aggiungere il widget di Scalapay nel minicart

  • quando esistono molti template diversi per le pagine dei prodotti

Di seguito sono riportati i passaggi da seguire per installare correttamente il widget di Scalapay attraverso l'App Embed.

  1. Nel backend di Shopify, nel menu a sinistra, clicca su Apps, scrivi Scalapay nella barra di ricerca che appare in cima alla pagina e seleziona Scalapay On-Site Messaging.

Install the App to have Scalapay on Product page and Cart page



2. Clicca su Use Embed App.




3. Attiva Scalapay Widget nel menu a sinistra e fai clic sul testo per modificare il campo Widgets Configuration.




❤ Configurazione dell'App

  1. INSERISCI IL TUO MERCHANT TOKEN
    Dovrai inserire il tuo Merchant token nella sezione Merchant Token per poter mostrare i corretti prodotti di Scalapay sul widget. Il Merchant Token si trova nello Scalapay Merchant Portal nella sezione "Sviluppatore". Riceverai le credenziali di accesso al Merchant Portal via e-mail dal tuo Integration Manager di Scalapay.



Pay in 3 section


2. Dopo aver aggiunto il Merchant token, è necessario configurare le impostazioni del widget per assicurarsi che sia ben installato e visibile nel frontend.


Pay in 3 section

Widget settings


3. Per visualizzare il widget sotto al prezzo dell'articolo nella pagina del prodotto, fai clic con il tasto destro del mouse sul prezzo e poi seleziona Ispeziona per cercare la posizione corretta e i selettori di prezzo e scrivi le informazioni nel riquadro Widgets Configuration sul lato sinistro.

​​
Come spiegato sotto al box Widgets Configuration, è necessario seguire delle regole e un ordine precisi.

  • Ogni elemento è separato da | (si tratta di un carattere pipe, non di una "i" in maiuscolo);

  • Il primo elemento da indicare è il tipo di widget (product or cart);

  • Segue poi la posizione del widget;

  • Alla fine sono indicati i selezionatori di prezzo.


Esempi
Per visualizzare il widget nella pagina del prodotto, sotto all'elemento con la classe .price e il prezzo del prodotto è indicato con un elemento di classe .price-product-amount:
product|.price|.price-product-amount

Per visualizzare il widget nella pagina del prodotto, sotto all'elemento con la classe .price e il prezzo del prodotto potrebbe essere scontato, quindi ci sono due prezzi per lo stesso prodotto, si prega di indicare prima l'elemento scontato (.price-product-amount-discounted) e l'elemento con il prezzo pieno (.price-product-amount-full):

product|.price|.price-product-amount-discounted|.price-product-amount-full

Per visualizzare il widget nella pagina del carrello, sotto l'elemento con id #totals e l'importo del carrello è indicato con un elemento di classe .total-amount:
cart|#totals|.total-amount



4. Per aggiungere il widget nella pagina del carrello, è necessario aggiungere un prodotto nel carrello (in questo caso si tratta di un mini-carrello), selezionare il prezzo, fare clic sul pulsante destro del mouse, selezionare Ispeziona per cercare la posizione corretta e i selettori di prezzo e scrivere le informazioni nel riquadro Widgets Configuration sul lato sinistro.


Dopo aver scritto cart|, scrivi le configurazioni della posizione (e.g. .cart-subtotal) e poi le configurazioni dei selettori di prezzo (e.g. |#mini-cart-subtotal-val).


Per esempio: cart|.cart-subtotal|#mini-cart-subtotal-val

Hai ricevuto la risposta alla tua domanda?