Customize Your QuadPay Widget
This is a guide to help you implement custom styling for the QuadPay widget on your eCommerce site.
Advanced Customizations
If you would like to talk about more advanced customizations or have any questions please get in touch with us.
QuadPay Widget
Widget Element IDs
The default QuadPay widget HTML elements are assigned unique IDs to make CSS customization easier.
| Element ID | Element Description |
|---|---|
| quadPayCalculatorWidget | Outer widget container. |
| quadPayCalculatorWidgetLogo | QuadPay Logo |
| quadPayCalculatorWidgetText | Container for the widget copy e.g. "or 4 Interest-Free..." |
| quadPayCalculatorWidgetTextFromCopy | Variable price copy e.g. "of $11.25" |
| quadPayCalculatorWidgetLearn | The Learn More link. |
Basic Widget Html
<div id="quadPayCalculatorWidget">
<img id="quadPayCalculatorWidgetLogo" src="https://assets.quadpay.com/assets/images/quadpay-logo.png">
<div id="quadPayCalculatorWidgetText">or 4 Interest-Free Installments
<br>
<span id="quadPayCalculatorWidgetTextFromCopy">of <span>$11.25</span></span>
<span id="quadPayCalculatorWidgetLearn">Learn more</span>
</div>
</div>
Custom CSS Styling
To customize the look and feel of the QuadPay Widget simply add a CSS block targeting the Element IDs listed in the table above.
CSS Descriptor
Don't forget to add the '!important' CSS descriptor to your new CSS rules in insure they take precedence over the default styles.
<style type="text/css">
#quadPayCalculatorWidgetText {
font-family: Helvetica, sans-serif !important;
font-size: 12px !imporant;
}
#quadPayCalculatorWidgetLogo {
margin-top: 5px !imporant;
}
</style>
Updated almost 5 years ago