# NORTHLINE — six-section Shopify page example

Self-initiated fictional concept by LiqFrame. The six main layouts, copy, anchors and original AI-created concept photographs correspond to the public portfolio preview. This is not a commissioned client project or evidence of a production Shopify installation.

## What is in the package
- Six reorderable sections in `templates/page.northline.json`.
- Brand-specific responsive layouts in Liquid and scoped CSS, with editable headings, copy, images, colors, links and content blocks.
- Shared outline icon sprite in `assets/commerce-icons.svg`, with editable icons for feature blocks. AUREL includes expandable usage notes; NORTHLINE includes a keyboard-accessible image gallery using the selected product’s catalog images (up to eight), or the clearly marked concept assets before setup.
- Concept photography in `assets/`, used as portable fallbacks until you select your own images.
- A product hero with a native product form and variant selector, four-column specifications, a reversed editorial split, packing features, FAQ and final CTA.

## Install and connect
1. Copy the `sections`, `assets` and `templates` folders into an **unpublished duplicate** Online Store 2.0 theme.
2. Create a Shopify page and assign template `northline`. For a homepage, copy the section configuration into the duplicate theme’s `index.json` only after checking its existing sections; this download deliberately does not overwrite a home template.
3. Open the Theme Editor. The supplied copy, layouts, links and fallback photographs are already configured. Keep anchor IDs unique if adding more sections. Replace all fictional brand/product copy before use for a real store.
4. Select the hero product. Its real price, availability and variants come from Shopify. The native variant dropdown synchronizes price, media and the submit button. Without a selected product, a setup note appears and purchasing is disabled. The two-button size control in the browser preview is a simulation; the source deliberately uses a native labeled dropdown.
5. Your existing theme supplies its header, footer and cart page. The portfolio’s LiqFrame demo bar and in-memory bag are not included. Native forms post to Shopify’s cart; no custom cart drawer, app or checkout integration is assumed.
6. Product details/specifications and story photography are editorial settings, not automatically derived from variants. Set them to accurately describe all offered variants; the preview’s illustrative sizes are not real product measurements.

## Verification and limits
The source has been structurally checked for valid schema/template JSON, unique settings, section/block correspondence, asset references and configured links. **It has not been installed or purchase-tested inside a Shopify store in this session.**

Before publishing: check 375px, 768px and 1440px layouts; keyboard navigation; theme font/style conflicts; missing or long content; actual variant images, price/currency, unavailable variants and cart submissions. Check Theme Editor add/reorder/reload behavior. One hero should supply the page h1.

The NORTHLINE selector supports products with at most 250 variants. Higher counts link to the product page. It does not implement selling plans, quantity rules, inventory subscriptions, option-value deep links or custom cart drawers. AUREL multi-variant items use the product page. Theme compatibility and commerce behavior require testing on your duplicate theme.

Official references: https://shopify.dev/docs/api/liquid/tags/form#form-product ; https://shopify.dev/docs/storefronts/themes/product-merchandising/variants ; https://shopify.dev/docs/storefronts/themes/architecture/sections/section-schema
