Skip to content
×
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

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 The font family of the text in eSales components.
productImageHeightRatio number 1.2 The height of product images (cards, suggestions, recommendations) are the result of the imageWidth * productImageHeightRatio.
productImageBrokenURL string https://cdn.esales.apptus.com/
assets/images/image-broken.png
The 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 The margin of the product card title. All valid CSS values except em can be used.
productCardTitleRows number 1 The number of rows used for the product card title. Can be either 1 or 2.
productCardBrandMargin string 0 The margin of the product card brand. All valid CSS values except em can be used.
productCardPriceMargin string 0 0 5px 0 The margin of the product card price. All valid CSS values except em can be used.
productCardThumbnailHintSize string 10px The width and height of the thumbnail hints within the product card info.
productCardThumbnailHintMargin string 9px 4px 0 The margin of the thumbnail hints within the product card info.
ratingIconColor string #333 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 The border colour of the Quick buy button. Can be any valid CSS colour value.
productQuickBuyBorderColorHover string #212121 The 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) The background colour of the Quick buy button while hovering. Can be any valid CSS colour value.
productQuickBuyColor string #212121 The text colour of the Quick buy button. Can be any valid CSS colour value.
productQuickBuyColorHover string Inherited from productQuickBuyColor The text colour of the Quick buy button while hovering. Can be any valid CSS colour value.
productQuickBuyTextTransform string uppercase The text-transform setting of the text of the Quick buy button.
productQuickBuyPosition string none The 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 The background colour of the facet dropdown box.
facetBorderColor string #bbb The border colour of the facet dropdown box.
facetBorderWidth string 1px The border width of the facet dropdown box.
facetHeight string 42px The height of the facet wrapper.
facetHorizontalPadding string 13px The horizontal padding of the facet wrapper to position text horizontally.
facetTextTransform string none The text-transform setting of the facet text.

Recommendations

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

Preamble text

Property Type Default value Description
preambleMaxWidth string 800px The max width of the preamble text field.
preambleLineHeight string initial The line height of the preamble text field.
preambleTextAlign string initial The text-align setting of the preamble text field.

Search assistant

Property Type Default value Description
searchAssistantBorderColor string #bbbbbb The border colour of the search assistant.
searchAssistantBorderRadius string 0 The border radius of the input field.
searchAssistantHeight string 43px The height of the input field.
searchAssistantFontSize string inherited from bodyFontSize The 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) The box-shadow of the 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 and 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 The text colour of the badge.
background string #333 The background of the badge.
border string 0 The border of the badge.
borderRadius string 3px The border radius of the badge.
fontFamily string inherit The font family of the badge text.
fontStyle string none The font style of the badge text.
fontSize string 16px The font size of the badge text.
fontWeight string 500 The font weight of the badge text.
letterSpacing string inherit The letter-spacing setting of the badge text.
lineHeight string 1.6 The line height of the badge text.
textTransform string none The text-transform setting of the badge.
width string auto The width of the badge.
height string auto The height of the badge.
margin string 15px The margins of the badge.
padding string 2px 8px The padding of the badge.
justifyContent string center The justify-content setting for the content of the badge.
parentJustifyContent string flex-end The justify-content setting for the parent element of the badge.
infoColor string #fff The text colour of the description area badge.
infoBackground string #333 The background of the description area badge.
infoBorder string 0 The border of the description area badge.
infoBorderRadius string 3px The border radius of the description area badge.
infoFontFamily string inherit The font family of the description area badge text.
infoFontStyle string none The font style of the description area badge text.
infoFontSize string 13px The font size of the description area badge text.
infoFontWeight string 800 The font weight of the description area badge text.
infoLetterSpacing string 2px The letter-spacing of the description area badge text.
infoLineHeight string 1.6 The line height of the description area badge text.
infoTextTransform string none The text-transform setting of the description area badge.
infoWidth string auto The width of the description area badge.
infoHeight string auto The height of the description area badge.
infoMargin string 6px 0 The margins of the description area badge.
infoPadding string 0 18px The padding of the description area badge.
infoJustifyContent string center The justify-content setting for the content of the description area badge.
infoParentJustifyContent string center The justify-content setting 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
colorSwatchBorderRadius string 50% The 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
headlineColor string rgba(00,00,00, 0.87) The colour of the headline.
headlineFontSize string 32px The font size of the headline in pixels.
headlineFontWeight string 600 The font weight of the headline.
headlineLetterSpacing string 0.4px The letter-spacing setting of the headline.
headlineMobileFontSize string 18px The font size of the headline in pixels for mobile devices.
headlineMobileFontWeight string 800 The font weight of the headline for mobile devices.

Title

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

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

Label

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

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

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
label2Color string rgba(00,00,00, 0.87) The colour of the label-2.
label2FontSize string 12px The font size of the label-2 in pixels.
label2FontWeight string 400 The font weight of the label-2.
label2LetterSpacing string 1px The letter-spacing setting of the label-2.
label2MobileFontSize string 11px The font size of the label-2 in pixels for mobile devices.

Body

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

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

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
body2Color string rgba(00,00,00, 0.87) The colour of the body-2 text.
body2FontSize string 12px The font size of the body-2 text in pixels.
body2FontWeight string 400 The font weight of the body-2 text.
body2LetterSpacing string 1px The letter-spacing setting of the body-2 text.
body2MobileFontSize string 13px The font size of the body-2 text in pixels for mobile devices.

Buttons

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

Property Type Default value Description
buttonOutlineBorderColor string rgba(51,51,51,.87) The border colour of the buttons.
buttonFontSize string 14px The font size of the button text in pixels.
buttonFontWeight string 700 The font weight of the button text.
buttonLetterSpacing string 1px The letter-spacing setting of the button text.
buttonTextTransform string none The text-transform setting of the button text.
buttonLightTextTransform string inherited from buttonTextTransform The text-transform setting 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
productTitleColor string rgba(00, 00, 00, 0.87) The colour of the product title.
productTitleFontFamily string inherit The font family of the product title.
productTitleFontStyle string none The font style of the product title.
productTitleFontSize string 16px The font size of the product title in pixels.
productTitleFontWeight string 600 The font weight of the product title.
productTitleLetterSpacing string 0.4px The letter-spacing setting of the product title.
productTitleTextTransform string none The text-transform setting of the product title.

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
productSubtitleColor string rgba(00, 00, 00, 0.87) The colour of the product sub-title.
productSubtitleFontFamily string inherit The font family of the product sub-title.
productSubtitleFontStyle string none The font style of the product sub-title.
productSubtitleFontSize string 13px The font size of the product sub-title in pixels.
productSubtitleFontWeight string 400 The font weight of the product sub-title.
productSubtitleLetterSpacing string 0.4px The letter-spacing setting of the product sub-title.
productSubtitleTextTransform string none The text-transform setting of the product sub-title.

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 The text colour for the default price. All valid CSS colours and methods can be used.
priceFontFamily string inherit The font family of the prices.
priceFontSize string 14px The font size of the prices in pixels.
priceFontWeight string 800 The font weight of the prices.
priceSaleColor string #F13435 The text colour for the places where discount price is used. All valid CSS colours and methods can be used.
priceInactiveColor string #b5b5b5 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.

Custom font icons

The icons used in the web components can be customised by providing a URL to a .woff-file containing custom font glyphs. When providing custom font glyphs, all icons as specified below must be present in the file.

All font icons

Step by step guide

  1. Create the icons and save them in the SVG vector format. Do not use pixel based icons as they do not scale well.
  2. Replace the icons. Make sure all 74 ligature icons are provided, e.g. only replace the ones that custom icons are provided for.
  3. Create and host a .woff-file containing the custom icons. The creation of a .woff-file could for example be done using an application such as IcoMoon or any other suitable application. For applications that support loading icons as .json-files, the default icons can be loaded and viewed.
  4. Provide the custom icons by initialising eSales with the parameter iconUrl pointing to the .woff-file. For more information, see Script Initialisation.
    // init-esales-fashion.js
    esales.init({
    ...
    iconUrl: 'https://cdn.esalesdrivensite.com/custom-icons.woff',
    ...
    });
    

Last update: May 8, 2020