Design properties

Design properties are defined in the /themes/_themeName_/design-properties.json file. Modification of these properties affects the global AppDirect platform styling, such as the text and button styling. Custom design properties are still in development for some administration pages (such as the Merchandising Options page).

The design properties file exists primarily to support migration of custom themes from legacy storefront tools to Storefront Builder (see Migrate marketplace themes to storefront themes and Global platform CSS). We recommend that you only modify the design properties if you have to migrate themes.

note

The administration pages have a different architecture than the storefront. While the storefront is managed by Marketplace Managers in the user interface (UI), the administration pages are in constant evolution, so it is more difficult to modify styling on them. As AppDirect updates the platform, some pages might not be affected by the design properties.

Properties

Properties are divided based on the user interface (UI) area. The properties in design-properties.json are prefixed with their target element. For example, headerNavBg is for the header and btnDefaultRadius is for buttons. The colorPrimary property does not target any particular element, but it specifies the primary marketplace color.

Header properties

Use the header properties to modify the header colors. To override any or all of these properties, modify the header CSS in /themes/_themeName_/header-footer/css. The following header properties appear in the design-properties.json file:

• "headerNavBg": "#2d2a27",
• "headerNavBorderColor": "#242424",
• "headerNavItemBgHover": "#3e3b37",
• "headerNavItemBgSelected": "#24221e",
• "headerNavFontColor": "#999",
• "headerNavFontHoverColor": "#d2d5d9",
• "headerNavFontSelectedColor": "#fff",
• "headerNavTooltipBg": "#2d2a27",
• "headerNavTooltipFontColor": "#fff",
• "headerNavDropdownFontColor": "#575757",
• "headerNavDropdownBg": "#fff",
• "headerNavDropdownBorderColor": "#eaeaea",
• "headerNavDropdownBorderColorHover": "#007b99",
• "headerNavDropdownBgHover": "#009abf",
• "headerNavDropdownFontColorHover": "#fff",
• "headerNavDropdownMarginRight": "0",

Button properties

After you define the primary, secondary, and emphasis color, the other related colors automatically follow, such as the border colors. You can include the following button properties in the design-properties.json file (sample values shown):

• "colorPrimary": "#006080",
• "colorSecondary": "#009abf",
• "colorEmphasis": "#76bd22",
• "btnDefaultBackground": "#f4f4f4",
• "btnDefaultRadius": "3px",
• "btnDefaultGradient": "0%",

Text properties

You can include the following text properties in the design-properties.json file (sample values shown):

• "bodyFontFamily": "Arial, \"Helvetica Neue\", Helvetica, sans-serif",
• "bodyFontColorPrimary": "#575757",
• "bodyFontColorSecondary": "#9c9c9c",
• "bodyFontColorTertiary": "#cacaca",
• "bodyLineHeightRatio": "1.6",
• "bodyFontSizeXxsmall": "8px",
• "bodyFontSizeXsmall": "10px",
• "bodyFontSizeSmall": "12px",
• "bodyFontSizeMedium": "14px",
• "bodyFontSizeLarge": "16px",
• "bodyFontSizeXlarge": "18px",
• "bodyFontSizeXxlarge": "20px",
• "linkColor": "#009abf",