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:

...

Image Added

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

Note: if your product page do not work with product.liquid, check product-template.liquid, product-description-bottom-template.liquid or similar, inside the Sections section of the theme applied.

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
    locale: 'es-ES',//Replace es-ES with the appropriate country code (it-IT for Italy, fr-FR for France and pt-PT for Portugal).
    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:

Image Modified

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.

...

Visual resources (sliders, logos and texts):

If you want to create a customized banner or slider, you can use the images contained in SeQura Visual Integration. These images are both in PNG and SVG format so that they can be edited and adapted to the style of each page.

In the same link you can also find the explanatory texts of our payment methods. These are also in HTML format so that it is easier to include them in the explanatory page of the payment methods of the web page.

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 3

New Version Current

Key

Add widgets to the product page