FLEXWIN
RESTYLING GUIDE
DIBS goal is to supply you with the best possible payment
windows the market has to offer. We are a trusted brand,
and our customers experience high conversion rates using a
DIBS branded payment window.
To further improve conversion, the Responsive Flexwin
decorator has an advanced design, which adapts seamlessly
to the browser window size of any device.
You are, however, free to customize your Flexwin payment
window according to your own brand identity. We only ask
that you always include the DIBS Secure Payments logo, so
that your online shoppers will recognize our familiar brand.
Change color
to your desired
#HEX value
Replace the DIBS
logo with your own
Customize buttons
For more information and support, go to http://tech.dibspayment.com/flexwin_hosted_styling
MODIFY FLEXWIN TO
SUIT YOUR NEEDS
The decorator is built using standard XML and CSS files that can easily be edited in
any suitable editor. This gives you the freedom to modify the decorator to adapt
better to the design of your webshop.
With a basic skill level in HTML and CSS, you can easily do minor modifications
yourself, such as changing the logotype or the background color.
However, for more extensive modifications, and depending on your skill level, you
may want to consult a highly skilled professional. Please refer to the following
documentation for more information about the Flexwin decorator files:
http://tech.dibspayment.com/flexwin_hosted_styling
Make changes to the files with great care. If you do not know exactly
what a CSS property does, changing it might break the layout only on
some browsers and you may need to re-test on all devices.
For more information and support, go to http://tech.dibspayment.com/flexwin_hosted_styling
HOW TO
MAKE
YOUR
CHANGES
Logo
Buttons
Header
Changing the logo is the most complicated part of the decorator. Logo can be
identified by CSS selector .brand_link.
There are two main buttons for the
whole payment process. It’s possbile to
adjust background for hover, click and
text color to your desired color in HEX.
Blue header background is set with CSS
pseudo-element, which can be found
by CSS selector .region-body:after. It’s
possible to adjust background color to
your desired color in HEX.
Default implementation has 6 different
logos:
- Desktop version
- Mobile version
- Sticky header
Each of those logos also has double
sized images for high density displays
(such as MacBook Pro Retina, iPhone,
iPad, etc.).
If you are not planning to support high
density displays, simply remove all
styles associated with it at the end of
decorator.css file (search for comment
/** high density displays */ and
remove everything below).
Styles for Payment method button can be
found by CSS selector #btnAuthSubmit.
Positioning wrapper is found under
#wwctrl_btnAuthSubmit.
Styles for Continue button can be found
by CSS selector #btn_continue.
Positioning wrapper is found under
#wwctrl_btn_continue.
Sticky header
Mobile version of the decorator has
a sticky header. Styles for sticky
header can be found by CSS selector
.fixed-header. It’s possbile to adjust
background and text color to your
desired color in HEX.
Please note that it is set to be invisible
on Desktop version.
Please note that if you set size for logo
element, make sure it is of the same size
as actual image, otherwise add background-size property and define desired
size in pixels.
Please note:
Payment type logos (Visa, Amex etc.) are not part of this decorator, but are a standard feature of FlexWin, and provided by DIBS. The size of these logos can be set in
DIBS Admin under Integration / FlexWin, and they should be set to “Large” to fit this
decorator.
For more information and support, go to http://tech.dibspayment.com/flexwin_hosted_styling
Size of cardtype logos:
Small
Medium
Large
Update FlexWin settings
DIBS BRAND
The DIBS brand is well known in the Nordic markets, and a
symbol for a safe and serious online store. This recognition
benefits you by increasing your conversion, and even helps
customers trust your store.
To continuously get this recognition, it’s very important that
we use the same logo in all touch points; in both your shop
and checkout pages.
DIBS Secure
Payment logo
We included DIBS Secure Payment logos for you convenience in the decorator XML file and commented them out.
To enable logo for English language, please uncomment everything between comments:
<!-- DIBS Secure logo EN --> and <!-- //DIBS Secure logo EN -->
The process is the same for other languages as well - find the comment for appropriate language and uncomment
everything between those comments. DIBS Secure Payment logo is available in four languages.
For more information and support, go to http://tech.dibspayment.com/flexwin_hosted_styling