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 ** part 1**!
⇲ Install the App
Please download the app the following [link](<https://apps.shopify.com/scalapay-on-messaging)
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:
| Parameter | Options | Description |
|---|---|---|
| Product to Show | Pay in 3, Pay in 4 | NOTE: You can only activate the product you agreed on your contract! |
| Countries where widget is enabled | Set as default (full list of allowed countries): AT,BE,FI,FR,DE,IT,NL,PT,ES | The list of coutry codes where the on-site message will be shown |
| Hide under this price amount | Set as default: 5 | Remember 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 amount | Set as default: 1500 | Remember 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 price | Flagged / Not flagged | No installment amount in the on-site message will be shown |
| Show the money sign before or after price | Before / After | - |
| Select what sign | Code (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 |
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
Updated 18 days ago