Embed Scalapay App for Shopify

⇲ Install the App

It is recommended to use the Embed Scalapay App for Shopify in different 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.

1. In the Shopify back-end, 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.

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

4. There are two different sections: one for Pay in 3 and one for Pay in 4.
   The settings for Pay in 4 are shown just below the ones for Pay in 3.
   
   
   Depending on which product is stipulated by the contract, in order to show it in the front end, it is necessary to add the settings for Pay in 3, Pay in 4 or both of them.

5. 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 box, it is necessary to follow a precise order when entering the specific information.
   After writing product|, write the position settings (e.g. .price|.price--large|.price--show-badge) and then the price selectors settings (e.g. |.price-item|.price-item--regular).
   
   
   For example: product|.price|.price--large|.price--show-badge|.price-item|.price-item--regular

6. 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

The procedure to follow is the same for Pay in 3 and Pay in 4.