Documentation

Getting Started

Welcome to Klyro. This guide walks you through installation, theme editor basics, and the most important settings to configure before launch.

Before You Begin

• A Shopify store on any paid plan
• Admin access to Online Store → Themes
• Product images at least 1200 × 1600 px (3:4 ratio recommended)
• Navigation menu configured under Online Store → Navigation

Installation

Install Klyro from the Shopify Theme Store or upload the theme ZIP manually.

From Shopify Theme Store

1. Find KlyroSearch for "Klyro" in the Shopify Theme Store under Clothing & Fashion.
2. Add to theme libraryClick Try theme to add it to your store without publishing.
3. Preview & customizeOpen the theme editor and review the demo content.
4. PublishWhen ready, click Publish to make Klyro your live theme.

Manual Upload (ZIP)

1. Download the ZIPFrom your purchase confirmation or partner dashboard.
2. Go to ThemesShopify Admin → Online Store → Themes → Add theme → Upload zip file.
3. ActivateClick Publish or keep as an unpublished theme for testing.

Development with Shopify CLI

shopify theme dev --store your-store.myshopify.com

Theme Architecture

Klyro is built on Shopify's Skeleton Theme foundation with a fully custom klyro-* component system.

Naming Conventions

• Sections: klyro-[name].liquid — e.g. klyro-featured-products.liquid
• CSS: section-klyro-[name].css or klyro-[name].css
• JS: klyro-[name].js — loaded with defer
• CSS classes: BEM with klyro- prefix — e.g. klyro-fp__card

Section Groups

Global header and footer are managed via section groups, not individual page templates:

• sections/header-group.json → klyro-header + klyro-utility-bar
• sections/footer-group.json → klyro-footer

Theme Settings

Global settings are found in the theme editor sidebar under Theme settings. These apply store-wide.

Klyro Product Badges

Badges appear on all product cards automatically. Configure in Theme settings → Klyro product badges.

• Automatic: Sale (%), Limited stock (<10 units), New (by publish date), Sold out
• Manual tags: Add tags new, hot, popular, bestseller, or klyro-badge:Your Label to any product
• Max badges: Set maximum badges shown per card (default: 2)

Sections

All 48 Klyro sections include written step-by-step instructions for the Shopify theme editor (Online Store → Themes → Customize), plus optional screenshots. Click a screenshot to open the viewer — click again to zoom in and drag to inspect small details.

Blocks

Many Klyro sections support blocks — sub-components you can add, remove, and reorder within a section.

Product Accordion Blocks

Each accordion block maps to a panel on the product page. Content priority:

1. Product metafield (if set) — see Product Metafields
2. Block richtext content in theme editor
3. Product description (for Product Details panel only)

Templates

Klyro uses JSON templates. Each template defines which sections appear on a given page type.

Snippets

Snippets are reusable Liquid partials. They are not editable in the theme editor but power the theme's core functionality.

Header

The Klyro header is a full-featured navigation system with mega menu, search drawer, account modal, and floating sticky behavior.

Key Settings

Utility Bar

The optional utility bar sits above the header and supports announcement links, social icons, and country/language selectors. Enable it in Header group → Utility bar.

Footer

The Klyro footer combines newsletter signup, brand identity, navigation columns, and social proof.

Footer Blocks

• Link list — Add up to 4 menu columns with custom headings
• Newsletter form with customizable heading and subtext
• Brand wordmark and tagline
• Instagram 3-image strip (pulls from theme social settings)
• Payment icons, policy links, back-to-top button
• Country and language selectors

Product Page

Klyro offers three product page layouts, each optimized for different catalog styles.

Product Features

• Variant picker — Buttons, dropdown, or swatches (circle/square)
• Dynamic checkout — Shop Pay, Apple Pay, Google Pay buttons
• Low stock indicator — Shows when inventory falls below threshold
• Size guide — Modal with customizable size chart content
• Store pickup — Pickup availability modal
• Complete the look — Inline product carousel from linked collections
• Quick Look — Modal product preview from collection grids
• Breadcrumbs — Shown on product pages with JSON-LD structured data

Product Metafields

Klyro uses optional product metafields for accordion content, trust notes under Add to cart, and extra product attributes. Installing the theme does not create these definitions automatically — add them once in Shopify Admin, then fill values per product.

Step 1 — Create metafield definitions

Do this once per store. Repeat for each metafield in the reference table below.

1. Open Custom dataGo to Settings → Custom data → Products.
2. Add definitionClick Add definition.
3. NameEnter a merchant-friendly label (e.g. Product details (accordion)). This is what you see in Admin; it does not have to match the key.
4. Namespace and keyNamespace must be custom. Key must match exactly — e.g. klyro_product_details (no spaces, all lowercase).
5. TypeChoose the type from the table below. For accordion fields, use Rich text. For trust notes and labels, use Single line text.
6. Optional: PinTurn on Pin to product details if you want the field visible at the top of the product edit page.
7. SaveClick Save, then repeat for each metafield you need.

For custom.klyro_arm_length_type, after choosing Single line text, you can optionally limit values to: Long sleeve, Short sleeve, Sleeveless, Three-quarter sleeve.

Step 2 — Add values to products

1. Open a productGo to Products → [Product].
2. Find metafieldsScroll to the Metafields section (or pinned metafields near the top if you enabled pin).
3. Fill in contentEnter text for each field. Rich text fields support headings, lists, and links.
4. SaveSave the product and preview the product page — accordion panels and trust notes update automatically.

Metafield reference

Product Trust Bar Section

Add the Product trust bar section below the main product section. It displays icon badges (shipping, returns, secure payment, etc.) in a responsive row — on mobile it becomes a swipeable slider.

Collection Page

The Klyro collection page includes a hero banner, Shopify filtering, sticky toolbar, and sidebar collection navigation.

Features

• Hero banner — Custom image, overlay, title, description, badge pills, CTA button
• Filtering — Powered by Shopify Search & Discovery app; color swatches auto-generated from variants
• Sorting — Custom pill-style sort dropdown (Featured, Best selling, Price, Date, A–Z)
• Sticky toolbar — Filter/sort bar sticks on scroll
• Sidebar nav — Optional link list with collection images and product counts
• Product grid — 2–4 columns, portrait/square/adapt ratio, secondary image on hover
• View toggle — Grid density switcher

Cart

Klyro supports three cart modes configured in Theme settings → Cart.

Cart Features

• Free shipping bar — Progress bar toward free shipping threshold (set in Theme settings)
• Discount codes — Apply discount codes directly in the cart drawer
• Cart note — Optional order note field
• Tax information — Optional tax note display
• Empty state — Collection shortcuts when cart is empty
• Clear cart — Confirmation modal before clearing all items
• Quantity controls — +/- buttons with max quantity enforcement

Search

Klyro includes predictive search in the header drawer and a full search results page.

Predictive Search (Header Drawer)

• Opens from the search icon in the header
• Live results as you type — products, collections, pages
• Popular search terms configured in header section settings
• Featured collection product grid in empty state
• Enable/disable in Theme settings → Search input

Search Page

• Full results for products, articles, and pages
• Sort by relevance, price, date
• Popular tag shortcuts in hero area
• Product cards match collection page styling

Mega Menu

The Klyro mega menu displays multi-column navigation with optional promotional banners and product cards.

Setup

1. Set menu typeIn Header section settings, set Desktop menu type to Mega menu.
2. Assign a menuSelect your main navigation menu (3 levels recommended).
3. Add promo blocksAdd Mega menu or Mega promo card blocks for banner images, products, or collections.
4. Configure split navOptionally use Menu split at to divide links left/right, or use link blocks.

Mega Menu Block Types

Performance

Klyro is built with performance as a priority. All optimizations are enabled by default.

Recommendations

• Compress product images before upload (WebP or optimized JPEG)
• Limit homepage sections to 12–15 for fastest load
• Use Shopify's CDN for all media — avoid external image hosts
• Disable scroll animations on slower devices via Theme settings → Animations
• Test with PageSpeed Insights before launch

SEO

Klyro includes built-in SEO features. Additional optimization is done through Shopify Admin.

• Canonical URLs — Automatically set on all pages via theme.liquid
• Open Graph tags — og:title, og:image, og:description via klyro-meta-tags snippet
• Twitter Card — summary_large_image meta tags
• Product OG price — og:price:amount and og:price:currency on product pages
• Breadcrumb JSON-LD — BreadcrumbList structured data on product and collection pages
• Semantic HTML — Proper heading hierarchy, alt text on all images, skip-to-content link

Integrations

Klyro supports Shopify app blocks and key platform integrations.

FAQ

How do I change the homepage layout?

In the theme editor, select the homepage template. Add, remove, or reorder sections using the left sidebar. Each section has its own settings panel.

How do I switch product page layouts?

Go to Online Store → Themes → Customize → navigate to any product page. In the top template picker, select product.v1, product.v2, or product.v3. Or assign templates per product in Admin → Products → [Product] → Theme template.

How do I set up the mega menu?

See the Mega Menu section. Set Desktop menu type to Mega menu in Header settings, then add promo blocks.

How do I add product badges?

Automatic badges (sale, new, limited) are configured in Theme settings → Klyro product badges. Manual badges use product tags: new, hot, popular, bestseller.

How do I set up product metafields?

Go to Settings → Custom data → Products and create each definition with namespace custom and the exact keys from the Product Metafields reference table. Then fill values on each product under Products → [Product] → Metafields. The theme does not create these definitions when you install it.

How do I configure free shipping bar?

Theme settings → Cart → Enable free shipping bar → set threshold amount (in your store currency, without decimals for cents — e.g. 100 for $100.00).

Can I use Klyro for non-fashion stores?

Yes. While optimized for clothing & fashion, all sections and settings work for any product catalog. Disable fashion-specific sections (lookbook, compare spotlight) if not needed.

How do I update the theme?

See the full guide in Updating Klyro. In short: duplicate your theme, click Update in the theme library, preview, then publish.

Troubleshooting

Sort dropdown text not visible (Windows)

Fixed in v1.0.0. If you see white text on white background in the collection sort dropdown on Windows, update to the latest theme version.

Product accordion content not showing

First, confirm the metafield definitions exist under Settings → Custom data → Products (namespace custom, keys and types as listed in Product Metafields). Then fill values on the product under Products → [Product] → Metafields. If metafields are empty, the theme uses the product description or section fallbacks. You can also add content directly in the accordion block in the theme editor.

Filters not appearing on collection page

Install the Shopify Search & Discovery app and configure filters under Admin → Search & Discovery → Filters. Enable filtering in the Collection Page section settings.

Cart drawer not opening

Verify Theme settings → Cart → Cart type is set to Drawer. Clear browser cache and test in an incognito window.

Mega menu not showing promo banners

Add mega_menu or mega_promo_card blocks in the Header section. Ensure Desktop menu type is set to Mega menu.

Header overlaps hero on homepage

This is intentional — Klyro uses a transparent overlay header on the homepage. The hero section accounts for header height automatically. If content is hidden, check that the Lookbook Hero section is the first section on the homepage.

Still need help?

Visit our Support page or email support@klyrothemes.store.

Updating Klyro

When a new version is released (e.g. v1.0.0 → v1.1.0), you can update safely without losing your products, collections, or theme editor customizations.

What Is Preserved vs. Replaced

How to Update (Step by Step)

1. Duplicate your themeGo to Online Store → Themes. On your live Klyro theme, click ⋯ → Duplicate. This creates a backup you can revert to.
2. Check for updatesWhen a new version is available, Shopify shows an Update available badge on the theme in your library.
3. Run the updateClick Update theme. Shopify downloads the new theme code and merges your existing settings where possible.
4. Preview before publishingOpen the updated theme in the editor. Check homepage, a product page, collection page, cart, and mobile layout.
5. Publish or rollbackIf everything looks good, publish the updated theme. If something broke, keep your duplicate and contact support.

Post-Update Checklist

• Homepage sections load correctly (hero, collections, featured products)
• Product page — gallery, variants, add to cart, accordions
• Collection page — filters, sort dropdown, product grid
• Cart drawer opens and checkout works
• Header mega menu and search drawer
• Footer newsletter and link columns
• Mobile navigation drawer

If Something Looks Wrong

• Revert instantly: Publish your duplicated backup theme from step 1.
• Missing section settings: Open the theme editor and re-check section settings — rare schema changes may reset individual fields.
• Custom code lost: Re-apply edits from your backup, or avoid editing theme code directly and use the theme editor + Custom Liquid blocks instead.
• Read the changelog: Check Changelog for breaking changes or required actions in the new version.

Tips for a Smooth Update

Changelog

v1.0.0 — Initial Release

• 48 custom Klyro sections for homepage, product, collection, cart, and content pages
• 3 product page layouts: Atelier, Grid, Slide
• Mega menu with promo banners and product cards
• Cart drawer with free shipping bar and discount codes
• Predictive search drawer with featured collection
• Product metafields for accordion content and trust notes
• Klyro product badge system with automatic sale/limited/new detection
• Customer reviews, shoppable image/video, compare spotlight sections
• 5 color schemes, scroll animations, floating sticky header
• 20+ language translations
• Collection page with Shopify Search & Discovery filter support
• Windows sort dropdown visibility fix