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.
productImageHeightRatio number 1.2 The height for product images (cards, suggestions, recommendations) are the result of the imageWidth * productImageHeightRatio.
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
Deprecated
Replaced by: productImageHeightRatio
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.
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.
productCardTextTransform string none Determines the text-transform for content within the information area in product cards, e.g. uppercase or none.
productCardTitleMargin string 5px 0 0 0 Product card title margin. All valid CSS values except em can be used.
productCardTitleFontWeight string 600 Product card title font-weight.
productCardBrandMargin string 0 Product card brand margin. All valid CSS values except em can be used.
productCardBrandFontWeight string 400 Product card brand font-weight.
productCardPriceMargin string 0 0 5px 0 Product card price margin. All valid CSS values except em can be used.
ratingIconColor string #333 A CSS colour value for the colour of the filled rating icons. All valid CSS colours and methods 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.
priceFontWeight string 800 Affects the font-weight of prices.
productCardThumbnailHintSize string 10px Height and width of thumbnail hints within product card info.
productCardThumbnailHintMargin string 9px 4px 0 Margin of thumbnail hints within product card info.
facetBackgroundColor string #fcfcfc Sets the background-color of the facet dropdown box.
facetBorderColor string #bbb Sets the border-width of the facet dropdown box.
facetBorderWidth string 1px Sets the border-color of the facet dropdown box.
facetFontSize string 15px Font size of facet-text.
facetLetterSpacing string 0 Letter spacing of facet-text.
facetHeight string 42px Height of facet-wrapper.
facetHorizontalPadding string 13px Horizontal padding of facet-wrapper to position text horizontally.
facetTextTransform string none Text transform of facet-text.
recommendationsProductCardWidth string 255px The width of recommendation product-cards.
searchAssistantHeight string 43px Height of the input field.
searchAssistantBorderRadius string 0 Border radius of the input field.
searchAssistantFontSize string 15px Font size of the input field.
searchAssistantClearIconSize string 22px The font-size of the clear-icon in the input field.
searchAssistantMobileButtonSize string 24px The font-size of the mobile search icon.
searchAssistantBoxShadow string 0 0 3px rgba(0, 0, 0, 0.5) Sets the box-shadow for input field and suggestions popup.
searchAssistantDividerVerticalOffset string 4px Determines the space between the top and bottom border and the vertical divider in the search field.
searchAssistantSearchButtonHorizontalPadding string 12px Adjusts the left & right padding for the search-icon next to the search field.
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.
infoBadgePadding string 0 7px Info badge padding in pixels. The value must include px or any other valid css-unit
infoBadgeDiscountColor
infoBadgeSaleColor
infoBadgeNewColor
string #fff Info badge text color.
infoBadgeDiscountBackground
infoBadgeSaleBackground
infoBadgeNewBackground
string #F13435 (priceSaleColor)
#F13435 (priceSaleColor)
#000000
Info badge text color.
×