Page Comparison

...

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:
   

   Image Modified

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
   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>

4. 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):

...