ThemeClasses

Purpose

This page documents a small set of theme classes that are generated from the SCSS layer and are used across the theme to support consistent UI flows.

It is not a full CSS reference; it focuses on the classes that act as “building blocks” for interactions and reusable UI patterns.

Some of these classes also appear in the general styling documentation as examples, but this page is the canonical curated list of the “theme-level” utility classes.
In particular, classes from Assets/scss/base/_custom-classes.scss may not be obvious from markup alone, so they are documented explicitly here.

Buttons

Source: Assets/scss/elements/_buttons.scss

.btn — base button class.

.btn__icon — icon-only button styling.

Common modifiers:

Variants: .btn--primary, .btn--primary-outline, .btn--accent, .btn--transparent

Sizes: .btn--xl, .btn--lg, .btn--md, .btn--sm

Source: Assets/scss/elements/_modal.scss

.modal — modal overlay/backdrop container.

.modal__box — modal content container.

.modal__box--product — product quick-view modal variant.

Related (product modal):

.modal__box--product__title-cat — header/title/category area.

.modal__box--product__btn-add — add-to-cart button wrapper.

Toast

Source: Assets/scss/elements/_toast.scss

.toast — toast notifications container.

.toast__box — base toast message box.

Variants: .toast__box--info, .toast__box--error, .toast__box--success (commonly map to $store.toast message type).

Compare (floating button)

Source: Assets/scss/base/_global.scss

.floating-compare-button — floating compare button container.

.floating-compare-button__count — counter badge shown on the floating compare button.

Base layout / content helpers

Source: Assets/scss/base/_global.scss

.container — standard page container wrapper (sets responsive max-width and flex layout).

[x-cloak] — hides Alpine elements until Alpine initializes.

.plain-page — base typography spacing for “plain pages” content.

.post — base typography spacing for blog post content.

#post-wrap — blog post content wrapper (mainly image handling).

Custom utility classes

Source: Assets/scss/base/_custom-classes.scss

Responsive visibility

.desktop-only — hides content on viewports smaller than the desktop breakpoint.

.mobile-only — hides content on desktop and above.

Field helper text

.field-status, .helper — small helper/status text below fields.

Loading indicators

.dot-flashing — three-dot loading indicator.

.isLoading — adds an inline loading “spinner ring” overlay to a container.

.hideLoading — hides the ring and restores child opacity (used as .isLoading.hideLoading).

Scrollbar styling

.custom-scrollbar — applies a thin WebKit scrollbar with a primary-colored thumb.

.custom-scrollbar--lg — slightly thicker scrollbar.

.custom-scrollbar--gray — gray thumb.

Shadows

.shadow--1, .shadow--2, .shadow--3 — predefined box-shadow elevations.

Responsive: .lg:shadow--1, .lg:shadow--2, .lg:shadow--3, .lg:shadow-none.

Layout helpers

.two-cols — builds a 2-column responsive layout.

.right-container, .left-container — align content to theme container edges on large screens.

These exist to support precise megamenu column sizing and alignment at desktop breakpoints.

.lg:menu-5-width-first

.lg:menu-5-width

.lg:left-2-width

.lg:left-3-width (supports .burger variant)

.lg:left-4-width (supports .burger variant)

.lg:pl-container (desktop container-aligned left padding)

Form state helpers

.valid, .invalid — enables field state icons inside the sibling label (~ label .icon-state).

.input-disabled — disabled input styling.

ThemeClasses

Purpose#

Buttons#

Modal#

Toast#

Compare (floating button)#

Base layout / content helpers#

Custom utility classes#

Responsive visibility#

Field helper text#

Loading indicators#

Scrollbar styling#

Shadows#

Layout helpers#

Navigation / megamenu positioning helpers#

Form state helpers#