Welcome and Getting Started

Welcome to Hyprism. This chapter introduces what makes the theme distinctive, walks you through installation, and explains the Shopify customizer workflow you’ll use throughout the rest of this manual.

What Hyprism is

Hyprism is a Shopify theme built around a Linux-rice aesthetic — translucent surfaces (glassmorphism), a decorative frame around your content, a multilayered z-index composition that gives the store visual depth, and a careful dark/light pair system that respects the merchant’s brand instead of just inverting colors.

The visual language is paired with a block-first architecture: every content section is a flexible container that holds reusable blocks. You can rearrange, add, and remove blocks within sections without writing code, and the theme has 50+ block types covering everything from headings to product cards to bento tiles.

Hyprism includes:

• 13 fully styled page templates — home, product, collection, search, blog, article, page, cart, customer account, 404, password, gift card
• 4 premium signature sections — Hotspot Image, Bento Grid, Quick View, Sticky Product Bar
• 57 sections and 60 blocks total — covering every common (and many uncommon) e-commerce layout pattern
• 5 color schemes × 34 color roles each, with theme-wide dark/light pair binding
• Built-in English and German locales (storefront + theme-editor)
• AI-optimized SEO foundation — JSON-LD, llms.txt, hreflang, and rich meta tags
• Wishlist, Recently Viewed, Related Products built in (no app required)
• AJAX cart drawer with mobile sticky bar and express checkout (Shop Pay, Apple Pay, Google Pay, PayPal)

Who this manual is for

• Merchants installing and customizing Hyprism through the Shopify theme editor (no coding required for 95% of customization)
• Developers extending the theme with custom blocks, custom CSS, or app integrations
• Shopify Partners working on a client’s store who need a quick orientation

Wherever a chapter assumes Liquid / CSS / JavaScript knowledge, it will say so explicitly.

Installing Hyprism

From the Shopify Theme Store (recommended)

1. In the Shopify admin, go to Online Store → Themes.
2. Click Add theme → Visit Theme Store.
3. Find Hyprism, click Try theme (free preview) or Add theme (purchase).
4. The theme is added to your store’s theme library.
5. Click Customize to open the theme editor.

From a .zip file

If you received a theme.zip directly:

1. Shopify admin → Online Store → Themes.
2. Click Add theme → Upload zip file.
3. Select your hyprism.zip.
4. The theme is installed but not published. Click Customize to start.

⚠️ Always duplicate before editing a live theme

If you already have Hyprism (or any theme) published and you want to make changes:

1. Find your current theme in Online Store → Themes.
2. Click ⋯ → Duplicate.
3. Edit the duplicate. Preview it. When happy, click Publish.

This way the live store keeps running while you customize, and if you break something the original is one click away.

The Shopify theme editor

The theme editor is where 95% of Hyprism customization happens. Open it by clicking Customize next to any theme in Online Store → Themes.

Left rail — page picker

At the top, you can switch between page templates (Home, Product, Collection, Cart, etc.). Each page template has its own arrangement of sections.

Sections sidebar

Below the page picker, you see the list of sections on the currently selected template. Click a section to edit its settings on the right; drag a section to reorder it; click Add section at the bottom to insert a new one.

Blocks (inside a section)

When a section is expanded, you see its blocks. Click a block to edit its settings; drag to reorder; click Add block to insert (the list of available block types depends on the section).

Right panel — settings

When you click a section or block, the right panel shows that component’s settings. Hyprism organizes settings into clear groups (Layout, Effects, Mobile, etc.) — this manual documents what each one does.

Theme settings (gear icon, bottom-left)

The gear icon at the bottom-left of the editor opens theme-wide settings: branding, colors, typography, button styles, frame, background, effects, layout defaults, mobile-layout overrides, SEO/GEO, and a few advanced toggles. These settings apply globally — every section reads from them unless it has an override.

Preview viewport

The main area shows a live preview of your storefront. Use the device-toggle in the top toolbar to preview mobile / tablet / desktop. Most changes appear instantly; some (like font changes) require a refresh.

Save and publish

• Save stores changes to the current theme version (visible to anyone with the preview link, not to public visitors).
• Publish swaps this theme to be the live one customers see. Only one theme can be live at a time.

Where things are

Hyprism is designed so you almost never need to touch code. But here’s where things live, in case you want to know.

What	Where to edit	Where the file is
Logo, colors, fonts, frame, effects	Theme editor → gear icon → theme settings	config/settings_schema.json
Section settings (per template)	Theme editor → click section → right panel	templates/*.json + sections/*.liquid
Block settings (per section)	Theme editor → click block → right panel	blocks/*.liquid
Storefront translations	Shopify admin → Online Store → Themes → ⋯ → Edit default theme content	locales/*.json
Theme-editor translations (DE)	Shopify admin language switch	locales/*.schema.json

Quick Start — your first 30 minutes

After Hyprism is installed and you’re in the theme editor, this 30-minute walkthrough takes you from “Shopify defaults” to “looks like my brand, not a demo”. Each step is concrete: exact paths to settings + what to do + what you should see after.

By the end you’ll have a presentable home page, header, and product page with your real brand on them.

Step 1 — Logo and colors (10 min)

1.1 Click the gear icon (bottom-left of theme editor) → open theme settings.

1.2 Click Branding in the top tabs.

• Upload your logo (PNG or SVG, retina-ready — 2× your final display size)
• Upload an Alternate logo if you have a light-on-dark version (only used when dark/light toggle is on)
• Toggle Use primary logo in both modes off if you want the storefront to swap to the alternate when dark mode is active

The logo’s display width is configured per-instance, not in Branding — it lives on the Header section (logo_width, range 40–320px, default 120px). See Step 3 below.

You should see your logo replace the placeholder at the top-left of the preview.

1.3 Click Colors in the top tabs. You’ll see 5 color schemes.

• Click Scheme 1 (the default) — change Background to your brand background (e.g. #0a0a0a for dark, #ffffff for light)
• Change Text (Heading and Body if separate) to a good contrast color
• Change Accent to your brand’s primary accent color
• Keep Border slightly different from background — typically subtle (e.g. #2a2a2a on dark bg, #e5e5e5 on light bg)

The preview updates as you save each setting. Reload after major changes to see the full effect.

1.4 Repeat for schemes 2–5. Most merchants use 2–3 schemes actively; 4–5 are good to fill with a darker/lighter variant for variety.

✅ Checkpoint: Your logo, header, and at least one section visible in the preview now match your brand colors.

Step 2 — Typography (5 min)

2.1 Same gear icon → Typography tab.

2.2 Hyprism uses 4 font roles:

• Body — paragraphs, defaults to Work Sans (clean sans-serif)
• Subheading — small uppercase labels, eyebrows
• Heading — H1–H6 (typically a display font)
• Accent — for stylized emphasis (typically a contrasting style)

Click Body font picker → choose your brand body font (or keep Work Sans — it’s clean and readable).

Click Heading font picker → choose your brand heading font.

You can leave Subheading and Accent on defaults until later.

2.3 Set H1–H6 sizes if you want bigger/smaller than defaults. Most stores keep defaults.

✅ Checkpoint: Reload preview. Headings and body text now use your fonts.

Step 3 — Header configuration (5 min)

3.1 Close theme settings. Click on the Header in the left sections sidebar.

3.2 In the right panel — these are the most important settings to set first:

• Header position (header_position) — Top (✅ default, classic horizontal header) / Floating (above content, transparent on first section) / Left or Right (sidebar). Stick with Top for first launch.
• Logo width — drag the slider (40–320px range, default 120px) until your logo reads right.
• Logo position — Left / Center (✅ default) / Right. Most e-commerce defaults to Left for left-to-right reading cultures, but Center is Hyprism’s default.
• Show search / Show wishlist link — toggle to match your store.
• Cart icon + account icon are always shown if the visitor has Shopify customer accounts enabled.

Note: there is no separate “Nav mode: Text / Buttons” select at the section level. The menu styling (text vs button vs pill) is controlled per-menu-block in the Menu block’s own settings — see §4.11.1 Menu block.

3.3 Click Menu block inside the header.

• Menu dropdown — select your main navigation menu (set up in Shopify Admin → Online Store → Navigation; “main-menu” usually exists by default).

✅ Checkpoint: Header shows your logo + nav + cart icon, all aligned to your brand colors.

Step 4 — Replace the hero (5 min)

4.1 In the left sidebar, click the Hero section (it’s the first section on the home template).

4.2 In the Hero section settings panel, upload Image — a brand-relevant photo (1920×1080px or larger; product hero, lifestyle shot, brand-mood image). Optionally upload a separate Mobile image if your desktop image is landscape-cropped and a portrait crop reads better on phones.

4.3 The Hero section is block-first — it has no fixed heading/text/button content fields. Instead, you compose content from atom blocks:

• Click Add block inside the Hero section
• Add a Heading block — type your hero heading (e.g. “Discover Sustainable Linen”)
• Add a Text block — short body copy (e.g. “Hand-loomed in Portugal. Free shipping over $50.”)
• Add a Button block — set its label + link (Primary style is the most prominent)
• Optionally add a second Button block (set its style to Secondary, link to About / Learn more)

Each atom block has its own color-scheme override, alignment, margin, etc. settings. See §5a Atom blocks for the full reference.

4.4 Use the Hero section’s Content placement settings to position the block stack within the hero (Vertical: Top/Center/Bottom, Horizontal: Left/Center/Right).

4.5 Try the surface effects:

• Toggle Glass ON for a frosted-glass content panel (Linux-rice look)
• Adjust Overlay opacity (0–100%) to dim the background image for text readability

✅ Checkpoint: Hero shows your brand image + heading + body + CTA(s), positioned how you want.

Step 5 — Test the cart flow (3 min)

5.1 In the preview, click into any product (or the first featured product).

5.2 Click Add to cart.

The Cart Drawer should slide in from the right showing your item. If you have free shipping promo configured, you’ll see the progress bar at the top.

5.3 Test increase/decrease quantity. Test remove. The drawer updates without page reload.

5.4 Click Checkout. Shopify checkout page opens. (Note: Shopify checkout is separate from theme — brand-match it via Settings → Checkout, see chapter 18.)

5.5 Back to preview. Click the cart icon — drawer reopens with items intact.

✅ Checkpoint: Cart drawer works, items persist, checkout reachable.

Step 6 — Newsletter signup (2 min)

6.1 Scroll the home page in preview to find the Newsletter section (usually near the bottom).

6.2 Edit the heading + subtitle to match your brand voice. e.g.:

• Heading: “Join the list”
• Subtitle: “10% off your first order. Early access to drops.”

6.3 Test the form:

• Type a test email in the preview
• Submit
• See the success message

(The email lands in Shopify Admin → Customers as a subscribed customer; manage from there or hook up Klaviyo / Mailchimp later — see chapter 16.)

✅ Checkpoint: Newsletter form submits successfully.

Step 7 — Save and review (2 min)

7.1 Click Save (top-right of editor).

7.2 Open the preview in a new browser tab using the preview URL (gear icon → “Preview” button at top of editor — actually the URL of the customizer is your preview).

7.3 Walk through the home page top to bottom. Check:

• Header shows correctly
• Hero looks intentional (not “demo-y”)
• All sections have your content (not Lorem ipsum)
• Cart drawer works
• Newsletter submits
• Footer has your social links + legal pages

✅ Final checkpoint: The store feels like yours, not a generic demo.

What’s next after these 30 minutes

You have the foundation. The next chapters dive deeper:

• Color schemes 5×34 = 170 color slots, dark/light pairs → chapter 2
• Section spacing, mobile-padding, full-width modes → chapter 3
• Header dropdown styles, glass + 3D button effects → chapter 4
• Product page composition with 12 dedicated blocks → chapter 7
• Pre-launch checklist before you go live → chapter 21

💡 Tip: Customize iteratively. After 30 minutes of basics, walk away, look at the store fresh in 1 hour, then refine. You’ll catch things that looked fine in the moment.

What’s not in this theme

Hyprism deliberately doesn’t try to do everything. A few things are intentionally out of scope:

• Checkout pages. Shopify owns the checkout. Theme code can’t customize it. Brand-match the checkout via Shopify Admin → Settings → Checkout (see chapter 18).
• Customer account pages on stores using New Customer Accounts. Stores activated after 2024 default to Shopify-hosted account pages that themes can’t customize. Hyprism includes theme files for stores using Classic Customer Accounts; on New Account stores, Shopify routes account pages to its own UI.
• Apps that inject their own UI. Apps like Trusted Shops, StoreSEO, Translate & Adapt place widgets into the storefront via app blocks. Hyprism includes hooks for these (chapter 16), but the app controls the widget’s content and styling.

Next steps

1. Read chapter 2 — Foundation — set up your brand: logo, colors, fonts, dark/light mode, frame, effects.
2. Read chapter 3 — Layout — page margins, content width, mobile padding.
3. Configure header (chapter 4) and footer (chapter 5) — these appear on every page, so they’re best to set up early.
4. Build your home page using the section chapters (6 — Hero, 9 — Premium, 10 — Marketing).
5. Configure product, collection, and cart templates (chapters 7, 8, 12).
6. Localization and SEO as a final polish (chapters 13, 15).

Each chapter is self-contained — feel free to skip around. Where one chapter references settings or concepts from another, you’ll see a cross-reference link.