Page Comparison

Add widgets to the product page

Access the Online Store → Themes tab in the side menu bar.
Choose the Edit code option in the Active theme section:

Add at the end of the Templates → product.liquid file the following code replacing USER and ASSETS-KEY with the parameters provided by SeQura.

Code Block

language	js

// SeQura Widgets

<script>
  sequraConfigParams = {
    merchant:'USUARIO',  // Replace USER value
    assetKey:'CLAVE-ASSETS',// Replace ASSETS-KEY value
    decimalSeparator: ',',
    thousandSeparator: '.',
    price_src: '*[itemprop=price],#productPrice', // If it doesn't work with this value, replace with the price css selector
    widgets:[
      // If you do not want some of the widgets you could remove
      // Pay Later Widget...
      {
        product: 'i1', // Product code for Pay Later widget...
        dest_sel: '#AddToCartForm'// Place CSS Selector...
      },
      // Pay Later END...   
      // Part Payment Widget...
      {
        product: 'pp3', // Product code for Part Payment widget
        dest_sel: '.product-single__prices'// Place CSS Selector
      },
      // Part Payment END...
    ]
  };
  (function(){
    var script = document.createElement("script");
    script.src = "https://s3-eu-west-1.amazonaws.com/shop-assets.sequrapi.com/base/js/sequrapayment_v2.js";
    script.async = true;
    document.getElementsByTagName("head")[0].appendChild(script);
  })()
</script>

It is also possible to modify the widget design with our widget simulator:

a. Copy the code below the simulation box.
b. Add this line to the widget code inside product.liquid template:

Code Block

language	js

      {
        product: 'pp3', // Product code for Part Payment widget
        dest_sel: '.product-single__prices', // Place CSS Selector
        theme: '{"alignment":"left","amount-font-bold":"true","amount-font-color":"#EA1D33","amount-font-size":"15","background-color":"white","border-color":"#353735","border-radius":"5","branding":"black","class":"","font-color":"#353735","link-font-color":"#EA1D33","link-underline":"false","no-costs-claim":"","size":"M","starting-text":"only","type":"banner"}'
      },

c. Save changes.

...

In addition, in SeQura Logo you can find the SeQura logo in different versions. You can add it in the footer of your web page or wherever you have the logos of the other payment methods you offer in your store.

/wiki/spaces/DOC/pages/3281485829 | Next step

Versions Compared

Old Version 4

New Version 5

Key

Add widgets to the product page