Versions Compared

Old Version 15

changes.mady.by.user Pablo Lago

Saved on

compared with

New Version Current

changes.mady.by.user Fede Otálvares

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Add widgets to the product page

  1. Access the Online Store → Themes tab in the side menu bar.

  2. Choose the Edit code option in the Active theme section:

  3. 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
    languagejs
    // 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>

  4. 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
    languagejs
          {
        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.

...