Shopify - Scalapay widget

To enjoy the full Scalapay experience, you must have the Widget on your website.


Welcome to part 2 of the Scalapay Shopify integration.



Before moving on to part 2, make sure to have installed and completed ** part 1**!

⇲ Install the App

Please download the app the following [link](<

Go to the "App" section of your Shopify backoffide, click on it and then click on "Scalapay On-Site Messaging" from the pop-up that appears on top of the page

✔ Configure the APP

The Scalapay widget needs to appear on the product page of all of your products.
The text and pop-up are controlled by Scalapay but there are some fields that allow you to configure the widget.

  • Click on "Add to Product Page" first
  • A simulation of your product page should appear.
  • At this point, you will be able to see a left column with all the sections of the product page and a block called "Scalapay on-page message"
  • The "block" represents the widget that will appear in the product page
  • Normally, a Scalapay on-page message block will already be there. If the "Block" is not already there or you wish to add a new one (for the Pay in 4 product, for example), you can add it by clicking on "Add block" and then "Block from the APP"
  • The first menu that you see on the left allows you to "play" with the widget and its positioning
  • Make sure you drag the widget block on the left menu and drag it under the price
  • Then, if you click on "Scalapay on-page message" a new left menu appears:
Product to ShowPay in 3, Pay in 4NOTE: You can only activate the product you agreed on your contract!
Countries where widget is enabledSet as default (full list of allowed countries): AT,BE,FI,FR,DE,IT,NL,PT,ESThe list of coutry codes where the on-site message will be shown
Hide under this price amountSet as default: 5Remember to contact us here every time you change your minimum amount. If we do not insert the same amount in our system, the orders will be accepted by Scalapay!
Hide upper this price amountSet as default: 1500Remember to contact us here every time you change your maximum amount. If we do not insert the same amount in our system, the orders will be accepted by Scalapay!
Hide priceFlagged / Not flaggedNo installment amount in the on-site message will be shown
Show the money sign before or after price Before / After-
Select what signCode (EURO) / Symbol (€)-
DOM selectors for price-Add all your price selectors (normal price, special price etc.) separated by comma (es: [". current-price-value",". price-selector-2"]).
DOM selectors for granular positioning-Add the CSS selector to change Scalapay widget position (not need add "" or [] simply copy paste the code).
CSS Style to add to the on-page message-Customize the on-site message via CSS (es: font size, margin, position)
Use to add global styles to the widget-Customize the on-site message in all pages where the on-site message will appear



If you use different templates in your site be sure to add in all of them our widget. To do this:

  • default product (in the top bar on the product page template)

  • choose the option "product"
  • go in each category and add in each one our app under the price


The same widget also should appear in the cart page

  • After correctly installing the product page widget, go back to our app and select "Add to Cart Page"
  • As we have seen for the product page, the first left column will help us to "Add a block" and change the widget position in the page
  • If we then click on the widget, the parameters to customise it will appear