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 |
Minicart |
Page > Cart > Continueshopping > Text Transform
| --ads-page-cart-continueshopping-texttransform
| Uppercase
| Sets the text transform for the Continue Shopping Button in the Minicart | NOP CSS |
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 (Auth0) |
Background Image Page > Accounts > Hero > Background Image
| --ads-page-accounts-hero-backgroundimage
| url('https://awaccountsdatashared.blob.core.windows.net/shared/bg--aspenware.jpg')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
| | Sets the Logo Image on the Vouchers in Accounts | Public UI |
Background Image
Page > Accounts > Background Image | --ads-page-accounts-background-image
| url('https://awaccountsdatashared.blob.core.windows.net/shared/bg--aspenware.jpg')
| Sets the background image for Accounts Pages | Public UI |
Logo Image
Page > Accounts > Logo Image | --ads-page-accounts-logo-image
| url('https://awaccountsdatashared.blob.core.windows.net/shared/logo-sidenav.png')
| Sets the Logo Image for Accounts Pages | Public UI |
Width
Page > Accounts > Logo Image > Desktop > Width | --ads-page-accounts-logo-desktop-width
| 70%
| Sets the logo width for accounts pages on desktop. Logo Height is automatically set proportionally to width. | Public UI |
Width
Page > Accounts > Logo Image > Mobile > Width | --ads-page-accounts-logo-mobile-width
| var(--ads-header-logo-width)
| Sets the logo width for accounts pages on mobile. Logo Height is automatically set proportionally to width. | Public UI |
Color
Page > Accounts > Mask > Color | --ads-page-accounts-mask-color
| #000
| Sets the mask overlay color for the accounts page image | Public UI |
Opacity
Page > Accounts > Mask > Opacity | --ads-page-accounts-mask-opacity
| .6
| Sets the mask overlay opacity for the accounts page image | Public UI |
Color
Page > Accounts > Button > Color | --ads-page-accounts-button-color
| var(--ads-brand-primary-color)
| Sets the primary button background color for the Accounts pages | Public UI |
Color
Page > Accounts > Button > Text Color | --ads-page-accounts-button-text-color
| var(--ads-brand-white, #fff)
| Sets the primary button text color for the Accounts pages | Public UI |
Checkout |
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 |
Text Transform Page > PDP > Product > Title > Text Transform
| --ads-page-pdp-product-title-texttransform
| none
| Sets the text transform variant for the PDP Product title in Public UI | Public UI |
Text Transform Page > PDP > Attribute > Title > Text Transform
| --ads-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 > Container > Background Color
| --ads-page-plp-container-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 container background color | Theme Designer Base Theme |
Text Color Page > PLP > Cards > 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 |