Customization (Custom Liquid, Custom Section, theme-file editing)

Hyprism’s theme editor covers ~95% of what most stores need. For the other ~5%, Hyprism provides escape hatches: Custom Liquid sections (drop Liquid markup anywhere), Custom Sections (build a section with arbitrary nested atom blocks), and direct theme-file editing for deep customisation.

⚠️ Always duplicate your theme before custom-coding. If anything breaks, the original is one click away.

17.1 Custom CSS (no theme setting — use one of three patterns)

Hyprism does not ship a “Custom CSS” theme setting. Custom storefront CSS is achievable via three patterns instead:

Pattern 1 — <style> tag in a Custom Liquid section (recommended)

Add a Custom Liquid section anywhere on the page and paste:

<style>
  /* Make headings inside the featured-collection section larger */
  .ne-featured-collection .ne-section__title {
    font-size: 4rem !important;
  }
</style>

The CSS injects on whichever pages contain the section. Use this for page-specific overrides.

The !important is needed because the theme’s CSS may load later and would otherwise win the specificity battle. Hyprism is generally careful about not using !important in section CSS, so your override usually wins without it — but for theme-settings-derived properties, !important is the safer pattern.

Pattern 2 — Edit assets/critical.css directly

For theme-wide CSS (every page), edit assets/critical.css via the Shopify code editor or via Shopify CLI (shopify theme dev). Changes apply globally.

⚠️ This modifies a theme file. If you re-install Hyprism or update versions, your changes are wiped. Document them somewhere (a STORE_CUSTOMIZATIONS.md in your fork).

Pattern 3 — Third-party Custom CSS app

Apps like “Custom CSS Stylesheet” or “Easy Custom CSS” inject a Liquid-stored CSS string globally — survives theme updates because it’s app-data not theme-data.

Tips

• Test in a duplicate of your theme first.
• Use browser DevTools to identify class names (.ne-section, .ne-product-card, etc.) before writing the CSS.
• Hyprism’s class naming follows BEM (.ne-block + .ne-block__element + .ne-block--modifier).

17.2 Custom Liquid section (custom-liquid)

A section where you paste arbitrary Liquid + HTML markup. Used for embedding custom HTML, app snippets, scripts, page-specific styles, or any Liquid logic.

When to use

• Embed a one-off campaign banner with Liquid date-conditional logic
• Embed an app’s HTML snippet that doesn’t ship as an app block
• Add a custom announcement that’s calculated dynamically (e.g., ”{{ N }} customers viewed this today”)
• Inject page-specific <style> blocks (Custom CSS Pattern 1 above)

Example: countdown to a specific date

{%- assign target = '2026-12-25 23:59:59' | date: '%s' -%}
{%- assign now = 'now' | date: '%s' -%}
{%- assign remaining = target | minus: now -%}

{%- if remaining > 0 -%}
  <div class="custom-promo">
    Holiday sale ends in {{ remaining | divided_by: 86400 }} days!
  </div>
{%- else -%}
  <div class="custom-promo">
    Sale is over. Browse our regular collection.
  </div>
{%- endif -%}

<style>
  .custom-promo {
    background: #ff5a5f;
    color: white;
    padding: 16px;
    text-align: center;
    border-radius: 8px;
  }
</style>

Settings (actual schema)

Setting	What it does
🔧 Custom Liquid	The Liquid + HTML source.
🔧 Max width	Range 400–1800px, step 20. ✅ Default 1200px. Caps the rendered output’s width.

Custom Liquid also ships the full v7 chrome: Color scheme (use global + dark/light pair), Transparent / Glass / Glass tint / Glow / Shadow, Padding top + bottom, Full width, Radius, and Visibility (see §2 and §3). Your Liquid/HTML renders inside the chosen color scheme and padding — no manual wrapper needed.

Limits

• ⚠️ No JavaScript with Liquid output reliably — <script> tags inside Custom Liquid that reference Liquid variables don’t always update on Customizer-reload. For interactivity, use Custom Section (next) and add a <script> tag in your <style> block, or move the logic to a snippet.
• ⚠️ No {% schema %} here — Custom Liquid is for output rendering; schema-driven sections need to live in sections/.

17.3 Custom Section (custom-section)

A section with @theme-style nested-block composition + a background image overlay. Use it when you want freeform layouts with atom blocks, beyond what the pre-built sections offer.

When to use

• A unique landing-page layout that needs heading + image + product-card + button + custom-html, in a specific arrangement
• Apps that need specific atom-block positions wrapped in a custom container
• Prototype layouts before they become a “real” section in your theme

Settings (actual schema)

Setting	What it does
🔧 Max width	Range 400–1800px, step 20. ✅ Default 1200px.
🔧 Content gap	Range 0–80px, step 4. ✅ Default 24px. Gap between stacked blocks.
🔧 Content alignment	Left (✅ default) / Center / Right.
🔧 Background image	Optional image. Tiles at cover.
🔧 Background overlay	Range 0–100%, step 5. ✅ Default 0%. Dim layer over the background image.

Plus standard v7 chrome (transparent_bg / glass / glass_tint / enable_glow / enable_shadow / color scheme + dark-light pair / full_width / padding / radius / visibility).

There is no “Layout: single column / 2 columns / grid” select setting — the section always stacks blocks vertically. For horizontal arrangements, drop a group atom block (set Direction = Horizontal) inside the custom section. For 2-column / grid layouts, use the dedicated Section Grid (§10.12) instead.

Accepted blocks

heading · text · button · image · video · icon · group · spacer · divider · recently-viewed-grid · wishlist-grid

(No @app slot — apps that need a section-block placement should target the dedicated app-accepting sections like Collection, Search, or use a Custom Liquid section.)

Example: landing page hero with multiple CTAs

Custom Section (Background image: holiday-bg.jpg, Overlay: 40%)
├─ Heading block: "Holiday Sale"
├─ Text block: "30% off everything"
└─ Group block (Direction: Horizontal, Equalize children)
   ├─ Button block: "Shop Now"  (Primary)
   └─ Button block: "Learn More"  (Secondary)

This is essentially what featured-collection does, but with the flexibility to add the background image, overlay, and arbitrary atom-block content.

17.4 Editing theme files directly (developer mode)

The most advanced customization — editing .liquid files directly.

When to do this

• You need to add a new section type that doesn’t exist
• You need to modify the behavior of an existing section beyond what settings allow
• You’re a Shopify Partner working on a client store

How

Two options:

Option A: Shopify CLI (recommended)

1. Install the Shopify CLI.
2. Clone the theme: shopify theme dev --store yourstore.myshopify.com.
3. Edit files locally in your editor.
4. Changes auto-sync to the dev preview.
5. When done: shopify theme push --store yourstore.myshopify.com.

Option B: Online code editor

Shopify Admin → Online Store → Themes → ⋯ → Edit code.

Edit .liquid, .json, .css, .js files directly in the browser. Lower-quality experience than local editing.

File locations

assets/        - CSS, JS, fonts, images, SVG icons
blocks/        - Reusable blocks (used in @theme containers)
config/        - Theme settings + saved values
layout/        - Top-level wrappers (theme.liquid, password.liquid)
locales/       - Translation files
sections/      - Sections (the customizable building blocks)
snippets/      - Reusable Liquid fragments
templates/     - JSON templates defining page section arrangements
docs/          - Engineering docs (this manual + reference)

Before editing, READ

1. CLAUDE.md — Hyprism’s engineering reference. Contains ~290 documented rules, patterns, and gotchas. Many subtleties (e.g., Liquid trim-marker conflicts, CSS specificity battles, dark/light pair patterns).
2. docs/patterns.md — common patterns used across the theme.
3. docs/session-history.md — historical context for why decisions were made.

⚠️ Many of Hyprism’s patterns deliberately work around Shopify or browser quirks. Removing a pattern because “it looks unnecessary” often surfaces a bug that was fixed there. Read the rule comments before changing.

17.5 Color scheme creation

To create a 6th, 7th, or Nth color scheme beyond the 5 included:

Edit config/settings_schema.json → find the color_schemes array → duplicate an existing scheme block → assign a new id (e.g., scheme-6) → adjust the color values.

For full instructions, see Shopify’s color schemes documentation.

Next

Chapter 18 — Checkout branding — what you can and can’t customize in the checkout flow.