Shopify - Scalapay widget
To enjoy the full Scalapay experience, you must have the Widget on your website.
⇲ 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:
| Parameter | Options | |
|---|---|---|
| Product to Show | Pay in 3, Pay in 4 | You can only activate the product you agreed on your contract! |
| Hide under this price amount | Minimum amount for the widget to be visible | Remember to contact [email protected] 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 | Maximum amount for the widget to be visible | Remember to contact [email protected] 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 | no 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 PRICE | Insert 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 POSITIONING | Insert in this field CSS selector to change Scalapay widget position (not need add "" or [] simply copy paste the code). | |
| CSS Style | With this field you can customize 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 customize it will appear
Updated about 1 month ago