Typography & Theme Settings

Theme settings are the global look-and-feel knobs for your storefront — settings that apply to every page, every section. Click anywhere blank in the section list (or click the gear icon in the inspector header), and the inspector flips from section settings to theme settings.

What's in theme settings

The exact groups available depend on your theme. Fuji ships with the following:

Typography

• Heading font — the typeface for h1 through h6 across the storefront.
• Body font — the typeface for paragraphs and most other text.
• Heading size scale — slider that scales heading sizes from 80% to 150%, useful when you want bigger / bolder hero text without editing every section.
• Body size scale — same idea for body text.

Layout

• Page width — maximum content width (960–1440px). Wider feels modern; narrower feels editorial.
• Section spacing — vertical space between sections.
• Grid horizontal gap — spacing between cards in any grid.
• Grid vertical gap — vertical spacing between rows in any grid.

Colors

Pick the storefront's default color scheme and customize the palette of any scheme. See Color schemes & theme colors.

Animations

• Reveal on scroll — animate sections into view as the visitor scrolls.
• Hover effect — lift, 3D lift, or none. Applies to package cards and buttons.

Buttons

• Border radius — sharp corners (0px) through fully pill-shaped (30px).
• Shadow — drop shadow on or off.
• Hover opacity — the percentage opacity on hover (creates a subtle dim effect).

Social links

Discord, Twitter / X, YouTube, TikTok, Instagram, Reddit. Theme sections like the footer pull these URLs in automatically — you only enter them once here, and every section that references social links gets them.

Cart

• Cart type — Drawer (slides in from the side), Page (full page), or Popup (modal).
• Show vendor — whether to display a vendor name on each cart item.

Store

• Predictive search — show search suggestions as the customer types.
• Show currency codes — append ISO codes like "USD" to displayed prices.

Theme settings vs. section settings

• Theme settings are global — change a font here and every page's headings update.
• Section settings are local — change a heading on one section and only that section is affected.

Theme settings save into your draft just like section edits, and require a Save draft + Publish to reach the live storefront.

FAQ

Can I use a custom font my theme doesn't list?

The font dropdown is curated by the theme. To use a font that isn't there, add it via the code editor — usually by editing the theme's font config or adding a Google Fonts link in the layout file.

Why doesn't the storefront update when I change a theme setting?

Theme settings save to your draft. Save the draft and publish to push changes to the live storefront.

Different theme, different settings?

Yes. Each theme defines its own set of theme settings, organized into its own groups. Switching themes resets you to that theme's settings, with sensible defaults provided by the theme author.