Skip to content

Theming API

Apptus eSales for Fashion is designed and themed out of the box in a way that follows many best practices in e-commerce. However, one design theme will not fit all sites. The theming API allow for easy customisation of several design elements used by the eSales for Fashion components.

Initialisation

The theming customisations are provided via the theme property in the initialisation configuration. Only theme properties that differ from their default values should be specified in the theme property.

esales.init({
  webApiId: 'w1A2B3C45',
  market: 'UK',
  // <snip>
  theme: {
    fontFamily: 'Roboto, Arial, sans-serif',
    productCardWidth: 400,
    productCardSpacing: 24
  }
});

Theme properties

All theme properties have a default value. Some properties inherit values from other properties.

Theme property Type Default value Description
colorSale string #F13435 A CSS colour value. This affects the text color for the places where discount price is used. All valid CSS colours and methods can be used.
fontFamily string inherit Affects the font-family used in eSales components.
ratingIconColor string #333 A CSS colour value for the colour of the filled rating icons. All valid CSS colours and methods can be used.
productCardWidth number 335 The width in pixels of product cards in search results. The value must be numeric only.
productCardSpacing number 24 The amount of space in pixels between product cards in search results. The value must be numeric only.
productCardImageHeight number undefined If this is set, image ratio does not need to be calculated by the product cards. The value must be numeric only.
productCardTemplate string name-top Can be one of the values brand-top, name-top or no-brand.
badgeNewColor
badgeSaleColor
badgeDiscountColor
string #fff Badge text colour. All valid CSS colours and methods can be used.
badgeNewBackground
badgeSaleBackground
badgeDiscountBackground
string #000
#DF4538
#DF4538
Badge background colour. All valid CSS colours and methods can be used.
badgeNewBorderRadius
badgeSaleBorderRadius
badgeDiscountBorderRadius
string 50% Badge border radius. All valid CSS border-radius methods can be used.
badgeNewFontSize
badgeSaleFontSize
badgeDiscountFontSize
string 16px Badge font size in pixels. The value must include px.
badgeNewfontWeight
badgeSalefontWeight
badgeDiscountfontWeight
string 500 Badge font weight. All valid CSS font weight methods can be used.
badgeNewLineHeight
badgeSaleLineHeight
badgeDiscountLineHeight
string 1.1 Badge line height. All valid CSS line height methods can be used.
badgeNewWidth
badgeSaleWidth
badgeDiscountWidth
string 50px Badge width in pixels. The value must include px.
badgeNewHeight
badgeSaleHeight
badgeDiscountHeight
string 50px Badge height in pixels. The value must include px.
badgeNewVerticalMargin
badgeSaleVerticalMargin
badgeDiscountVerticalMargin
string 15px Badge top/bottom margin in pixels. The value must include px.
badgeNewHorizontalMargin
badgeSaleHorizontalMargin
badgeDiscountHorizontalMargin
string 15px Badge left/right margin in pixels. The value must include px.
×