Property / Path	CSS Custom Prop	Default Value	Effects	Provided By
Global
Box Shadow / Drop Shadow `Page > Dropshadow`	`--ads-page-boxshadow`	`0 0 7px rgba(42, 29, 19, 0.33)`	Sets the drop-shadow on the page container. Can set to `none` to remove it for a “flat” page look	Theme Designer Base Theme
Background Color `Page > Background Color`	`--ads-page-backgroundcolor` (the “p” on the end is intentional - it tells TD to render a Color Picker instead of the default Swatch Selector)	`#f3f2f1`	Sets the global page background color	Theme Designer Base Theme
Login Page
Background Image `Page > Login> Background Image`	`--ads-page-login-backgroundimage`	`--ads-page-checkout-backgroundimage`	Sets the Login Page Background Image (non-Identity)	Theme Designer Base Theme
Account Page
Background Image `Page > Accounts > Hero > Background Image`	`--ads-page-accounts-hero-backgroundimage`	`url('../images/half-hero-default-1920.jpg')`	Sets the Half Hero on the Account Pages	Theme Designer Base Theme
Logo Image `Page > Accounts > Voucher > Logo Image`	`--ads-page-accounts-voucher-logo-image`	`--ads-page-accounts-logo-image`	Sets the Logo Image on the Vouchers in Accounts	Theme Designer Base Theme
Background Color `Page > Checkout > Header > Background Color`	`--ads-page-checkout-header-backgroundcolor`	`--ads-brand-primary-color`	Sets the checkout page header background color	Theme Designer Base Theme
Text Color `Page > Checkout > Header > Text Color`	`--ads-page-checkout-header-text-color`	`#fff`	Sets the checkout page header default text color	Theme Designer Base Theme
Color `Page > Checkout > Header > Text > Active > Color`	`--ads-page-checkout-header-text-active-color`	`--ads-brand-secondary-color`	Sets the checkout page header active text color	Theme Designer Base Theme
Background Color `Page > Checkout > Footer > Background Color`	`--ads-page-checkout-footer-backgroundcolor`	`--ads-brand-primary-color`	Sets the checkout page footer background color	Theme Designer Base Theme
Background Color `Page > Checkout > Footer > Button > Background Color`	`--ads-page-checkout-footer-button-backgroundcolor`	`--ads-brand-secondary-color`	Sets the checkout page footer button background color	Theme Designer Base Theme
Text Color `Page > Checkout > Footer > Button > Text Color`	`--ads-page-checkout-footer-button-textcolor`	`--ads-brand-white`	Sets the checkout page footer button textcolor	Theme Designer Base Theme
Logo Image `Page > Checkout > Header > Logo Image`	`--ads-page-checkout-header-logo-image`	`url('https://awro-dev.aspenware.net/themes/PeakResort/content/images/logo.png')`	Sets the checkout page header logo image	Theme Designer Base Theme
Logo Height `Page > Checkout > Header > Logo height`	`--ads-page-checkout-header-logo-height`	`100px`	Sets the checkout page header logo height	Theme Designer Base Theme
Background Image `Page > Checkout > Background > Background Image`	`--ads-page-checkout-background-backgroundimage`	`url('../images/checkout-background.jpg')`	Sets the checkout page background image	Theme Designer Base Theme
PDP
Background Color `Page > PDP > Buttons > Radio > Background Color`	`--ads-page-pdp-buttons-radio-backgroundcolor`	`--ads-buttons-primary-backgroundcolor`	Sets the radio button active background color	Theme Designer Base Theme
Font Family `Page > PDP > Card > Title > Font Family`	`--ads-page-pdp-card-title-fontfamily`	`--ads-brand-primary-fontfamily`	Sets the PDP page checkout card header font family	Theme Designer Base Theme
Color `Page > PDP > Title > Color`	`--ads-page-pdp-title-color`	`--ads-headings-color``	Sets the PDP page title color.	Theme Designer Base Theme
Color `Page > PDP > Card > Title > Color`	`--ads-page-pdp-options-title-color`	`--ads-brand-primary-color`	Sets the PDP page options title color	Theme Designer Base Theme
Background Color `Page > PDP > Buttons > Checkout > Background Color`	`--ads-page-pdp-buttons-checkout-backgroundcolor`	`--ads-buttons-primary-backgroundcolor`	Sets the PDP page checkout button background color	Theme Designer Base Theme
Display (Hero) `Page > PDP > Hero > Dynamic > Display`	`--ads-page-pdp-hero-dynamic-herodisplay`	`none`	Sets the CSS display type `[none, block]` for the dynamic here on the PDP pages. Setting to `block` will display the dynamic hero and hide the static one.	Theme Designer Base Theme
PLP
Background ColorText Transform `Page > PLP PDP > Product > Container Title > Background ColorText Transform`	`--ads-page-plppdp-product-containertitle-backgroundcolortexttransform`	`none`(the “p” on the end is intentional - it tells TD to render a Color Picker instead of the default Swatch Selector)	Sets the text transform variant for the PDP Product title in Public UI	Public UI
Text Transform `Page > PDP > Attribute > Title > Text Transform`	`--ads-brand-white`	Sets the PLP Page container background color	Theme Designer Base Theme	Text `page-pdp-attribute-title-texttransform`	`none`	Sets the text transform variant for the PDP Attribute title in Public UI	Pubic UI
PLP
Background Color `Page > PLP > Cards Container > Button > Text Background Color`	`--ads-page-plp-cards-button-textcolorcontainer-backgroundcolor` (the “p” on the end is intentional - it tells TD to render a Color Picker instead of the default Swatch Selector)	`--ads-brand-white`	Sets the PLP Page card button text container background color	Theme Designer Base Theme
Text Color `Page > PLP > Cards > Price Button > Text Color`	`--ads-page-plp-cards-button-textcolor`	`--ads-brand-white`	Sets the PLP Page card button text color	Theme Designer Base Theme
Text Color `Page > PLP > Cards > Price > Text Color`	`--ads-page-plp-cards-price-textcolor`	`--ads-brand-secondary-color`	Sets the PLP Page card price text color	Theme Designer Base Theme
Text Color `Page > PLP > Cards > Button > Hover > Text Color`	`--ads-page-plp-cards-button-hover-textcolor`	`--ads-brand-white`	Sets the PLP Page card button hover text color	Theme Designer Base Theme
Background Color `Page > PLP > Cards > Button > Background Color`	`--ads-page-plp-cards-button-backgroundcolor`	`--ads-brand-secondary-color`	Sets the PLP Page card button default background color	Theme Designer Base Theme
Background Color `Page > PLP > Cards > Button > Hover > Background Color`	`--ads-page-plp-cards-button-hover-backgroundcolor`	`--ads-brand-secondary-hover-color`	Sets the PLP Page cards button hover background color	Theme Designer Base Theme
Font Family `Page > PLP > Cards > Header > Font Family`	`--ads-page-plp-cards-header-fontfamily`	`--ads-headings-fontfamily`	Sets the PLP Page cards header font family	Theme Designer Base Theme
Font Family `Page > PLP > Cards > Button > Font Family`	`--ads-page-plp-cards-button-fontfamily`	`--ads-brand-primary-fontfamily`	Sets the PLP Page cards button font family	Theme Designer Base Theme
Font Family `Page > PLP > Cards > Price > Font Family`	`--ads-page-plp-cards-price-fontfamily`	`--ads-brand-secondary-fontfamily`	Sets the PLP Page cards price font family	Theme Designer Base Theme
Font Family `Page > PLP > Cards > Body > Font Family`	`--ads-page-plp-cards-body-fontfamily`	`--ads-brand-primary-fontfamily`	Sets the PLP Page cards body copy font family	Theme Designer Base Theme
Color `Page > PLP > Cards > Header > Color`	`--ads-page-plp-cards-header-color`	`--ads-headings-color`	Sets the PLP Page cards header color	Theme Designer Base Theme
Color `Page > PLP > Cards > Button > Text`	`--ads-page-plp-cards-button-text`	`'Shop Now'`	Sets the PLP Page cards action button copy	Theme Designer Base Theme
Display (Hero) `Page > PLP > Hero > Dynamic > Display`	`--ads-page-plp-hero-dynamic-herodisplay`	`none`	Sets the CSS display type `[none, block]` for the dynamic here on the PLP pages. Setting to `block` will display the dynamic hero and hide the static one.	Theme Designer Base Theme
Background Image `Page > PLP > Hero > Static > Background Image`	`--ads-page-plp-hero-static-backgroundimage`	`url('../images/default-category-hero.jpg')`	Sets the PLP and PDP Page static hero background image	Theme Designer Base Theme
Height `Page > PLP > Hero > Hero Height`	`--ads-page-plp-hero-heroheight`	`285px`	Sets the PLP page hero height with the following options: `['285px', '400px', '550px']` `'285px' = Short Hero` `'400px' = Medium Hero` `'550px' = Tall Hero`	Theme Designer Base Theme

Property	CSS Custom Prop	Default Value	Effects	Provided By
Background Color `Brand > Tabs > Active > Background Color`	`--ads-tabs-active-backgroundcolor`	`--ads-brand-white`	Sets the tab active background color	Theme Designer Base Theme
`Brand > Tabs > Active > Background Color`	`--ads-tabs-bar-backgroundcolor`	`--ads-brand-primary-color`	Sets the tab bar background color	Theme Designer Base Theme
`Brand > Tabs > Text > Active > Text Color`	`--ads-tabs-text-active-textcolor`	`--ads-brand-primary-color`	Sets the active tab text	Theme Designer Base Theme
`Brand > Tabs > Text > Text Color`	`--ads-tabs-text-textcolor`	`--ads-brand-white`	Sets the default tab text color	Theme Designer Base Theme

K. Public UI - Calendar

...

These properties apply to global Input variables
Property
CSS Custom Prop
Default Value
Effects
Provided By
Text Transform
`Calendar > Title > Text Transform`
`--ads-calendar-title-texttransform`
`capitalize`
Sets the text transform variant for the Public UI Calendar Title
Public UI
`Calendar > Month > Text Transform`
`--ads-calendar-month-texttransform`
`capitalize`
Sets the text transform variant for the Public UI Calendar Month text
Public UI
`Calendar > Legend > Text Transform`
`--ads-calendar-legend-texttransform`
`capitalize`
Sets the text transform variant for the Public UI Calendar Legend text
Public UI

L. Public UI - Inputs

These properties apply to global Input variables

Property

CSS Custom Prop

Default Value

Effects

Provided By

Text Transform

Input > Attribute > Title > Text Transform

--ads-input-attribute-title-texttransform

none

Sets the input attribute title text transform variant for Checkbox Inputs in Public UI

Public UI

M. Public UI - Border

These properties apply to global border variables like radius, width, and color.

Property

CSS Custom Prop

Default Value

Effects

Provided By

Text Transform

Border > Border Radius

--ads-border-borderradius

none

Sets the global base border radius for elements that inherit from this variable

Public UI

Versions Compared

Old Version 20

New Version 21

Key

Global

Login Page

Account Page

PDP

PLP

PLP

K. Public UI - Calendar

L. Public UI - Inputs

M. Public UI - Border

Property	CSS Custom Prop	Default Value	Effects	Provided By


Text Transform `Calendar > Title > Text Transform`	`--ads-calendar-title-texttransform`	`capitalize`	Sets the text transform variant for the Public UI Calendar Title	Public UI
`Calendar > Month > Text Transform`	`--ads-calendar-month-texttransform`	`capitalize`	Sets the text transform variant for the Public UI Calendar Month text	Public UI
`Calendar > Legend > Text Transform`	`--ads-calendar-legend-texttransform`	`capitalize`	Sets the text transform variant for the Public UI Calendar Legend text	Public UI

Page Comparison

Versions Compared

Old Version 20

New Version 21

Key

Global

Login Page

Account Page

PDP

PLP

PLP

K. Public UI - Calendar

L. Public UI - Inputs

M. Public UI - Border