Customization and theme settings

Kingsbell exposes global settings for the visual system and section-level settings for page composition. Use global settings for consistent store-wide decisions and section settings for local content and layout choices.

Brand settings

The Brand group includes:

• primary logo;
• inverse logo;
• logo width from 80px to 320px;
• favicon.

Provide SVG or high-resolution raster artwork with sufficient contrast. Test the primary and inverse logos against the actual header backgrounds used by the selected templates.

When no logo is configured, Kingsbell can fall back to a text wordmark.

Colours

The theme defines a palette and semantic colour roles.

Default palette values:

Semantic roles include:

• page background;
• raised surface;
• alternate surface;
• primary text;
• muted text;
• borders;
• accent;
• primary button;
• primary button text;
• error.

Change semantic roles rather than editing component CSS. After changing colours, review text contrast, focus rings, form errors, disabled states, sale prices, badges, overlays, and inverse headers.

Typography

Global typography settings include:

• heading font;
• body font;
• heading scale from 80% to 140%;
• body scale from 90% to 120%;
• body line height from 130% to 190%;
• heading letter spacing;
• label letter spacing;
• uppercase button labels.

Defaults are Playfair Display for headings and Inter for body copy.

Large heading scales can cause wrapping in product titles, navigation, buttons, and narrow mobile layouts. Review the longest real content rather than placeholder text.

Layout and motion

Global layout controls include:

Additional controls enable motion effects, smooth anchor scrolling, and reduced-motion support.

Reduced-motion support should remain enabled. It respects a visitor's operating-system preference even when motion effects are enabled for other visitors.

Buttons and forms

Button controls include:

• height from 44px to 64px;
• horizontal padding from 16px to 40px;
• border width from 1px to 3px;
• fade, invert, or shift hover style;
• uppercase or natural-case labels.

Form controls include underline or boxed input styles and a configurable focus-ring width.

Do not reduce button height below a comfortable pointer target. After changing hover or focus styling, test keyboard focus separately from pointer hover.

Product cards

Global product-card controls include:

• portrait, square, or image-adaptive media ratio;
• text alignment;
• no hover, subtle zoom, or card lift;
• optional currency codes;
• outline, solid, or text-link quick add.

Product-card settings affect collection, search, recommendation, and other reusable card grids. Review every context after changing them.

Use currency codes when stores serve markets where the currency symbol alone is ambiguous.

Flexible content

The Flexible content section renders reusable theme blocks and Shopify app blocks.

Available theme blocks include:

• heading;
• text;
• button;
• image;
• statistic;
• resource card;
• spacer;
• group.

Groups support one nested level. This is enough for practical compositions while keeping the theme editor understandable.

Use Flexible content for structured landing pages, reports, service pages, campaign pages, member resources, and other compositions that do not require a dedicated section.

Specification table

The Specification table section presents structured labels and values. It is suitable for:

• product or material specifications;
• dimensions;
• service inclusions;
• policy facts;
• report metadata;
• technical attributes.

Keep labels concise and avoid embedding complex rich text inside table values. On mobile, verify that long labels and URLs wrap without horizontal scrolling.

Tabbed content

Tabbed content remains readable as sequential panels without JavaScript. JavaScript adds:

• selected-tab state;
• panel visibility;
• ARIA relationships;
• keyboard navigation;
• theme-editor block selection behavior.

Use tabs only for closely related alternatives. Do not hide essential legal, shipping, safety, or accessibility information behind a tab that visitors may overlook.

Reusable card grids and metaobjects

The reusable-card section can render manual blocks or a list of kingsbell_content_card metaobjects.

Use metaobjects when records need centralized management and reuse. Example records include resources, people, reports, services, principles, or linked content.

A metaobject definition should follow the repository's METAOBJECTS.md contract. Field handles and types must match the Liquid implementation.

Use manual cards when content appears only once or when a merchant does not need centralized records.

Page templates for structured content

Kingsbell includes:

page.flexible.json
page.specifications.json
page.content-library.json

• page.flexible.json is a general block-based composition.
• page.specifications.json prioritizes structured facts and explanatory content.
• page.content-library.json is suitable for reusable card or resource collections.

Assign the template to a Shopify page, then configure its sections in the theme editor.

Dynamic sources

Where Shopify allows dynamic sources, connect section settings to product, collection, page, article, metafield, or metaobject data rather than duplicating values manually.

Before using a dynamic source:

• confirm the source type matches the setting;
• define fallback behavior for missing data;
• test resources with and without the value;
• avoid exposing internal or confidential metafields;
• verify translations and market-specific content.

Safe customization rules

Prefer, in order:

1. theme settings;
2. section and block settings;
3. JSON-template composition;
4. reusable snippets or blocks;
5. new sections;
6. global CSS or JavaScript changes only when the behavior truly applies everywhere.

Avoid editing shared commerce behavior for a purely visual requirement. Avoid copying sections when a template-level configuration can produce the required result.

Configuration review checklist

After a substantial theme-editor change:

• save and reload the editor;
• preview representative products, collections, pages, blogs, and articles;
• test mobile and desktop;
• test keyboard focus and reduced motion;
• verify empty and missing-content states;
• review product cards in every context;
• confirm forms, cart, filters, search, and app blocks still work;
• export or duplicate the configured theme before a high-risk change.