Theming API

Apptus eSales 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 Fashion components.

Initialisation

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

esales.init({
  // See library API for full initiation scope
  theme: {
    fontFamily: 'Roboto, Arial, sans-serif',
    productCardWidth: 400,
    productCardSpacing: 24
  }
});

Layout theming properties

To handle responsiveness and resizing of items within components, a concept called layouts is used. A layout consists of a size range and is used as a basis to determine the number of items per row of a given type that should be rendered. The range of the layout is determined using breakpoints.

The number of items of a given type is given for each layout and each type. For example, the layout M ranges from the prior breakpoint (of layout S) up to the specified layoutBreakpointM value, by default this is 992 px. For that layout, 3 product cards and 4 facets are rendered on each row. To manipulate the look of how items are rendered in a certain view, two values can be altered: the layout breakpoint which determines the range, and the specific property that says how many items per row to display in that range.

Layout breakpoints

Sets the max-width for layouts which determines the layouts range. For example setting layoutBreakpointM to 1000 will result in layout M to range from 768px to 1000px and layout L to range from 1000px to 1200px. These breakpoints are not based on the width of the browser window, they are based on the width of esales-search-result/ esales-navigation-page.

Property Type Default value Description
layoutBreakpointXS number 480 Sets the max-width for layout XS.
layoutBreakpointS number 768 Sets the max-width for layout S.
layoutBreakpointM number 992 Sets the max-width for layout M.
layoutBreakpointL number 1200 Sets the max-width for layout L.

Product cards per row

Property Type Default value Description
productCardsPerRowXS number 2 Sets the amount of cards that should be displayed per row for layout XS.
productCardsPerRowS number 2 Sets the amount of cards that should be displayed per row for layout S.
productCardsPerRowM number 3 Sets the amount of cards that should be displayed per row for layout M.
productCardsPerRowL number 3 Sets the amount of cards that should be displayed per row for layout L.
productCardsPerRowXL number 4 Sets the amount of cards that should be displayed per row for layout XL.

Recommendations product cards per row

Property Type Default value Description
recommendationCardsPerRowXS number 2 Sets the amount of cards that should be displayed per row for layout XS.
recommendationCardsPerRowS number 2 Sets the amount of cards that should be displayed per row for layout S.
recommendationtCardsPerRowM number 4 Sets the amount of cards that should be displayed per row for layout M.
recommendationCardsPerRowL number 4 Sets the amount of cards that should be displayed per row for layout L.
recommendationCardsPerRowXL number 4 Sets the amount of cards that should be displayed per row for layout XL.

Facets per row

Property Type Default value Description
facetsPerRowS number 2 Sets the amount of facets that should be displayed per row for layout S.
facetsPerRowM number 4 Sets the amount of facets that should be displayed per row for layout M.
facetsPerRowL number 5 Sets the amount of facets that should be displayed per row for layout L.
facetsPerRowXL number 6 Sets the amount of facets that should be displayed per row for layout XL.

UI theming properties

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

General

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.
productImageBrokenURL string https://cdn.esales.apptus.com/
assets/images/image-broken.png
URL to the image that should be displayed if the URL to a product image is broken.

Product card

Property Type Default value Description
productCardSpacing number 24 The amount of space in pixels between product cards in search results. The value must be numeric only.
productCardVerticalSpacing number Inherited from productCardSpacing The amount of vertical space in pixels between product cards in search results. The value must be numeric only.
productCardHorizontalSpacing number Inherited from productCardSpacing The amount of horizontal 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.
productCardTitleMargin string 5px 0 0 0 Product card title margin. All valid CSS values except em can be used.
productCardTitleRows number 1 Number of rows used for the product card title. Can be either 1 or 2.
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.
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.
ratingIconColor string #333 A CSS colour value for the colour of the filled rating icons. All valid CSS colours and methods can be used.
ratingPosition string image Can be either image or bottom.
productQuickBuyBorderColor string transparent Border colour of the Quick buy button. Can be any valid CSS colour value.
productQuickBuyBorderColorHover string #212121 Border colour of the Quick buy button while hovering. Can be any valid CSS colour value.
productQuickBuyBackgroundColor string rgba(255, 255, 255, 0.8) Background colour of the Quick buy button. Can be any valid CSS colour value.
productQuickBuyBackgroundColorHover string rgb(255, 255, 255) Background colour of the Quick buy button while hovering. Can be any valid CSS colour value.
productQuickBuyColor string #212121 Text colour of the Quick buy button. Can be any valid CSS colour value.
productQuickBuyColorHover string Inherited from productQuickBuyColor Text colour of the Quick buy button while hovering. Can be any valid CSS colour value.
productQuickBuyTextTransform string uppercase Text-transform value of the text of the Quick buy button.
productQuickBuyPosition string none Placement of the Quick buy button within the product card. Can be either top, bottom, or none. Use none to not display the button.

Facets

Property Type Default value Description
facetBackgroundColor string #fcfcfc Sets the background-colour of the facet dropdown box.
facetBorderColor string #bbb Sets the border-colour of the facet dropdown box.
facetBorderWidth string 1px Sets the border-width of the facet dropdown box.
facetHeight string 42px Sets the height of facet-wrapper.
facetHorizontalPadding string 13px Horizontal padding of facet-wrapper to position text horizontally.
facetTextTransform string none Text transform of facet-text.

Recommendations

Property Type Default value Description
recommendationsProductCardWidth string 255px The width of recommendation product-cards.

Search assistant

Property Type Default value Description
searchAssistantBorderColor string #bbbbbb Color of border.
searchAssistantBorderRadius string 0 Border radius of the input field.
searchAssistantHeight string 43px Height of the input field.
searchAssistantFontSize string inherited from bodyFontSize 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.

Product badge

There are two positions for badges currently inside the product image, the top right "Image Area Badge" and the bottom center "Description Area Badge". All theming options that are prefixed with info refers to the "Description Area Badge".

Six different types of badges can be themed.

  • NEW
  • SALE
  • DISCOUNT
  • THEME_1
  • THEME_2
  • THEME_3

All theming options should be provided under the property badges, and then the type of badge, followed by any theming options.

esales.init({
  theme: {
    badges: {
      NEW: {
        color: 'gray',
        infoFontSize: '15px'
      },
      THEME_1: {
        background: 'steelblue',
        infoBackground: 'steelblue'
      }
    }
  }
});
Property Type Default value Description
color string #fff Text color used for the badge.
background string #333 Background used for the badge.
border string 0 Border used for the badge.
borderRadius string 3px Border-radius used for the badge.
fontSize string 16px Font-size used for the badge.
fontWeight string 500 Font-weight used for the badge.
fontStyle string none Font-style used for the badge.
fontFamily string inherit Font-family used for the badge.
letterSpacing string inherit Letter-spacing used for the badge.
lineHeight string 1.6 Line-height used for the badge.
width string auto Width used for the badge.
height string auto Height used for the badge.
margin string 15px Margin used for the badge.
padding string 2px 8px Padding used for the badge.
textTransform string none Text-transform used for the badge.
justifyContent string center The justify-content setting used for the content of the badge.
parentJustifyContent string flex-end The justify-content setting used for the parent element of the badge.
infoColor string #fff Text color used for the description area badge.
infoBackground string #333 Background used for the description area badge.
infoBorder string 0 Border used for the description area badge.
infoBorderRadius string 3px Border-radius used for the description area badge.
infoFontSize string 13px Font-size used for the description area badge.
infoFontWeight string 800 Font-weight used for the description area badge.
infoFontStyle string none Font-style used for the description area badge.
infoFontFamily string inherit Font-family used for the description area badge.
infoLetterSpacing string 2px Letter-spacing used for the description area badge.
infoLineHeight string 1.6 Line-height used for the description area badge.
infoWidth string auto Width used for the description area badge.
infoHeight string auto Height used for the description area badge.
infoMargin string 6px 0 Margin used for the description area badge.
infoPadding string 0 18px Padding used for the description area badge.
infoTextTransform string none Text-transform used for the description area badge.
infoJustifyContent string center The justify-content setting used for the content of the description area badge.
infoParentJustifyContent string center The justify-content setting used for the parent element of the description area badge.

Default badge styles

The following values are default for the badges NEW, SALE, and DISCOUNT.

badges: {
  NEW: {
    color: '#000',
    background: '#fff',
    borderRadius: '50%',
    fontWeight: '800',
    fontStyle: 'italic',
    width: '50px',
    height: '50px',
    padding: '0',
    infoColor: '#000',
    infoBackground: '#fff',
    infoFontStyle: 'italic'
  },
  SALE: {
    background: '#df4538',
    borderRadius: '50%',
    fontWeight: '800',
    width: '50px',
    height: '50px',
    padding: '0',
    infoBackground: var(--ae-price-sale-color)
  },
  DISCOUNT: {
    background: '#df4538',
    borderRadius: '50%',
    fontWeight: '800',
    width: '50px',
    height: '50px',
    padding: '0',
    infoBackground: var(--ae-price-sale-color)
  }
}

Color swatch

Property Type Default value Description
colourSwatchBorderRadius string 50% Border-radius of colour-swatches

Typography theming properties

All typography theming properties have a default value. These properties will affect several components since the components shares typography properties.

Headline

These properties are used for headlines such as the category title on the navigation page.

Property Type Default value Description
headlineFontSize string 32px Headline font size in pixels.
headlineColor string rgba(00,00,00, 0.87) Headline colour.
headlineFontWeight string 600 Headline font weight.
headlineLetterSpacing string 0.4px Headline letter-spacing.
headlineMobileFontSize string 18px Headline font size in pixels for mobile.
headlineMobileFontWeight string 800 Headline font weight for mobile.

Title

These properties are used for titles such as the title on search pages.

Property Type Default value Description
titleFontSize string 18px Title font size in pixels.
titleColor string rgba(00,00,00, 0.87) Title colour.
titleFontWeight string 600 Title font weight.
titleLetterSpacing string 0.4px Title letter-spacing.

Label

These properties are used for labels such as the facet names labels on result pages.

Property Type Default value Description
labelFontSize string 15px Label font size in pixels.
labelColor string rgba(00,00,00, 0.6) Label colour.
labelFontWeight string 400 Label font weight.
labelLetterSpacing string 0 Label letter-spacing.
labelMobileFontSize string 16px Label font size in pixels for mobile.
labelMobileFontWeight string 800 Label font weight for mobile.
labelMobileLetterSpacing string 0.4 Label font weight for mobile.

Label-2

These properties are used for the smaller variant of labels that used in places such as breadcrumbs and label nodes within category navigation.

Property Type Default value Description
label2FontSize string 12px Label-2 font size in pixels.
label2Color string rgba(00,00,00, 0.87) Label-2 colour.
label2FontWeight string 400 Label-2 font weight.
label2LetterSpacing string 1px Label-2 letter-spacing.
label2MobileFontSize string 11px Label-2 font size in pixels for mobile.

Body

These properties are used for list items such as in category navigation, within facets, and in the search assistant.

Property Type Default value Description
bodyFontSize string 16px Body font size in pixels.
bodyColor string rgba(00,00,00, 0.87) Body colour.
bodyFontWeight string 400 Body font weight.
bodyLetterSpacing string 0.4px Body letter-spacing.
bodySaleColor string #DF4538 Body sale colour.
bodyMobileFontSize string 15px Body font size in pixels for mobile.

Body-2

These properties are used for smaller body texts such as the facet chips and various count texts such as on list items.

Property Type Default value Description
body2FontSize string 12px Body-2 font size in pixels.
body2Color string rgba(00,00,00, 0.87) Body-2 colour.
body2FontWeight string 400 Body-2 font weight.
body2LetterSpacing string 1px Body-2 letter-spacing.
body2MobileFontSize string 13px Body-2 font size in pixels for mobile.

Buttons

These properties are used for all buttons i.e. search assistant and facets.

Property Type Default value Description
buttonFontSize string 14px Button font size in pixels.
buttonOutlineBorderColor string rgba(51,51,51,.87) Button border-colour.
buttonFontWeight string 700 Button font weight.
buttonLetterSpacing string 1px Button letter-spacing.
buttonTextTransform string none Button text-transform
buttonLightTextTransform string inherited from buttonTextTransform Button text-transform for text-like buttons (i.e. clear buttons).

Product title

These properties are used for product titles such as in the product card and the product suggestions in the search assistant.

Property Type Default value Description
productTitleFontSize string 16px Product title font size in pixels.
productTitleFontFamily string inherit Product title font-family.
productTitleColor string rgba(00, 00, 00, 0.87) Product title colour.
productTitleLetterSpacing string 0.4px Product title letter-spacing.
productTitleTextTransform string none Product title text-transform.
productTitleFontStyle string none Product title font-style.
productTitleFontWeight string 600 Product title font-weight.

Product sub-title

These properties are used for product sub-titles such as in the product card and the product suggestions in the search assistant.

Property Type Default value Description
productSubtitleFontSize string 13px Product title font size in pixels.
productSubtitleFontFamily string inherit Product title font-family.
productSubtitleColor string rgba(00, 00, 00, 0.87) Product title colour.
productSubtitleLetterSpacing string 0.4px Product title letter-spacing.
productSubtitleTextTransform string none Product title text-transform.
productSubtitleFontStyle string none Product title font-style.
productSubtitleFontWeight string 400 Product sub-title font-weight.

Price

These properties are used for price labels such as on the product card, the product suggestions, and the price facet.

Property Type Default value Description
priceColor string #333 A CSS colour value. This affects the text colour for the default price. All valid CSS colours and methods can be used.
priceSaleColor string #F13435 A CSS colour value. This affects the text colour 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 colour 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.
priceFontSize string 14px Affects the font-size of prices.
×
Copyright

This online publication is intellectual property of Apptus Technologies. Its contents can be duplicated in part or whole, provided that a copyright label is visibly located on each copy and the copy is used in conjunction with the product described within this document.

All information found in these documents has been compiled with utmost attention to detail. However, this does not guarantee complete accuracy. Neither Apptus Technologies nor the authors shall be held liable for possible errors or the consequences thereof.

Software and hardware descriptions cited in these documents might be registered trademarks. All trade names are subject to copyright restrictions and may be registered trademarks. Apptus Technologies essentially adheres to the manufacturer’s spelling. Names of products and trademarks appearing in this document, with or without specific notation, are likewise subject to trademark and trade protection laws and may thus fall under copyright restrictions.

CLOSE