Affordability Widget Integration for Shopify

PayU Affordability Widget can be introduced into themes in Liquid template files, sections, blocks, and snippets.

To configure the Affordability Widget for Shopify:

1. Duplicate the Existing Theme
2. Add Snippet for PayU
3. Update the Templates
4. Update Theme

📘

Note:

If you are using themes created in 2020 or before, where product.json is not present, Step 1 must be followed.

Step 1: Duplicate the Existing Theme

To duplicate the existing theme:

📘

Note:

If you are using themes created in 2020 or before, where product.json is not present, step in this section can be skipped and proceed to Step 2: Add Snippet for PayU.

1. Log in to Shopify Admin portal.
2. Select Themes under Online Stores on the left navigation pane.

3. Select the hamburger menu for which you wish configure the widget and select Duplicate Theme.

4. Select the hamburger menu for which you wish configure the widget and select Edit Code to open the Code page for the current theme.

   The following folders are displayed on Code page of the current theme.

5. Navigate to Layout > theme.liquid file.

6. Add the below script before completing the head tag:

<script defer src="https://jssdk.payu.in/widget/affordability-widget.min.js"></script>

Step 2: Add Snippet for PayU

To add a snippet for PayU:

1. Select Add a new Snippet under the Snippet folder on the left pane.

2. Create and add a new snippet with the name “payu-block” as filename under the Snippets folder.

   The _Add a new snippet _dialog box is displayed.

3. Enter the name of the snippet as payu-block and then click Done.

4. Add the following snippet inside the payu-block file:

<script>
    window.addEventListener("load", (event) => {
        var widgetConfig = {
            "key": "MERCHANT_KEY",
            "amount": {{ payu_amount | divided_by: 100.00 }},
        };
        payuAffordability.init(widgetConfig);
    });
</script>
<div id="payuWidget"></div>

This is to view UI on the webpage, key is the merchant key.

Step 3: Update the Templates

To update the templates:

1. Check the following files under the Templates folder:

• Product.json
• Cart.json

2. Edit the Product.json file.
3. Search the main section and observe the type defined.

4. Open the corresponding liquid file mentioned in step 3, that is, under Sections folder, navigate to the main-product.liquid file. This file is used is to render Widget on the webpage.
5. Search for the following code:

{%- for block in section.blocks -%} 
{%- case block.type -%}

6. Add the following code after the code specified in step 5.

{%- when 'payu_widget' -%}
{% render 'payu-block',payu_amount: product.price %}

7. Search for word schema and add the following code under blocks.

{

“type":"payu_widget”, ”name”:”payu_widget”

},

8. Repeat the step 5 to step 7 for the main-cart.footer.liquid if you want to show widget on your Add to Cart page.
9. Open the Product.json file under the Templates folder.
10. Add in the blocks of main section in the Product.json file

"payu_block": {
"type": "payu_widget",

"settings": { }

},

11. Add “payu_block” in order of main section to define order and placeholder of the PayU Widget. Save the changes.

"payu_block": {
        "type": "payu_widget",
        "settings": {}
    }

12. Repeat the above step 9 to step 11 for the Cart.json file.

Step 4: Update Theme

To update the theme:

1. Navigate to Shopify theme editor,
2. Click Add block in the Product information section,
3. Select the PayU Widget to drag and place where you want to place the widget.

📘

Note:

Search for Product.liquid or product-info.liquid file and add the following line of code anywhere or before endif. This code is to render the page.

_{% render 'payu-block',payu\_amount: product.price %}_

4. Click Done.
5. Repeat step 2 to step 4 for cart.json in case you want to show widget on Add to cart page. Main-cart.footer