THEME SETTINGS

Theme Settings Overview

This document describes all available Theme settings and what each group controls. It is intended for internal documentation and onboarding.

Logo

Controls brand logo assets and their behavior.

Logo image upload
Logo size / max width
Mobile logo (if available)
Alt text and accessibility behavior

Colors

Defines global color tokens used across the theme.

Background and foreground colors
Primary / secondary / accent colors
Border and divider colors
Status colors (success, warning, error)

Typography

Manages fonts and text styles used throughout the theme.

Heading font family and scale
Body font family and scale
Font weights
Letter spacing and line heights

Layout

Controls global layout constraints.

Page max-width
Section spacing (padding / margin)
Grid gaps
Responsive breakpoints behavior

Buttons

Defines all button styles globally.

Button sizes (small / medium / large)
Border radius
Background and text colors
Hover and focus states
Primary / secondary button variants

Variant pills

Controls the appearance of variant pills (text-based options).

Shape (rounded / square)
Selected and unselected states
Spacing and sizing
Typography

Inputs

Global styles for form inputs.

Input height and padding
Border radius and border color
Focus and error states
Placeholder styles

Product cards

Controls product card appearance across collection and featured sections.

Card style (standard / card)
Image aspect ratio
Image padding
Text alignment
Border and shadow

Product Card Swatches

Manages variant swatches shown on product cards.

Swatch type (color / image)
Swatch shape (circle / square)
Swatch size
Lazy loading behavior

Collection cards

Controls the appearance of collection cards.

Card style
Image padding
Text alignment
Color scheme
Border and shadow behavior

Blog cards

Controls blog/article card styling.

Image padding
Text alignment
Color scheme
Border radius and shadow

Content containers

Defines reusable container styles used in sections.

Background styles
Padding presets
Border radius
Shadow options

Media

Controls how images and videos behave.

Aspect ratios
Image fitting (cover / contain)
Video autoplay and loop options
Media loading behavior

Dropdowns and pop-ups

Styles dropdown menus and pop-up components.

Background and border styles
Animation behavior
Spacing and alignment

Drawers

Controls drawer components (cart drawer, filters, menus).

Drawer width
Overlay color and opacity
Open / close animation

Badges

Defines badge styles used across the theme.

Shape and size
Background and text color
Positioning on cards

Brand information

Stores brand-level metadata.

Brand name
Brand description
Contact details (if used)

Manages social media links and icons.

Social platform URLs
Icon styles
Visibility controls

Search behavior

Controls search UX behavior.

Search suggestions
Predictive search behavior
Result layout

Currency format

Defines how prices are displayed.

Currency symbol position
Decimal and thousand separators
Localization behavior

Cart

Controls cart behavior and appearance.

Cart type (page / drawer)
Upsell and recommendation behavior
Empty cart messaging

Integration settings for Judge.me.

Enable / disable widget
Star rating display
Review count visibility

Custom CSS

Allows custom CSS overrides.

Raw CSS input
Used for edge-case styling

Theme style

Controls theme-wide visual presets.

Predefined style presets
Quick visual switching between styles

Note: All settings are global unless explicitly overridden at the section level.