To integrate the GrailPay Shopify Widget into your store, our custom install method is to add 1 code snippet addition in the store's template liquid file. The widget will be added in the Product Description and Cart Page.

Login into GrailPay Merchant Account and click the Widget tab. Create token button will generate a token. Please save and keep the widget token as it is needed to add into this snippet.

Follow these steps to add widget snippet in theme.liquid file:

1. In the left menu, click Online Store to expand drop down menu.

2. Then click Themes.

3. Select the theme you would like to edit, expand the Actions drop down menu.

4. Choose Edit Code.
   

   

5. This will open the Layout menu to the left.

6. Find the Layout > theme.liquid theme file and edit this file.

7. Add below snippet in the end of that liquid theme file
   

   <script type="text/javascript">
     var GrailPayWidgetOption = {
       product_amount: {{ product.price | divided_by: 100 }},
       cart_amount: {{ cart.total_price | divided_by: 100 }},
       theme_name: {{ theme.name | json }}
     };
   </script>
   <script type="text/javascript" src="https://api.grailpay.com/widget/shopify/js?api_key=<widget_token>"></script>

   
   

   

8. In this snippet, need to replace <widget_token> in script src with token. For eg.
   https://api.grailpay.com/widget/shopify/js?api_key=348|mRjHAjOg7nId2yAbCdN8VAfVabcd66qhfZPEZOo7

9. Save current theme liquid file.

10. This completes the integration of the GrailPay Widget on the Product and Cart Page. It should now look like the below screenshot:
    

    In Product Page:
    

    

    
    In Cart Page:
    
    

    

Options

There are optional settings to make GrailPay Widget compatible to your theme store and choose the location for widget on Product and Cart Page separately.

Full Example:

<script type="text/javascript">
  var GrailPayWidgetOption = {
    product_amount: {{ product.price | divided_by: 100 }},
    cart_amount: {{ cart.total_price | divided_by: 100 }},
    theme_name: {{ theme.name | json }},
    settings: {
      // For product page
      product: {
        display: true,
        selector: "",
        position: "outside before",
        margin: "10px 0 10px 0",
        align: "left",
        layout: ""
      },
      // For cart page
      cart: {
        display: true,
        selector: "",
        position: "outside before",
        margin: "10px 0 10px 0",
        align: "right",
        layout: ""
      }
    }
  };
</script>
<script type="text/javascript" src="https://api.grailpay.com/widget/shopify/js?api_key=<widget_token>"></script>

Both product and cart page’s setting are same, only you can decide new configuration is for product or cart or both pages.

display

boolean ( default true )
possible values: true | false

With this parameter you can decide to show the widget or not.

selector

string ( default <empty> )
possible values: element <x-path> | <selector>

With the help of selector, you can decide the location for widget on Product or Cart Page. There are multiple combinations which can be used as the selector:

1. Element x-path

2. Element selector

Please look here and get element from your page, and use as the selector.

position

string ( default outside before )
possible values: inside first | inside last | outside before | outside after

Position can put the widget display before or after selector.

margin

string ( default 10px 0 10p 0 )

Margin will set spacing before and after selector.

align

string ( default in Product left | default in Cart right )
possible values: left | right

Simply align widget left or right to match existing content in your theme.

layout

string ( default "" )
possible values: dark | geeen | black

Adjust the layout color to match with your theme colors.

Choose a selector

'Selector' is used to identify the location where you want to display the widget. To choose the selector, you can easily use the inspection tool of your browser.
We recommend using Chrome browser. Two ways to use the inspection tool in the chrome browser on your Product or Cart Page:

1. Select Toots > Web Developer > Inspector from the top menu bar into your chrome browser.

2. Use the shortcut control + shift + c in windows or command + option + c in macOS.

Two ways you can choose the location of the GrailPay widget:

1. Element x-path
   Get full x-path from inspection tool of your browser, as seen in the screenshot below:
   Right click on location > choose Copy option > select Copy Full XPath
   

   

2. Element selector
   You can get the selector by using the inspection tool of your browser, screenshot below:
   Right click on location > choose Copy option > select Copy selector
   

   

   
   

If you need help integrate GrailPay Widget, contact support at [email protected]