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
fontFamily string inherit Affects the font-family used in eSales components.
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.
productCardInfoAlign string center Aligns the info within the product card, i.e. left or center.
productCardFontFamily string inherit Affects the font-family used in product card.
productCardTextTransform string none Determines the text-transform for content within the information area in product cards, e.g. uppercase or none.
productCardLineHeight string 22px Affects the line-height of the text within info of product card. All valid CSS rules can be used.
productCardLetterSpacing string .5px Affects the letter-spacing of the text within info of product card. All valid CSS rules can be used.
productCardTitleMargin string 5px 0 0 0 Product card title margin. All valid CSS values except em can be used.
productCardBrandMargin string 0 Product card brand margin. All valid CSS values except em can be used.
productCardPriceMargin string 0 0 5px 0 Product card price margin. All valid CSS values except em can be used.
priceColor string #333 A CSS colour value. This affects the text color for the default price. All valid CSS colours and methods can be used.
priceSaleColor 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.
priceInactiveColor string #b5b5b5 A CSS colour value. This affects the text color for the previous/inactive price when a discount price is also in use. All valid CSS colours and methods can be used.
priceFontFamily string inherit Affects the font-family of prices.
ratingIconColor string #333 A CSS colour value for the colour of the filled rating icons. All valid CSS colours and methods can be used.
productCardThumbnailHintSize string 8px Height and width of thumbnail hints within product card info.
productCardThumbnailHintMargin string 9px 4px 0 Margin of thumbnail hints within product card info.
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.
infoBadgeFontSize string 11px Info badge font size in pixels.
infoBadgeFontFamily string inherit Info badge font family.
infoBadgeFontWeight string 800 Info badge font weight.
infoBadgeletterSpacing string 3px Info badge letter-spacing.
infoBadgeLineHeight string 14px Info badge line-height.
infoBadgeDiscountColor
infoBadgeSaleColor
infoBadgeNewColor
string #fff Info badge text color.
infoBadgeDiscountBackground
infoBadgeSaleBackground
infoBadgeNewBackground
string #F13435
#F13435
#000000
Info badge text color.
infoBadgeDiscountPadding
infoBadgeSalePadding
infoBadgeNewPadding
string 0 7px Info badge padding in pixels. The value must include px or any other valid css-unit
infoBadgeNewBorder string 1px solid #000000 Info badge border.
×