Elements Panel – Input Reference
Elements Panel — Input Field Reference
As of:
How to read this reference
Every field in Elements.ascx falls into one of three enforced patterns, based on which (if any) RegularExpressionValidator is attached to it:
| Pattern | Regex | Meaning | Typical use |
|---|---|---|---|
| Unitless integer [INT] | ^\d*$ |
Digits only — no decimal, no unit, no negative sign | Pixel values (padding, margins, widths, heights, gaps) — CSS appends px |
| Unitless decimal [EM] | ^(0|[1-9]\d*)(\.\d+)?$ |
Whole number or decimal, no unit | Em values (font sizes, line-heights) — CSS appends em |
| Free text [FREE] | none | Anything goes — server trusts the value as typed | Colors, font families, quoted strings, URLs, CSS shorthand, and any field where a unit must be typed into the value itself (border-radius, letter-spacing, banner position, etc.) |
The key trap: “no validator” does not mean “no rules” — the rule lives in the tooltip/help text instead of code. Border Radius and Letter Spacing are free text specifically because they accept mixed units (px, em, rem, %) and the typed value must include that unit. Colors are free text because they accept hex, shorthand hex, rgb(), rgba(), or a var(--name) reference; a blank color field falls back to a CSS default or a Primary/Secondary/Tertiary color.
Each field below is tagged [INT], [EM], or [FREE] with its required/allowed unit.
Base Colors & Typography
| Input Field | Formatting Reference | Control ID (Developer Reference) |
|---|---|---|
| Primary / Secondary / Tertiary Color | [FREE] hex #rgb/#rrggbb, rgb(), rgba(), or var(--name) |
TextBoxCompanyColor(2/3) |
| Font Import URL | [FREE] URL only, no @import/url() wrapper, wrapped in ' '. Not consumed as a CSS var() anywhere in this stylesheet bundle — --font-url is declared with a blank default in _mixins.scss but never read back by any rule here, so it’s likely injected directly into an @import url(...) by the site’s master page/head, outside these files. Worth confirming with whoever owns that markup. |
TextBoxFontImportURL |
| Headers / Serif / Sans-Serif Font Family | [FREE] CSS font-family list; quote names with spaces, e.g. 'Open Sans', sans-serif |
TextBoxHeadersFont, TextBoxSerifFont, TextBoxSansSerifFont |
| Body Font Size | [EM] number, no unit — rendered in em | TextBoxBaseFontSize |
| Body Line Height | [EM] number, no unit | TextBoxBaseLineHeight |
| Body Font Weight | [INT] integer only, e.g. 400, 700, 900; default 400 |
TextBoxBaseFontWeight |
| Body Font / Link / Link Hover Color | [FREE] hex, shorthand hex, rgb()/rgba(), or var() |
TextBoxBaseFontColor, TextBoxLinkColor, TextBoxLinkHoverColor |
| Headers Font Family (H1–H3 shared) | dropdown — fixed values: var(--gfHeaders), var(--serif), var(--sans-serif), or blank |
DropDownListHeadersFontFamily |
| Headers Font Weight | [INT] integer only | TextBoxHeadersFontWeight |
| Headers Text Transform | dropdown — fixed: none, capitalize, lowercase, uppercase |
DropDownListHeadersTextTransform |
| H1 Color / H2 Color / H3 Color | [FREE] hex/rgb/rgba/var() |
TextBoxH1Color / H2Color / H3Color |
| H1 / H2 / H3 Size | [EM] number, no unit — multiplies base font size | TextBoxH1Size / H2Size / H3Size |
| H1 / H2 Letter Spacing | [FREE] number and unit required, e.g. 3px or .05em |
TextBoxH1LetterSpacing, TextBoxH2LetterSpacing |
| H1 / H2 Font Family | dropdown — same fixed set as Headers Font Family | DropDownListH1FontFamily, DropDownListH2FontFamily |
| H1 / H2 / H3 Bottom Margin | [INT] integer, no unit — pixels | TextBoxH1BottomMargin / H2BottomMargin / H3BottomMargin |
| Checkout Header Size | [EM] number, no unit | TextBoxCheckoutHeaderSize |
Note: H1/H2 have a separate Letter Spacing field that is free-text (unit required); H3 has no letter-spacing field at all.
Content Areas (Header / Main Content / Footer / Content Area Order)
| Input Field | Formatting Reference | Control ID (Developer Reference) |
|---|---|---|
| Header BG Color | [FREE] hex/rgb/rgba/var() |
TextBoxHeaderBGColor |
| Header Max Width | [INT] integer, no unit — pixels; enter a large number for full-width | TextBoxHeaderMaxWidth |
| Header Padding (TB/LR) | [INT] integer, no unit — pixels. (This used to render in vh/vw with the TB/LR multipliers accidentally swapped — both axes were converted to px, so that bug no longer applies.) | TextBoxHeaderTBPadding, TextBoxHeaderLRPadding |
| Header Wrapper Padding (TB/LR) | [INT] integer, no unit — pixels. Same fix as Header Padding above — both axes now use px. | TextBoxHeaderWrapperTBPadding, TextBoxHeaderWrapperLRPadding |
| Logo Max Height | [INT] integer, no unit — pixels | TextBoxLogoMaxHeight |
| Header Elements Alignment | dropdown — fixed: column (Nav On Top), initial (Inline), column-reverse (Search On Top), or blank |
DropDownListHeaderElementsAlignment |
| Section (Main Content) BG Color | [FREE] hex/rgb/rgba/var() |
TextBoxSectionBGColor |
| Max Content Width | [INT] integer, no unit — pixels; default full-width, excludes Header/Menu/Footer | TextBoxContentMaxWidth |
| Main Content Padding (T/B/L/R) | [INT] integer, no unit — pixels. | TextBoxMainContentTopPadding, …Bottom, …Left, …Right |
| Section BG Image URL | [FREE] must be full url(...) wrapper, e.g. url(https://...); use none to clear |
TextBoxSectionBGImageURL |
| Footer BG Color | [FREE] hex/rgb/rgba/var() |
TextBoxFooterBGColor |
| Footer Max Width | [INT] integer, no unit — pixels | TextBoxFooterMaxWidth |
| Footer Padding (T/B/L/R) | [INT] integer, no unit — pixels | TextBoxFooterTopPadding, …Bottom, …Left, …Right |
| Footer Font / Link / Link Hover Color | [FREE] hex/rgb/rgba/var() |
TextBoxFooterFontColor, TextBoxFooterLinkColor, TextBoxFooterLinkHoverColor |
| Content Area Order (Header, Slider/Banner, Pri Nav, Main Content, Footer) | [FREE] plain integer (CSS order property) — no validator, so negative numbers are technically accepted; default order is Header, Slider/Banner, Primary Nav, Main Content, Footer |
TextBoxHeaderOrder, TextBoxSliderBannerOrder, TextBoxPriNavOrder, TextBoxMainContentOrder, TextBoxFooterOrder |
Home Page Layout & Catalog Pages Layout
| Input Field | Formatting Reference | Control ID (Developer Reference) |
|---|---|---|
| Show Title/Description/Price (Home & Catalog, separate toggles) | dropdown — fixed: block (Yes) / none (No) |
DropDownListShow(Home|Catalog)ProductTitle/Description/Price |
| Group A–D Columns | [INT] integer, no unit | TextBoxGroupAColumns…DColumns |
| Catalog Columns | [INT] integer, no unit | TextBoxCatalogColumns |
| Slider BG Color | [FREE] hex/rgb/rgba/var() |
TextBoxSliderBGColor |
| Max Slider Width | [INT] integer, no unit — pixels | TextBoxSliderMaxWidth |
| Banner Height | [FREE] but must be a plain unitless integer — no validator enforces this, but the CSS wraps it in calc(var(--banner-height) * 1px), so typing a unit (e.g. 300px) produces invalid CSS and breaks the banner. Default 300. |
TextBoxBannerHeight |
| Banner Position | [FREE] CSS object-position syntax (crops the banner image, not a background) — value(s) + unit or keyword, e.g. 150px 30% or -50px top; default center. |
TextBoxBannerPosition |
| Slider Padding (T/B, L/R) | [INT] integer, no unit — pixels. | TextBoxSliderTBPadding, TextBoxSliderLRPadding |
| Home Page Content Max Widths (Section Wrapper / Body Copy / Groups Wrapper) | [INT] integer, no unit — but currently has no effect: none of these three CSS variables (--home-page-maincontent-max-width, --home-page-homebody-max-width, --home-page-homeproducts-max-width) are referenced anywhere in the stylesheet outside their :root defaults. Saving a value here won’t change anything on the page. |
TextBoxHomePageMainContentMaxWidth, …HomeBodyMaxWidth, …HomeProductsMaxWidth |
| Home Page Content Padding (Section/Body/Groups × T/B/L/R) | [INT] integer, no unit — pixels, same as Main Content padding on the Content Areas tab. | TextBoxHomePage…TopPadding/BottomPadding/LeftPadding/RightPadding (12 fields) |
| Show Category Price on Subcategory | dropdown — fixed: blank, none (No), block (Yes) |
DropDownListShowCatalogSubCategoryPrice |
| Catalog Price From Text | [FREE] plain text | TextBoxCatalogPriceFromText |
| Show Category Price From Text | dropdown — fixed: none (No), inline-block (Yes) |
DropDownListShowCatalogPriceFromText |
| Show Qty Restrictions Disclaimer (after Product/Category Title) | dropdown — fixed: blank, none, block |
DropDownListShowCatalogQtyResDisclaimerTextOnTitle |
| Qty Restrictions Disclaimer Text | [FREE] plain text | TextBoxCatalogQtyResDisclaimerText |
| Qty Restrictions Disclaimer Text Size | [EM] number, no unit | TextBoxCatalogQtyResDisclaimerTextSize |
| Qty Restrictions Disclaimer Text Color | [FREE] hex/rgb/rgba/var() |
TextBoxCatalogQtyResDisclaimerTextColor |
| Qty Restrictions Disclaimer Text Font Weight | [INT] integer, no unit | TextBoxCatalogQtyResDisclaimerTextFontWeight |
| Qty Restrictions Disclaimer Text Font Family | dropdown — fixed: blank, var(--gfHeaders), var(--serif), var(--sans-serif) |
DropDownListCatalogQtyResDisclaimerTextFontFamily |
Note: the Home Page Content Padding fields (Section/Body/Groups × T/B/L/R) are digits-only [INT] pixels, same as Main Content padding on the Content Areas tab. The three Home Page Content Max Width fields, however, are dead code (see row above).
Home & Catalog Item Design and Typography
| Input Field | Formatting Reference | Control ID (Developer Reference) |
|---|---|---|
| Item BG Color | [FREE] hex/rgb/rgba/var() |
TextBoxHomeCatalogLIBGColor |
| Item Border / Item Hover Border | [FREE] CSS border shorthand, e.g. 2px solid #ff0000; default none |
TextBoxHomeCatalogLIBorder, …LIHoverBorder |
| Item Border Radius | [FREE] number and unit required, e.g. 25px, 2rem, 3em |
TextBoxHomeCatalogLIBorderRadius |
| Item Shadow / Item Hover Shadow | [FREE] CSS box-shadow shorthand |
TextBoxHomeCatalogLIShadow, …LIHoverShadow |
| Item Padding (T/B/L/R) | [INT] integer, no unit — pixels | TextBoxHomeCatalogLITopPadding/BottomPadding/LeftPadding/RightPadding |
| Item Transition / Item Transform | [FREE] raw CSS transition / transform value |
TextBoxHomeCatalogLITransition, …LITransform |
| Item Img Transition / Img Transform | [FREE] raw CSS value | TextBoxHomeCatalogLIImgTransition, …LIImgTransform |
| Item Img Filter / Img Hover Filter | [FREE] raw CSS filter value |
TextBoxHomeCatalogLIImgFilter, …LIImgHoverFilter |
| Item Img Opacity / Img Hover Opacity | [FREE] no validator — CSS opacity expects a unitless 0–1 decimal, but nothing here enforces that range |
TextBoxHomeCatalogLIImgOpacity, …LIImgHoverOpacity |
| Row Gap / Column Gap | [INT] integer, no unit — pixels | TextBoxRowGap, TextBoxColumnGap |
| Item Content Alignment | dropdown — fixed: blank, center, left, right |
DropDownListHomeCatalogProductAlignment |
| Home / Catalog / Product Link Item Aspect Ratio | dropdown — fixed: blank, auto, 1 / 1, 3 / 4, 2 / 3 |
DropDownListHomeGroupItemAspectRatio, DropDownListCatalogLinkItemAspectRatio, DropDownListProductLinkItemAspectRatio |
| Product Title Font Family | dropdown — fixed: blank, var(--gfHeaders), var(--serif), var(--sans-serif) |
DropDownListHomeCatalogProductTitleFontFamily |
| Title / Description / Price Font Size | [EM] number, no unit — Title Font Size now also drives the search results page. _search.scss used to hardcode the search-result title’s size, weight, family, case, and color (and referenced a broken, never-set variable for size); it’s now wired to the same --homecatalog-product-title-* variables and fallbacks as the Home/Catalog product title, so Title Font Size, Font Family, Font Weight, Text Transform, Letter Spacing, Link Color, and Link Hover Color are all consistent across Home, Catalog, and Search. |
TextBoxHomeCatalogProductTitleFontSize, …DescriptionFontSize, …PriceSize |
| Title / Description Line Height | [EM] number, no unit | TextBoxHomeCatalogProductTitleLineHeight, …DescriptionLineHeight |
| Title / Description / Price Font Weight | [INT] integer, no unit | TextBoxHomeCatalogProductTitleFontWeight, …DescriptionFontWeight, …PriceFontWeight |
| Product Title Text Transform | dropdown — fixed: blank, none, capitalize, lowercase, uppercase |
DropDownListProductTitleTextTransform |
| Title / Price Letter Spacing | [FREE] number and unit required, e.g. 3px or .05em |
TextBoxHomeCatalogProductTitleLetterSpacing, …PriceLetterSpacing |
| Link Color / Link Hover Color | [FREE] hex/rgb/rgba/var() |
TextBoxHomeCatalogProductTitleLinkColor, …LinkHoverColor |
| Price Font Family | dropdown — fixed: blank, var(--gfHeaders), var(--serif), var(--sans-serif) |
DropDownListHomeCatalogProductPriceFontFamily |
| Price Color | [FREE] hex/rgb/rgba/var() |
TextBoxHomeCatalogProductPriceColor |
Watch this one: Img Opacity/Hover Opacity have no validator at all — unlike most numeric fields, a bad value (out of 0–1 range, or with a unit) won’t be caught client-side.
| Input Field | Formatting Reference | Control ID (Developer Reference) |
|---|---|---|
| Product Price Font Size | [EM] number, no unit | TextBoxProductPriceFontSize |
| Product Price Font Color | [FREE] hex/rgb/rgba/var() |
TextBoxProductPriceFontColor |
| Product Price Font Weight | [INT] integer, no unit | TextBoxProductPriceFontWeight |
| Product Price Letter Spacing | [FREE] number and unit required | TextBoxProductPriceLetterSpacing |
| Asset BG Color | [FREE] hex/rgb/rgba/var(); default #aaa |
TextBoxAssetBGColor |
| Max Overlay Icon Width / Height | [INT] integer, no unit — pixels; default 100px | TextBoxMaxOverlayIconWidth/Height |
| Show Qty Restrictions Disclaimer (after Product Title) | dropdown — fixed: blank, none, block |
DropDownListShowProductQtyResDisclaimerTextOnTitle |
| Qty Restrictions Disclaimer Text | [FREE] plain text | TextBoxProductQtyResDisclaimerText |
| Qty Restrictions Disclaimer Text Size | [EM] number, no unit | TextBoxProductQtyResDisclaimerTextSize |
| Qty Restrictions Disclaimer Text Color | [FREE] hex/rgb/rgba/var() |
TextBoxProductQtyResDisclaimerTextColor |
| Qty Restrictions Disclaimer Text Font Weight | [INT] integer, no unit | TextBoxProductQtyResDisclaimerTextFontWeight |
| Qty Restrictions Disclaimer Text Font Family | dropdown — fixed: blank, var(--gfHeaders), var(--serif), var(--sans-serif) |
DropDownListProductQtyResDisclaimerTextFontFamily |
| Table Header/Footer Background | [FREE] hex/rgb/rgba/var() |
TextBoxTableHeaderBG |
| Table Header Border | [FREE] CSS border shorthand | TextBoxTableHeaderBorder |
| Table Header Font Size | [EM] number, no unit | TextBoxTableHeaderFontSize |
| Table Header Font Color | [FREE] hex/rgb/rgba/var() |
TextBoxTableHeaderFontColor |
| Table Header Font Weight | [INT] integer, no unit | TextBoxTableHeaderFontWeight |
| Table Header Text Transform | dropdown — fixed: blank, none, capitalize, lowercase, uppercase |
DropDownListTableHeaderTextTransform |
| Show Site Search / Promo Button (Header) | dropdown — fixed: block (Yes), none (No) |
DropDownListShowSiteSearch, DropDownListShowPromoButton |
| Show Product SKU | dropdown — fixed: none (No), block (Yes) |
DropDownListShowProductSKU |
| Show Cart SKU | dropdown — fixed: none (No), block (Yes) |
DropDownListShowCartSKU |
| Show UPS Disclaimer (Address Page) | dropdown — fixed: block (Yes), none (No) |
DropDownListShowUPSDisclaimer |
| Cart Message | [FREE] quoted string; supports \a \a for line breaks |
TextBoxCartMessage |
| Show Cart Message | dropdown — fixed: none (No), block (Yes) |
DropDownListShowCartMessage |
| Payment Disclaimer | [FREE] quoted string; supports \a \a for line breaks; may overwrite a system default disclaimer |
TextBoxPaymentDisclaimer |
| Hide Payment Disclaimer | dropdown — fixed: none (No), block (Yes) — note the field name is “Hide” but Yes/No map the same direction as the “Show” dropdowns elsewhere; double-check polarity here |
DropDownListHidePaymentDisclaimer |


