Templates

Templates define the structure of each page type in your store. Hyprism ships 12 page types — home, product, collection, collection list, search, blog, article, page, cart, 404, password, gift card — plus 7 customer-account templates and 4 page sub-templates (about, contact, B2B request, product comparison). All are pre-configured with sensible defaults; they work out-of-the-box, and you can rearrange sections freely.

This chapter covers what each template includes by default, and any template-specific behavior.

How Shopify templates work

Each template is a JSON file in templates/ describing what sections live on that page type. When a visitor lands on a page, Shopify renders the appropriate template:

• / → templates/index.json (home)
• /products/{handle} → templates/product.json
• /collections/{handle} → templates/collection.json
• /blogs/{blog}/{article} → templates/article.json
• /cart → templates/cart.json
• And so on

You customize templates through the Shopify theme editor — you don’t edit JSON directly (though you can if needed for advanced cases).

11.1 Home (index.json)

The home page. Most-trafficked landing page in any store.

Default sections (out-of-the-box)

The shipping templates/index.json has 7 sections in this order:

1. Hero — full-width hero image with brand statement
2. Pretext Banner — animated ASCII/binary banner strip
3. Featured Collection — curated product grid
4. Image with Text — brand story snippet with CTA
5. Rich Text — flexible text section (paragraph + buttons)
6. Bento Grid — modern bento layout of mixed tiles
7. Newsletter — full-width signup

Recommended customizations

• Brand-led store → swap Hero for Hero Video (cinematic intro) or Hotspot Image (shoppable lookbook)
• Catalog-heavy store → add Bento Grid showcasing top collections after the hero
• Editorial store → start with Pretext Banner + Hero + Featured Article
• Social-proof-led store → add Testimonials between Featured Collection and Newsletter

11.2 Product (product.json)

Single-product detail page. The conversion engine.

Default sections (out-of-the-box)

1. Product section with the standard block stack inside (vendor, title, rating, price, variant picker, buy buttons, back-in-stock, pickup, description, then the technical and compliance blocks, then share — see §7.3 for the default block-arrangement)
2. Related Products — 4 products powered by Shopify Recommendations API
3. Complementary Products — “Pairs well with” recommendations from Shopify’s Search & Discovery relationships (self-hides when none are configured)

Note: Recently-viewed is NOT in the default template. Add it manually after Related Products if desired.

See chapter 7 for the full block-level customization.

11.3 Collection (collection.json)

Lists products in a specific collection.

Default sections (out-of-the-box)

1. Collection section with filter sidebar (desktop) / drawer (mobile), product grid, sort dropdown — all in one monolithic section.

No banner / featured-collection sections by default. Add a collection-banner BLOCK inside the Collection section if you want a hero band at the top of the collection page (banner is a block, not a separate section — see §8.6). Add Featured Collection / Recently Viewed sections below the Collection section for cross-sells.

See chapter 8.

11.4 Search (search.json)

Search-results page (/search?q=query).

Default sections

1. Search section with results grid + filter sidebar
2. Sort dropdown
3. Pagination

The search section uses the same UI as collection page — same filter API, same product grid. The only difference is the data source (search-results vs. a specific collection).

Search section settings

Header

Setting	What it does
🔧 Heading size	H1 / H2 (✅ default) / H3. For the “Search results for ‘X’” heading.
🔧 Search type	Products only (product) or Products + articles + pages (✅ default product,article,page). Only two options — no “Products + articles” middle option.
🔧 Enable filtering	✅ Default on. Show filter sidebar (uses Shopify’s Search & Discovery app metadata).
🔧 Enable sorting	✅ Default on. Show sort dropdown.

Product grid

Setting	What it does
🔧 Results per page	Range 8–48, step 4. ✅ Default 24.
🔧 Columns	Range 2–5, step 1. ✅ Default 4.
🔧 Image ratio	Natural / Square / Portrait (✅ default — 3:4). No Landscape or Wide.
🔧 Show vendor	✅ Default off.
🔧 Show color swatches (show_swatches)	✅ Default on. Inline color-variant swatches under the product name on each card. Off = no swatch dots.

Card style

Setting	What it does
🔧 Card surface	Solid (✅ default) / Glass / Transparent.
🔧 Tint glass with accent (card_glass_tint)	Tints the glass cards with the scheme accent (strength = Effects → Glass tint intensity). ✅ Default off. Only visible when Card surface = Glass.
🔧 Card corner radius	Range 0–32px, step 2. ✅ Default 8px.
🔧 Card padding	Range 0–24px, step 2. ✅ Default 0.
🔧 Image corner radius	Range 0–32px, step 2. ✅ Default 0.
🔧 Card glow	✅ Default off.
🔧 Card shadow	✅ Default off.

Section chrome (universal v7)

Color scheme + dark/light pair, surface (transparent / glass / glass tint / glow / shadow), layout (full width + mobile, radius), padding (desktop + custom mobile), visibility. See chapter 3 for canonical descriptions.

Blocks accepted: heading · text · button · image · video · icon · group · spacer · divider · recently-viewed-grid · collection-banner · @app

11.5 Article (article.json)

Single blog article page.

Default sections (out-of-the-box)

1. Article section with the block stack (breadcrumb, title, meta, featured_image, content, tags, share, comments — see §11.5 settings + block list below).

No Related Articles or Newsletter section by default. Add a Featured Article (§11.14.2) for cross-promotion, or a Newsletter section (§10.4) for email capture at the bottom of articles.

Article section settings

Setting	What it does
🔧 Content width	Range 500–1400px, step 50. ✅ Default 750px — comfortable reading width.
🔧 Fill viewport	✅ Default off. When on, the article extends edge-to-edge instead of respecting the content column.
🔧 Heading alignment	Left (✅ default) / Center / Right.

Plus standard v7 chrome (color scheme, surface, layout, radius, visibility).

Per-article blocks

Inside the Article section, the schema accepts these blocks:

Block	Content
breadcrumb	Home › Blog › This Article navigation
title	Article title rendered as an H1
meta	Author + date + read-time
featured_image	The article’s featured image
content	Rich-text from Shopify article body
tags	Tag list with links
share	Social share buttons
comments	Comments thread (if comments are enabled in Shopify Admin)
@app	Compatible app blocks

SEO

Each article emits a JSON-LD Article schema (or BlogPosting if categorized) with:

• Headline (article title)
• Published time
• Modified time
• Author (Person)
• Image
• Word count
• Article-section (the blog name)

See chapter 13 — SEO.

11.6 Blog (blog.json)

The blog index page — list of articles in a single blog.

Default sections (out-of-the-box)

1. Blog section with article grid + pagination (pagination is inside the section, not a separate section).

Blog section settings — header

Setting	What it does
🔧 Heading size	H1 / H2 (✅ default) / H3. The blog title.
🔧 Heading alignment	Left (✅ default) / Center / Right.
🔧 Show tags	✅ Default on. Clickable tag-filter row above article grid.

Blog section settings — article grid

Setting	What it does
🔧 Articles per page	Range 3–24, step 3. ✅ Default 9.
🔧 Columns	Range 2–4, step 1. ✅ Default 3.
🔧 Image ratio	16:9 (✅ default) / Landscape 4:3 / Square 1:1 (schema value: 1) / Portrait 3:4. 4 options total — no separate Wide (use 16:9).
🔧 Show date	✅ Default on.
🔧 Show author	✅ Default on.
🔧 Show excerpt	✅ Default on.

Blog section settings — card style

Setting	What it does
🔧 Card surface	Solid (✅ default) / Glass / Transparent.
🔧 Card glass tint	✅ Default off. Tints glass with the active accent (visible when card surface = glass).
🔧 Card corner radius	Range 0–32px, step 2. ✅ Default 8px.
🔧 Card padding	Range 0–24px, step 2. ✅ Default 0.
🔧 Image corner radius	Range 0–32px, step 2. ✅ Default 0.
🔧 Card glow	✅ Default off.
🔧 Card shadow	✅ Default off.

Blog section settings — chrome (universal v7)

Standard v7 chrome — Color scheme + dark/light pair, surface (transparent / glass / glass tint / glow / shadow), layout (full width + mobile, radius), padding (desktop + custom mobile), visibility. See chapter 3.

Blocks accepted: heading · text · button · image · video · icon · group · spacer · divider · recently-viewed-grid · @app

Atom feed

Hyprism emits a link to the blog’s Atom feed (/blogs/{handle}.atom) in the <head>, so RSS readers can subscribe.

11.7 Page (page.json)

Generic content page for static content — About, FAQ, Shipping info, etc.

Default sections

The default page template is a thin shell with a single Page section that renders the page’s title + content. Add any sections you want above or below for richer content pages.

Page section settings

Title + content

Setting	What it does
🔧 Show title	✅ Default on. Render the Shopify page title as a heading.
🔧 Heading size	H1 (✅ default) or H2. Only two options — no H3 at this level.
🔧 Heading alignment	Left (✅ default) / Center / Right.
🔧 Content width	Range 500–1400px, step 50. ✅ Default 800px — comfortable reading width (~65ch).
🔧 Blocks position	Before page content or After (✅ default). Whether @theme blocks render above or below the Shopify page content.

Background

Setting	What it does
🔧 Background image	Section-specific background image (independent of theme global).
🔧 Overlay color	✅ Default #000000. Tint over the background image.
🔧 Overlay opacity	Range 0–90%, step 5. ✅ Default 0%.
🔧 Min height	Range 0–100%, step 5. ✅ Default 0. Viewport-height percentage — useful for short pages so content fills the viewport.

Section chrome (universal v7)

Color scheme + dark/light pair, surface (transparent / glass / glass tint / glow / shadow), layout (full width + mobile, radius), padding (desktop + custom mobile), visibility. See chapter 3.

Blocks accepted: heading · text · button · image · video · icon · group · spacer · divider · recently-viewed-grid · countdown-timer · @app

Sub-templates

Hyprism includes two specialized page templates:

• page.contact.json — for contact pages. Renders a Contact Form section by default.
• page.about.json — an about page laid out with content sections.
• page.b2b.json — the business-account request form (see chapter 10).
• page.compare.json — the product-comparison page (see chapter 10).

To use a sub-template, in Shopify Admin → Pages → Edit Page → Theme Template, select the one you want (“contact”, “about”, “b2b”, “compare”).

For embedding a Page’s content on another template (e.g., your About page snippet on the home page), see 11.14 — Featured content embeds.

11.8 Cart (cart.json)

The cart page (/cart).

Default sections (out-of-the-box)

1. Cart section. The cart-promo bar (free-shipping progress) is a BLOCK inside the cart section, not a separate section — see §12.3.

See chapter 12 — Cart experience for full detail.

11.9 404 (404.json)

The “Page not found” page.

Default sections (out-of-the-box)

1. 404 section with heading + message + CTA to home — all composed from atom blocks inside the section.

No Featured Collection by default. Add one after the 404 section if you want a “you might like” recovery row.

404 section settings

Setting	What it does
🔧 Show search	Render a search input on the 404 page so the visitor can find what they were looking for
🔧 Heading alignment	Left / Center / Right for the 404 message
🔧 Card glass	Apply glass surface to the “page not found” message card
🔧 Card glass tint	Tint the glass with the active accent color
🔧 Card radius	0–48px corner radius on the message card
🔧 Card glow / shadow	Theme effects on the card
🔧 Color scheme + dark/light pair	Per-section scheme override
🔧 Transparent / Glass / Glass tint / Glow / Shadow	Standard v7 surface modes
🔧 Full width / Full width mobile	Edge-to-edge toggles
🔧 Padding top / bottom	Vertical spacing
🔧 Custom mobile padding	Override padding per mobile viewport
🔧 Corner radius (section)	Section-level radius
🔧 Hide on mobile / desktop	Visibility

Heading and subheading text are edited via the heading + text blocks nested inside the section (using atom blocks — see chapter 5a).

Excluded from SEO indexing automatically (HTTP 404 status).

11.10 Password (password.json)

The pre-launch password page — shown when the store is “password-protected” in Shopify Admin.

Default sections

1. Password section with logo + heading + newsletter capture + social links

Password section settings

Content

Setting	What it does
🔧 Heading	✅ Default Opening soon. Main message shown on the password card.
🔧 Heading alignment	Left / Center (✅ default) / Right.
🔧 Show newsletter	✅ Default on. Render an email-capture form on the password card.
🔧 Newsletter text	✅ Default Be the first to know when we launch.
🔧 Email placeholder	✅ Default Your email address.
🔧 Newsletter button label	✅ Default Subscribe.
🔧 Show social	✅ Default on. Display social icons (pulled from Social media tab — §2.10).

Background

Setting	What it does
🔧 Background image	The page-wide background image.
🔧 Overlay color	✅ Default #000000.
🔧 Overlay opacity	Range 0–90%, step 5. ✅ Default 40%.

Card style

Setting	What it does
🔧 Card glass	✅ Default on. Frosted-glass surface on the password card.
🔧 Card glass tint	✅ Default off. Accent-tints the glass.
🔧 Card corner radius	Range 0–48px, step 2. ✅ Default 24px.
🔧 Card glow	✅ Default off.
🔧 Card shadow	✅ Default on.

X-Ray effect (password-page-specific)

Setting	What it does
🔧 Enable X-Ray	✅ Default off. Enables the cursor-tracking X-Ray spotlight effect on the password page (independent of the theme-wide X-Ray setting in §2.8).
🔧 X-Ray size	Range 100–600px, step 20. ✅ Default 300px.

Blocks accepted: heading · text · button · image · video · icon · group · spacer · divider · recently-viewed-grid · countdown-timer · @app

Use atom blocks for any custom content beyond the heading + newsletter (e.g. a countdown-timer for a launch date).

What’s NOT in the section

• No password form setting. Shopify renders the password input automatically — you can’t toggle it off (visitors need a way to enter the password).
• No “subheading” setting. Use a text atom block below the heading for subtitle text.

⚠️ Development stores show Shopify’s default password page (green “Eingeben”/“Enter” button), regardless of theme customization. Custom password pages render on paid stores and Shopify reviewer demo stores.

11.11 Customer accounts (Classic Customer Accounts)

Seven customer-account templates (in templates/customers/):

Template	Path	Purpose
Account	customers/account.json	Logged-in account home — order history, account links
Login	customers/login.json	Sign-in form + register link
Register	customers/register.json	Create-account form
Reset password	customers/reset_password.json	”Forgot password” flow
Activate account	customers/activate_account.json	First-time activation link from email
Addresses	customers/addresses.json	Shipping/billing address book
Order	customers/order.json	Single-order detail page

Customer section settings (shared across all 7 customer templates)

Each of the seven templates binds to its own section file (sections/customer-{name}.liquid); all seven sections carry an identical 38-setting surface — the same setting ids in the same order. What differs is the content each one renders (login form / address book / order detail / …) and the defaults, which are tuned per template. Configure each template independently in the customizer — settings made on Login do not propagate to Register, Account, etc.

Per-template section files:

• customer-account.liquid (account.json)
• customer-login.liquid (login.json)
• customer-register.liquid (register.json)
• customer-reset-password.liquid (reset_password.json)
• customer-activate-account.liquid (activate_account.json)
• customer-addresses.liquid (addresses.json)
• customer-order.liquid (order.json)

Form-card settings (4 settings)

Setting	What it does
🔧 Heading alignment (heading_alignment)	Left / Center / Right — section heading position. Default varies, see the table below.
🔧 Glassmorphism (card_glass)	Frosted-glass surface on the form card. Default varies. Has no effect while the theme-wide glass effect is off.
🔧 Tint card glass with accent (card_glass_tint)	✅ Default off everywhere.
🔧 Card border radius (card_radius)	Default varies.

The defaults, measured per template

Template	Heading alignment	Card glass	Card radius	Max width	Padding top
Login · Reset password · Activate	center	on	16	440	60
Register	center	on	16	480	60
Account · Order	left	off	12	960	40
Addresses	left	off	12	800	40

⭐ The split is deliberate: the four entry pages are a single centred card, the three logged-in pages are wide tables where a glass surface would only make the rows harder to read.

Universal v7 chrome (34 settings)

Standard pattern: Color scheme + dark/light pair, surface (transparent / glass / glass tint / glow / shadow), layout (full width + mobile), padding (top + bottom + custom mobile padding + mobile padding top/bottom), radius (use global + custom), visibility (hide on mobile + hide on desktop). See chapter 2 and chapter 3 for canonical descriptions.

Per-template configuration tips

The settings are identical across templates, but the use-cases differ. Reasonable defaults per template:

The shipped defaults above already follow this split; the notes below say why, in case you want to depart from them.

• Login + Register + Reset / Activate — minimal pages with a centred form. A narrow max width and a glass card make the form the whole page.
• Account (home) and Order detail — dense tables. Glass off keeps the rows legible; left-aligned headings match the table below them.
• Addresses — multiple card rows. Glass on is defensible here if you want each address visually separated; it ships off for consistency with the other logged-in pages.

💡 If you want all seven templates to look identical (one consistent brand-treatment), configure the Login template first, then copy the seven settings blocks across in templates/customers/*.json — faster than re-doing it seven times in the UI.

⚠️ Classic vs New Customer Accounts

Shopify introduced “New Customer Accounts” in 2024 — Shopify-hosted, passwordless (6-digit email codes), no theme customization possible. Stores activated since then default to New Accounts.

Hyprism’s customer templates only render on stores using Classic Customer Accounts. On New Accounts stores, Shopify routes account pages to its own UI, ignoring theme files entirely.

Most existing stores are still on Classic; Theme Store reviewer-stores test against Classic. Hyprism ships these templates as a Theme Store submission requirement + for the (large) Classic-account market. If your store is on New Accounts, these settings have no live effect — but the templates must exist in the theme for submission to pass.

⚠️ Dev-store testing limitation

Shopify development stores force “New Customer Accounts” since 2024 — even if you toggle Classic in Settings → Customer Accounts, dev-stores ignore the theme files for these templates. To preview customer pages live during development you need either (a) a Theme Store reviewer-grade Partner demo-store, or (b) a paid live store on Classic. The customizer preview works on dev-stores; the live storefront does not.

11.12 Gift Card (gift_card.liquid + gift_card.json not supported)

The gift-card recipient page (where someone redeems a gift card).

⚠️ Shopify limitation: templates/gift_card.json is not supported. Only gift_card.liquid works. This means you can’t use a JSON template here.

Hyprism’s dual-file pattern

Hyprism works around this with a creative pattern:

• templates/gift_card.liquid — a minimal Liquid wrapper with {% layout none %} + custom <html>/<head>/<body> shell. Inside: {% section 'gift-card-main' %}.
• sections/gift-card-main.liquid — a full section with {% schema %} and ~20 settings. Customizable in the theme editor under “Templates → Gift card”.

This makes the gift-card page editor-customizable despite Shopify’s limitation. Most themes (Dawn, Horizon) leave this hardcoded; Hyprism’s approach is unique.

What you can customize

Content

Setting	What it does
🔧 Logo override	Override the theme logo just for this page. Leave empty to use the theme-wide logo from §2.1.
🔧 Custom heading	Override the default “Your gift card” heading.
🔧 Subtext (use at checkout)	Optional secondary hint shown beneath the gift-card code — e.g. “Use this code at checkout”. Leave blank for the default localised string.
🔧 Footer text	Optional text rendered at the bottom of the gift-card page (e.g., expiration / customer-service contact).
🔧 Show Apple Wallet button	✅ Default on.
🔧 Show Print button	✅ Default on.
🔧 Show QR code	✅ Default on. Renders a scannable QR code (144 px) of the gift-card identifier so the recipient can redeem at checkout without typing the code. Generated client-side from gift_card.qr_identifier.

Card style

Setting	What it does
🔧 Card surface	Solid / Transparent / Glass (✅ default).
🔧 Card glass tint	✅ Default off.
🔧 Card corner radius	Range 0–48px, step 2. ✅ Default 24px.
🔧 Card padding	Range 16–80px, step 4. ✅ Default 40px.
🔧 Card glow	✅ Default on.
🔧 Card shadow	✅ Default on.
🔧 Gradient sheen	✅ Default on. Subtle animated gradient sweep across the card surface for a premium feel.

Background

Setting	What it does
🔧 Background image	The page background image.
🔧 Overlay color	✅ Default #000000.
🔧 Overlay opacity	Range 0–90%, step 5. ✅ Default 45%.

11.13 Robots.txt and llms.txt

Two special “templates” that aren’t pages but emit text content:

Robots.txt

Shopify generates a working /robots.txt automatically for every store — no theme file is required, and per Shopify’s Theme Store rules a theme must not ship a robots.txt.liquid template. Hyprism therefore does not include one out of the box.

If you want to customise crawler rules (for example, to explicitly allow AI crawlers like GPTBot / ClaudeBot / PerplexityBot for AI-search visibility), add the template yourself after install: Online Store → Themes → Edit code → Templates → Add a new robots.txt.liquid, starting from {{ robots.default_groups }} and appending your own User-agent / Allow rules. A ready-to-paste snippet is provided in chapter 13 — SEO and GEO. Deleting the file reverts to Shopify’s default. (This is an unsupported customisation — incorrect rules can deindex your store.)

llms.txt

Not a Shopify template per se — instead, you create a Shopify Page with handle “llms” and use the Page template page.llms-txt (file templates/page.llms-txt.liquid) which renders an llms.txt-formatted list of products / collections / pages / articles in your store. AI systems read this to understand your catalog structure.

See chapter 13.

11.14 Featured content embeds (featured-content)

Shopify’s Page and Article templates can only render where you’d expect — on /pages/{handle} and /blogs/{blog}/{handle} respectively. But sometimes you want to show a snippet of a Page or Article on another template: your About page intro on the home page, your latest article preview on the product page, an FAQ excerpt on the collection page.

⚠️ This is one section, not two. Earlier versions shipped separate featured-page and featured-article sections; they were merged into featured-content, where a Show a page or an article (source) selector decides which of the two pickers applies.

⚠️ Shopify does not allow a resource picker to be hidden, so both the Page and the Article picker stay visible whichever source you choose. The source selector is what decides — not which picker you happen to fill in.

Setting	What it does
🔧 Show a page or an article (source)	page / article. ✅ Default page.
🔧 Page to display (page) · 🔧 Article to display (article)	Used according to the source above. Choose a published resource.
🔧 Custom heading (custom_heading)	Leave empty to use the title of the page or article.
🔧 Subheading (custom_subheading)	Rich text.
🔧 Excerpt length in words (excerpt_word_count)	✅ Default 0 = render the full content. Above 0 truncates and adds a link to the full page or article.
🔧 Show page title (show_title)	✅ Default on.
🔧 Heading size (heading_size)	h1 / h2 / h3. Only when Show page title is on.

Hyprism ships one section for this — featured-content — available on any template except the password page.

11.14.1 Article display

The article-specific settings appear whichever source is selected; they simply have nothing to act on when the source is a page.

Setting	What it does
🔧 Show featured image (show_image)	✅ Default on.
🔧 Image radius (image_radius)	✅ Default 8.
🔧 Show date / author (show_meta)	✅ Default on. The two below only matter while this is on.
🔧 Show date (show_date)	✅ Default on.
🔧 Show author (show_author)	✅ Default on.

11.14.2 Title and layout

Setting	What it does
🔧 Heading alignment (heading_alignment)	left / center / right. ✅ Default left.
🔧 Extra blocks position (blocks_position)	Where blocks you add sit relative to the embedded content: above everything / before / after. ✅ Default after.
🔧 Content max-width (content_width)	✅ Default 800.
🔧 Keep content contained (contain_content)	✅ Default on.
🔧 Background image (background_image)	Optional backdrop behind the section.
🔧 Overlay color (overlay_color) · 🔧 Overlay gradient (overlay_gradient) · 🔧 Overlay opacity (overlay_opacity)	Dim the background image. ✅ Default opacity 0.

Plus the usual section chrome — surface (solid / transparent / glass), accent glow, drop shadow, colour scheme with the dark/light pair, padding, radius and visibility.

Blocks accepted: The universal block set (§5a.0), plus countdown-timer, plus @app blocks.

⚠️ Recursion: the section renders a page’s or article’s content, not its sections. Embedding the page you are currently on is therefore harmless but pointless — you get the same body twice.

Next

Chapter 12 — Cart experience — the cart drawer, cart page, AJAX updates, promo bars, and express checkout.