Elements Panel — Field Guide

Overview

Each section below matches a tab in the Elements admin panel. For every field group, it explains what changes on the live site and which fields matter most for a clean result. General formatting rules (units, hex format, etc.) are at the end.

A general understanding of CSS will simplify using the Elements admin.

PLEASE NOTE: Default css is setup to style all elements, and for a simple design, only the Primary and Secondary colors need to be set in the Base Colors & Typography tab. For a more robust design, as you are first becoming familiar with the platform, we suggest trying every input as you build out a site to see how it impacts the design.

Base Colors & Typography

Sets the site’s overall color palette, base type, and header styles. Most other tabs’ colors fall back to these if left blank.

Each color input displays a small swatch of the rendered color. If the input is blank, the swatch displays the default color set by the primary, secondary, or tertiary inputs, or the defaults set by the base css.

• Main Site Colors — Primary, Secondary, Tertiary. These drive header, button, table, and background colors across the whole site unless overridden elsewhere. Primary and Secondary matter most for a consistent look; Tertiary is rarely needed.
• Site Fonts — Import URL for embedding a Google/Adobe font, plus which font serves as the site’s “headers,” “serif,” and “sans-serif” options (picked by name elsewhere in the panel).
• Site Body (Base) Defaults — Base paragraph font size, line height, weight, and color, plus link and link-hover color. This is the fallback typography/color for all body text.
• Site Headers Defaults — H1/H2/H3 appearance sitewide: font family, weight, case (uppercase/lowercase/etc.), and per-level color, size, letter spacing, and bottom margin. Leaving a header’s Color blank falls back to the Primary site color.
• Checkout Header Specifics — Font size just for the checkout page’s header.

Content Areas

Controls the structural regions of every page: header, main content, footer.

• Header — Background, font, and link colors, max width, height, and padding for the site header bar.
• Main Content — Max width and padding for the main content region (excludes header, menu, and footer).
• Footer — Background, font, link, and hover colors, plus padding.
• Content Area Order — Rearranges the vertical stacking order of header, slider/banner, primary nav, main content, and footer. Mostly used to swap slider/banner and nav order.
• Header padding vs. Header Wrapper padding — Header padding is space around the whole header bar, outside its background. Header Wrapper padding is space inside that bar, around the logo/nav/search content specifically — the two can differ.

Home & Catalog Pages

Controls product/category listing pages — both home page groups and the catalog page.

• Home Page Layout — Item display toggles (title/description/price), column counts, slider/banner sizing and position, and padding for home page content areas.
• Catalog Pages Layout — The same kind of display/column controls, but for the catalog/category page, plus the quantity-restrictions disclaimer text.
• Home & Catalog Pages Layout — Shared visual design for product/category cards: backgrounds, borders, hover effects, grid spacing, content alignment, and image aspect ratio.
• Home & Catalog Pages Typography — Font, size, weight, letter spacing, and color for item titles, descriptions, and prices.
• Group A–D Columns — The home page can show up to four separate product/category groups; each gets its own independent column-count field.
• Home Page nested widths/padding — Main Content sizes the outer home-page wrapper; Home Body sizes a text/content block on the page; Home Products sizes the product/category grid itself. All three nest inside each other and can be sized independently.
• Card design & hover effects — Background, border, border radius, shadow, and padding style each product/category card; separate hover versions of border and shadow change it on mouseover. Image filter, opacity, and transform (plus their hover versions) create effects like a zoom, fade, or brightness change on the product image when hovered.

Navigation

Controls the primary (main) and secondary (upper header) menus, plus the mega-menu dropdown.

• Primary Menu Type — Which menu displays and its layout (horizontal, vertical, left nav). Not available on every site.
• Primary Menu Styling — Padding, colors, font, size, weight, case, and letter spacing for the primary nav, plus its text labels.
• Secondary Menu Styling — The same styling controls for the secondary (upper-right header) menu, including its dropdown select text.
• Dropdown w/MegaMenu Styling — Link colors and text labels inside the mega-menu dropdown, plus height/width and multi-column layout for larger menus.
• MenuText fields — Style non-link text labels inside a menu (as opposed to clickable links), separately from the Font/Link colors above.
• Bullet & Separator fields — Small icon codes (not plain text) shown before or after certain menu items, such as an external-link marker or a divider character. Leave blank unless you have the specific icon code to use.

Buttons

Controls every button style across the site, in three groups that don’t inherit from each other.

• Standard Buttons — General buttons: font, size, background, padding, border, border radius. Background defaults to Company Color Two.
• Call To Action Buttons — Home page product buttons, add-to-cart, and checkout action buttons. Same style controls as Standard, but background defaults to Company Color instead.
• Added to Cart Popup Buttons — Buttons inside the “item added to cart” popup: font, background, border radius.
• Height, Min Height, Width — Force a fixed button size instead of letting it size itself to its padding and text. Leave blank for a button that sizes naturally to its content.

Miscellaneous

A catch-all for product page extras, show/hide toggles, and site messaging.

• Product Page — Overlay asset background color and max icon size (e.g. size charts, badges).
• Product Page Qty Restrictions Disclaimer Text — Font styling for quantity-limit disclaimer text on the product page.
• Table Header/Footer — Font colors for table headers/footers (e.g. size charts).
• Show/Hide Page Elements — Toggles for header, product page, cart page, and address page elements.
• Miscellaneous Messaging — Cart message text, payment disclaimer text, and footer “powered by” text/link.
• Table Header Border — Border around the table header row itself (e.g. on a size chart table).

Formatting Notes

• Colors — Hex (with the #), shorthand hex, RGB/RGBA, or a --variable reference are all accepted.
• Type sizes — Set in ems; don’t include the unit. Most spacing/padding fields are in px, vh, or vw depending on the field — check each field’s on-page note if unsure.
• Font weight — Numeric (400, 700, 900, etc.); default is usually 400 for body text, 700 for headers.
• Leaving a field blank falls back to a sensible site default rather than breaking anything — most colors fall back to Primary/Secondary site color, most type falls back to the Base or Header defaults.