MG - 2.3 - VISUAL INTEGRATION

Custom CSS styles

If needed, Sequra elements added by the module can be easily customized from the CSS template, adding additional custom CSS.

Customize .phtml templates

In case you want to modify the HTML format, you will find the templates used by the modules in the following directory: app/design/frontend/base/default/templates/sequrapayment.

If the change you want to do is not possible with CSS, you will need to copy the .phtml you want from:

app/design/frontend/base/default/templates/sequrapayment/XX/XXXX.phtml

to

app/design/frontend/PACKAGE/TEMPLATE/templates/sequrapayment/XX/XXXX.phtml

and make the changes to this copy.

Checkout process:

1. /app/design/frontend/base/default/template/sequrapayment/form/info.phtml: the content for the “Buy now, pay later” payment method.

2. /app/design/frontend/base/default/template/sequrapayment/form/part_payment.phtml: the content for the “Part payment” method.

3. /app/design/frontend/base/default/template/sequrapayment/form/identification.phtml: the content for the page that asks for additional info needed to accept the payment.

Add banners

The module gives you the option to insert promotional banners of every payment method in each product page. By default, these banners are hidden. If you want to use them, they should be added to the .phtml used to generate the product page. Usually, the directory is: app/design/frontend/PACKAGE/TEMPLATE/templates/catalog/product/view.phtml.

“Buy now, pay later” banner:

<?php echo $this->getChildHtml('product.info.teaser');?>

“Part payment” banner:

<?php echo $this->getChildHtml('product.info.partpaymentteaser');?>

In these cases, the .phtml that should be modified would be:

• Buy now, pay later: app/design/frontend/base/default/template/sequrapayment/info/teaser.phtml

• Part payment: app/design/frontend/base/default/template/sequrapayment/info/partpayment_teaser.phtml

Widget customization

In System → Configuration → Sells → Payment methods you can define, through the “CSS selector”, the position in which the widgets will be shown. The design can be chose with “Widget’s params”, introducing one of the predefined themes: “text” or “banner”.

Text

Open

Banner

Open

These widgets can be customized using the parameters in JSON format in the “Widget’s params” field. You can use our widget simulator to adapt the design.

The parameters that can be modified 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 you leave the “Widget’s params” field blank, the default parameters will be:

{"type":"text", "size":"M", "alignment":"center", "font-color":"#353735"}

Visual material (sliders, logos and texts)

If you want to create a personalized banner or slider, you can use the images and logos in this link. These images and logos are in PNG and SVG format, in order to give flexibility in the design and make it as close to your design as possible.

In that same link you will find tutorials for the visual elements available for our payment methods.