Skip to content

Customizing

Prismatic is configured through the Shopify theme editor — no code editing required. Customization splits into theme settings (global) and section settings (per section instance). This guide covers the global settings.

Color schemes

Color schemes are defined in theme settings and designed to alternate hard from section to section. How many you get and what they look like is a preset decision — the Prismatic preset ships nine: a cream paper base with riso brights to clash against it. A few of them, as a worked example:

  • Scheme 1 — Paper — Cream paper background (#F6EFE0), near-black ink text. The default scheme.
  • Scheme 2 — Ink — Near-black background (#1C1A17), paper text. The inversion scheme; used for graphic slabs, the header, and the footer.
  • Riso brights — Pink, blue, yellow, green, orange, and purple schemes, each a saturated field meant to clash against the cream base. Used as the loud accent slabs — drop one in where the page needs to shout.

Each scheme defines ten roles:

  • background and optional background_gradient
  • text — primary text color
  • accent_text — the accent applied to eyebrows, labels, and emphasis text. Tuned per scheme so accents hold WCAG AA contrast on every background — if you adjust a background, re-check this pair.
  • primary_button_background / primary_button_text_color
  • secondary_button_background / secondary_button_text_color
  • input_background / input_text_color

Borders are derived automatically by mixing the scheme's text color into its background, so rules and hairlines follow your palette without separate settings.

To edit: Theme settings → Colors, click a scheme, adjust, save. Two global selectors choose the Default color scheme (applied where a section doesn't override) and the Modal and overlay color scheme (drawers, popovers).

Status colors — sale and sold-out badges, success/warning/error — are set separately in the same group.

Scheme rhythm

Every section has a color_scheme picker. The intended rhythm alternates the cream Paper base and Ink down the page, dropping a riso bright in as the loudest moment. Adjacent sections sharing a scheme merge visually into one slab — sometimes that's the point.

Typography

Three font axes, set at Theme settings → Typography — any Shopify font works (the Prismatic preset uses Bebas Neue / Work Sans / Space Mono):

  • Heading font — the display face; condensed and structural.
  • Body font — a neutral grotesque that stays legible against the loud display type.
  • Subheading and label font — a monospace face carrying eyebrows, labels, buttons, and data.

The scale controls are where the register lives:

  • Heading size scale — 75–200%. The Prismatic preset runs 110%.
  • Heading capitalizationnone, uppercase, or lowercase.
  • Heading letter spacingtight, normal, or wide.
  • Body text size — Set per breakpoint.
  • Button font / capitalization / letter spacing — The Prismatic preset sets buttons in the heading font.

Swapping fonts keeps every size and spacing relationship; the loudness is in the scale settings, not the font files. A quieter store can drop the heading scale toward 100% and set capitalization to none without touching anything else.

Appearance

Theme settings → Appearance:

  • Page width — 1000–1600px. The Prismatic preset runs 1500.
  • Section spacing — Five levels from compact to generous, scaling the default vertical rhythm between sections.
  • Button corner radius and Input corner radius — The Prismatic preset runs 3.
  • Icon line weight — 1–2.5.

Motion

Theme settings → Motion:

  • Animations — Master toggle. The theme also respects the visitor's reduced-motion preference automatically.
  • Animation stylerestrained, weighted, standard, expressive, playful. Sets the character of hovers, reveals, and transitions theme-wide; pick the style that fits your register. The scroll-story pin and gallery transitions inherit this setting.

Cart

Theme settings → Cart:

  • Cart typedrawer (default; slides in over the page), message (inline confirmation), or page (straight to /cart).
  • Cart icon — cart, bag, or basket.
  • Free shipping progress bar — Off by default, with a configurable threshold.
  • Empty cart link — Where the empty-state CTA points.

Product listing

  • Card content density (Theme settings → Product listing) — tight, normal, loose spacing inside product cards.
  • Swatch shape (Theme settings → Color swatches) — circle or square, global.

Social media and sharing

Theme settings → Social media holds URLs for 18 platforms; icons render in the footer's brand block for any URL that's filled in. Social sharing sets the fallback share image for pages without their own.

Templates

Layout per template is the section list in the theme editor — add, remove, reorder. Prismatic ships 14 templates: home, product, collection, collections list, cart, search, blog, article, page, a contact page template, a theme-features page template, 404, password, and gift card. To create a variant template for a specific product or page, use Add template in the admin's Templates page.

Next steps

  • Sections reference — every section's settings and blocks.
  • Presets — what the Prismatic preset configures.
  • FAQ — common customization questions.

SIGNAL/RUNNING