NOIR · Version 2.0.0
Theme documentation
A considered guide to installing, configuring and maintaining NOIR.
01 / Start here
Install and prepare
- In Shopify admin, open Online Store → Themes.
- Choose Import theme → Upload ZIP file.
- Upload NOIR and preview it before publishing.
- Add your logo, typography, colors, navigation, products, policies and market settings.
- Replace every placeholder with licensed brand media and complete catalog content.
- Test every core template, customer path and active market.
02 / Presets
Choose a starting voice
NOIR
Cinematic ink, bone and gold for fashion-led storytelling, runway edits and expressive image treatments.
Ivory
A brighter editorial composition for bridal, beauty, jewellery and quiet objects.
Atelier
A material-led structure centered on process, studio film, principles and chronology.
Presets are starting structures. They do not include demo-store products or licensed photography.
03 / Navigation
Header and mega menu
Select the main navigation inside the Header section. Add promotional mega-menu blocks for important campaigns and match each promotional block to its parent navigation item. Use short labels and descriptive link text.
The header includes search, localization, cart and customer-account entry points. Test translated navigation and long labels on mobile.
04 / Products
Build product information deliberately
Product information is assembled from reorderable blocks: title, price, variant picker, quantity, buy buttons, pickup availability, complementary products, accordions, size chart, Custom Liquid and app blocks.
Variants and swatches
Configure native Shopify option values and swatch data in Shopify admin. Keep readable text labels alongside every visual swatch.
Size chart
Create a Shopify page containing an approved sizing table and measuring guidance. Add the Size chart block to the product template and select that page.
Recommendations
Configure complementary products through Shopify Search & Discovery. Related recommendations appear only when Shopify returns eligible products.
Pickup and gift cards
Pickup availability depends on location settings and variant inventory. Gift-recipient fields appear on gift-card products when enabled in the Buy buttons block.
05 / Discovery
Collection and search
Collection and search templates support Shopify filtering and sorting. Configure filters in Shopify Search & Discovery, maintain useful product data and test price filtering in every active market and currency.
06 / Purchase path
Cart and checkout entry
NOIR supports a cart drawer, line properties, selling plans, line and cart discounts, unit pricing, cart notes, tax messaging and accelerated checkout. Checkout is controlled by Shopify. Test the complete purchase path using the store’s actual payment, shipping, tax and market configuration.
07 / Composition
Available sections
Hero, slideshow, video banner, editorial split, runway collection, collection story, promotion grid, image gallery, image hotspots, lookbook, before/after, multicolumn, timeline, craft chapter, logo list, press quotes, testimonials, featured blog, FAQ, product comparison, store locations, recently viewed, newsletter, rich text and Custom Liquid.
Use Custom Liquid only for trusted code. Install third-party functionality through app blocks whenever possible.
08 / Inclusive use
Accessibility
Keep headings in a logical order, write useful alternative text, retain visible labels and never encode meaning with color alone. NOIR includes focus styles, reduced-motion handling, live announcements and a skip link, but merchant content can still introduce accessibility issues.
Test keyboard navigation, 200% zoom and screen-reader output after final content and apps are installed.
09 / Performance
Keep the storefront light
- Upload appropriately cropped and compressed media.
- Supply a poster image for every video.
- Avoid stacking multiple autoplay videos above the fold.
- Minimize third-party apps, pixels and font files.
- Re-test performance after every major app or media change.
10 / FAQ
Common questions
Why do I see placeholders?
Select the required image, product, collection or blog in the theme editor. Placeholders are safe fallbacks, not demo content.
Why are complementary products empty?
Assign them with Shopify Search & Discovery and confirm the products are available in the current market.
Why is pickup unavailable?
Confirm pickup is enabled at a location and that the selected variant has inventory there.
Can I add an app to the product page?
Yes. Add its app block inside Product information. The app must provide a compatible theme app extension.
Where should policies be edited?
Use Shopify admin’s policy settings and link those policies in footer navigation. Do not hard-code legal promises into the theme.
11 / Client care
Support policy
3KPIS Studio supports setup questions, reproducible theme defects and compatibility with supported Shopify features. Support excludes bespoke development, third-party app defects, store data entry, design services and problems caused by merchant-edited code.
We aim to provide an initial response within two business days. Critical reproducible theme defects are prioritized immediately.