Custom styling

Purple Dot lets you customise the look and feel of the pre-order button and checkout to match the visual design of your site.

Styling the checkout

The checkout styling is managed from the Merchant Portal. You can configure custom fonts and button and text colors in the Look and Feel section.

Styling the button

You can style the button by passing style objects to the load()function. This method lets you customise the fonts and colours to match the look and feel of your site.

See the SDK documentation for all supported styling options.

window.PurpleDot.load({
...
style: {
fontFamily: 'Helvetica, sans-serif', // Use a custom font
fontSize: '1 rem', // Set the font size
backgroundColor: '#CCCCCC', // Set the background color of the button
},
hoverStyle: {
backgroundColor: '#FFFFFF', // Set the hover background color of the button
}
});

Using custom fonts

If you want to use custom fonts when styling a placement you need to make them available inside the button and checkout iframes by adding custom font CSS definitions in the Look and Feel section of the Merchant Portal.

The @font-face definitions need use absolute URLs and fonts need to be cross-origin accessible.

/* Custom font definition in the Merchant Portal */
@font-face {
font-family: "Open Sans";
src: url("https://example.com/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("https://example.com/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
/* Using the font from the button */
window.PurpleDot.load({
placementType: 'price',
sku: 'SKU-123',
style: {
fontFamily: '"Open Sans", Helvetica, sans-serif', // Use the custom font
},
});