MG2 - 2.3 - VISUAL INTEGRATION

Widget Customization

Each SeQura Payment Method includes a widget to announce the SeQura Service in the Product Page.

1. To place them, you have to go to Content → Widgets 
   
   
   
   
2. When you are in the Widgets section, click on Add Widget, placed in the upper-right zone.
   
   

For "Buy Now, Pay Later" (Paga después):

• On "Type" choose "Invoice teaser" and on "Design Theme" choose the active theme of the store.
  
  
  
  
• In "Widget Title" type a title, on "Assign to Store Views" choose the store to be shown and on "Sort Order" the order in which will be shown.
  
  
  
  
• On the same page, click on "Add Layout Update", usually you will choose "All product types" on the "Display on" option. The Container chosen is not so relevant.
  
  
  
  
• Click on "Save" to save the configuration and can access the "Widget Options".
  
• On "Widget Options" you have to place on Price CSS Sel. the CSS selector of the element that contains the price on the producto page. The widget will use it to compare with the prices range established on the payment method to show it or not.
  On Place CSS Sel. is placed the destination CSS selector after the widget will be placed on the product page. If you leave it empty, the widget will placed on the Container. Click on  "Save" to save changes.
  
  

On "Part Payment" (Pago fraccionado):

• On "Type" choose "Partpayments teaser" and on "Design Theme" choose the active theme of the store.
  
  
  
  
• On "Widget Title" type a title, on "Assign to Store Views" choose the store in which it will be shown and on "Sort Order" the order in which will be shown.
  
  
  
  
• On the same page, click on "Add Layout Update", usually you will choose "All product types" on the "Display on" option. The Container chosen is not so relevant.
  
  
  
  
• Click on "Save" to save the configuration and can access the "Widget Options".
• On "Widget Options" you have to place on Price CSS Sel. the CSS selector of the element that contains the price on the producto page and on this it will be base to calculate and show installments and fees. 
  On Place CSS Sel. is placed the destination CSS selector after the widget will be placed on the product page. If you leave it empty, the widget will placed on the Container. Click on  "Save" to save changes.
  
  
  
  
  
  

On the field "Theme" you can choose among to principal visualizations of the instalment simulador (the rest are variations from these two):

• Text

• Banner

On "Split in 3" (Divide en 3):

• On "Type" choose "Splitpayments teaser" and on "Design Theme" choose active theme of the store. On the rest of the options copy the same configuration from Part Payment.

All the widgets can be customized indicating their parameters in json format in the field "Widget's params". On the widgets configurator you can set the same style as in your web.

The parameters to be set-up are:

• type (text, banner o legacy)

• size (S, M o L)

• font-color (#rrggbb)

• background-color (#rrggbb)

• alignment (left, center o right)

• branding (white, black o default)

• starting-text (only o as-low-as)

• amount-font-size (13, 15, 17)

• amount-font-color (#rrggbb)

• amount-font-bold (true o false)

• link-font-color (#rrggbb)

• link-underline (true o false)

• border-color (#rrggbb)

• no-costs-claim (free o without-cost)

If "Theme" field is left blank, by default the parameters activated will be {"type":"text", "size":"M", "alignment":"center", "font-color":"#353735"}.

Previous page | Next page