Scalapay provides a Shopify native App.
You can find all the instructions to download and install Scalapay at the following link: https://developers.scalapay.com/docs/shopify-plugin
The installation of Scalapay on a Shopify website consists of 2 mandatory steps.
You will need to install two different App (one for the checkout and one for the widget on Product Page and Cart Page), both available on the Shopify Store. They will allow you to benefit of the entire Scalapay payment experience.
❤ Installation and activation of the Payment app to have Scalapay at checkout
You need to install the App by going to "Settings" of the left menu of your Shopify backend. Go to Payments → Additional payment methods → Add payment method. Search for Scalapay, click on it and install the app.
If needed, here's the direct link:
📘PRODUCT TO ACTIVATE
Only the product/the products agreed as per contractual terms can be activated.
For any information or clarifications about the products to activate, you can check your contract terms, contact your Scalapay Sale referent or the Integration Manager.
Install the Scalapay App to have Scalapay at checkout
When you click on "Install", a Scalapay page will open and you will have to enter your API key.
This API key must be activated by a Scalapay Integration Manager and can only be found on your Scalapay Merchant Portal in the "Developer" section.
If you are not a Scalapay Merchant, please register on our official Scalapay website.
Enter your API key to activate Scalapay at checkout
📘SCALAPAY AT CHECKOUT
Due to the configurations of Shopify, at checkout Scalapay will appear as available for any amount and for any address.
If the customer tries to place an order with an amount higher than the authorised one or from a country not allowed, an error message will appear and the purchase will not be completed.
It is not possible to customise the error message.
Shopify does not allow any changes to the checkout configurations.
Shopify - Scalapay widget
❤ Install the App for the widget on Product page and Cart page
Download here the Scalapay App to install the widget on Product page and Cart page: Scalapay widget for Shopify.
Go to the "Apps" section of your Shopify backend, click on it and type "Scalapay" in the search bar at the top of the page. Choose the result "Scalapay On-Site Messaging" from the pop-up that will appear.
Install the App to have Scalapay on Product page and Cart page
📘COMPATIBILITY OF THE SHOPIFY THEME
If your Shopify theme is compatible with the Scalapay on-site messaging App, you can click on the first two buttons to install the widget automatically on Product page and Cart page.
If your Shopify theme is not compatible, a message on the page will inform you. In this case click on the button "Use Embed App" and go to our guide to discover how to install the widget on Product page and Cart page.
Choose the correct button based on the compatibility of your Shopify theme with the Scalapay app
❤ Configure the App for the widget on Product page
The Scalapay widget has to appear on the Product page of all items on your eCommerce site.
The text and pop-up are set by Scalapay but there are some fields that allow you to configure the widget.
Here are the steps to install the Scalapay widget.
Click on "Add to Product page".
The backend of your Product page will appear.
On the left column there are all the sections of the Product page including one called "Scalapay on-page message": it represents the widget that will appear on the Product page and collects its configurations.
If the Scalapay on-page message section does not appear or you wish to add a new one, you can add it by clicking on Add block and then Apps and you will find it.
Drag the widget block below the section Price (the product price).
If you click on "Scalapay on-page message" a new menu appears. You will be able to modify the widget parameters.
ENTER YOUR MERCHANT TOKEN
You will have to enter your Merchant token in the section Merchant Token in order to show your correct Scalapay products on the widget. You will find your Merchant token in your Scalapay Merchant Portal in the "Developer" section.
Scalapay widget configurations on Product page: remember to add your Merchant token
Parameter | Options | Description |
Merchant Token | The Merchant token has to be added in order to display the correct Scalapay products | The Merchant token is available in the Scalapay Merchant Portal in the "Developer" section. |
DOM selectors for price |
| Add all your price selectors (normal price, special price etc.) separated by comma ([". current-price-value",". price-selector-2"]). |
DOM selectors for granular positioning |
| Add the CSS selector to change the position of the Scalapay widget (copy and paste the code). |
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 | The list of the country codes where the on-site message will be shown. |
Hide below this price amount | Set as default: 5€ | Minimum amount to display the widget. It is set by default to 5€. Make sure to modify it accordingly to your contract. |
Hide above this price amount | Set as default: 2000€ | Maximum amount to display the widget. Make sure to modify it accordingly to your contract. |
CSS Style to add to the on-page message |
| Customise the on-site message via CSS (e.g. font size, margin, position) |
If you use different Product page templates on your backend, you have to make sure to add the Scalapay widget on all of them: in this case, use the Embed Scalapay App for Shopify.
❤ Configure the App for the widget on Cart page
After installing the widget on Product page, go back to the Scalapay App and click on "Add to Cart page".
Go back to the App to add Scalapay to the Cart page
To configure the widget on Cart page, you will have to add a product to the Cart in your backend.
As for the Product page, on the left column there are all the sections of the Cart page including one called "Scalapay on-page message": it represents the widget that will appear on the Cart page and collects its configurations.
If the Scalapay on-page message section does not appear or you wish to add a new one, you can add it by clicking on Add block and then Apps and you will find it.
Drag the widget block below the section Checkout button.
If you click on "Scalapay on-page message" a new menu appears. You will be able to modify the widget parameters.
ENTER YOUR MERCHANT TOKEN
You will have to enter your Merchant token in the section Merchant Token in order to show your correct Scalapay products on the widget. You will find your Merchant token on your Scalapay Merchant Portal in the "Developer" section.
Scalapay widget configurations on Cart page: remember to add your Merchant token
Embed Scalapay App for Shopify
❤ Install the App
It is recommended to use the Embed Scalapay App for Shopify in the following cases:
when the Plugin of Scalapay is not compatible with the theme used by the merchant on Shopify
when on the website of the merchant the classical Page cart is not visible and there is the need to add the widget of Scalapay in the mini cart
when there are many different templates for the Product pages
Please find below the steps to follow in order to install the widget of Scalapay properly through the Embed App.
In the Shopify backend, in the menu on the left, click on Apps, write Scalapay in the search bar that appears at the top of the page and select Scalapay On-Site Messaging.
Install the App to have Scalapay on Product page and Cart page
2. Click on Use Embed App.
3. Enable the Scalapay Widget on the left side menu and click on the text to modify the Widgets Configurations.
❤ Configure the App
ENTER YOUR MERCHANT TOKEN
You will have to enter your Merchant token in the section Merchant Token in order to show your correct Scalapay products on the widget. You will find your Merchant token in your Scalapay Merchant Portal in the "Developer" section. You will receive your login credentials for the Merchant Portal by email from your Scalapay Integration Manager.
Widget settings: remember to add your Merchant Token
2. After adding your Merchant token, the settings of the widget have to be configured to make sure that it is well installed and visible at frontend.
Widget settings
3. To display the widget below the price of the item on the product page, click on the right mouse button on the price and then select Inspect to look for the correct position and for the price selectors and write the information in the box Widgets Configuration on the left side.
As explained below the "Widget Configurations" box, it is necessary to follow precise rules and order.
Each element is separated by
|(it is a pipe character, not a i in uppercase)The first element is the type of the widget (
productorcart);Then the position of the widget follows
At the end the price selector(s) are indicated
Examples
To display the widget on Product page, below the element with class .price and the price of the product is indicated with an element with a class .price-product-amount:
product|.price|.price-product-amount
To display the widget on Product page, below the element with class .price and the price of the product could be discounted, so there are two prices for the same product, please indicate first the discounted element (.price-product-amount-discounted) and the element with the full price (.price-product-amount-full):
product|.price|.price-product-amount-discounted|.price-product-amount-full
To display the widget on Cart page, below the element with an id #totals and the amount of the cart is indicated with an element with a class .total-amount:
cart|#totals|.total-amount
4. In order to add the widget on the cart page, it is necessary to add a product in the cart (in this case it’s a mini cart), select the price, click on the right mouse button, select Inspect to look for the correct position and for the price selectors and write the information in the box Widgets Configuration on the left side.
After writing cart|, write the position settings (e.g. .cart-subtotal) and then the price selectors settings (e.g. |#mini-cart-subtotal-val).
For example: cart|.cart-subtotal|#mini-cart-subtotal-val