Shopify - Scalapay widget

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

PART 2

Welcome to part 2 of the Scalapay Shopify integration.

📘

Attention!

Before moving on to part 2, make sure to have installed and completed the 1st part !(https://developers.scalapay.com/docs/pluginstall-shopify)

⇲ Install the App

A specific App has just been released and it is possible to download it at the following link: https://apps.shopify.com/scalapay-on-messaging

After downloading the APP at the above link, go to the "App" section of your site Back Office, 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 for 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:
ParameterOptions
Product to ShowPay in 3, Pay in 4You can only activate the product you agreed on your contract!
Hide under this price amountMinimum amount for the widget to be visibleRemember 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 amountMaximum amount for the widget to be visibleRemember 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 priceno price will be shown
Show the money sign before or after price € 9,99
or 9,99€
Select what sign€ or EUR
DOM SELECTORS FOR PRICEInsert in this field all your price selectors (normal price, special price etc.) separated by comma (es: [". current-price-value",". price-selector-2"]).
DOM SELECTORS FOR GRANULAR POSITIONINGInsert in this field CSS selector to change Scalapay widget position (not need add "" or [] simply copy paste the code).
CSS StyleWith this field you can customise a little bit more our widget (es: font size, margin, position), make sure you reach out to your webmaster or developer

❗️

IMPORTANT!

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

CART PAGE

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