A Shopify Online Store 2.0 implementation of the supplied Purelane homepage reference.
- Purelane visual direction retained from the supplied HTML reference.
- Responsive hero, animated water background, product rotator, section rail, reviews, bundles, shop shelf, trust bar, newsletter and sticky CTA.
- Shopify-native Liquid and JSON templates.
- Header and footer moved into Shopify section groups so they are managed separately from the homepage.
- JSON homepage template with a reusable
purelane-homepagesection. - Product, collection, cart, search, page and 404 templates.
- Native product forms using Shopify cart/product routes.
- Collection-driven product cards in the bestseller shelf.
- Newsletter form wired through Shopify's customer form.
- Search, account and cart navigation wired to Shopify routes.
- Theme settings and section presets for Online Store 2.0 editor compatibility.
- Accessibility-minded skip link, labels and reduced-motion behavior retained.
assets/
purelane.css
purelane.js
config/
settings_schema.json
settings_data.json
layout/
theme.liquid
sections/
header-group.json
footer-group.json
purelane-header.liquid
purelane-footer.liquid
purelane-homepage.liquid
main-product.liquid
main-collection.liquid
main-cart.liquid
main-search.liquid
main-page.liquid
main-404.liquid
snippets/
purelane-product-form.liquid
templates/
index.json
product.json
collection.json
cart.json
search.json
page.json
list-collections.json
404.json
- Create or open a Shopify development store.
- Add the products used by the assignment to a collection.
- Upload this theme from Online Store → Themes → Add theme → Upload zip file.
- Open Customize and select the Purelane homepage.
- Set the product collection in the
Purelane homepagesection. - Preview desktop and mobile layouts before publishing.
The original assignment supplied a standalone HTML homepage. This project converts that visual reference into Shopify's Online Store 2.0 architecture rather than leaving it as a static HTML page. The homepage is a JSON template, the site chrome is represented as section groups, and reusable functionality is implemented through Liquid sections/snippets.
The current package follows Dawn/Online Store 2.0 conventions and is intentionally kept self-contained for the assignment. It does not vendor the full upstream Dawn repository or claim to be an unmodified copy of Dawn.
- Product collection assigned in Theme Editor.
- Product images/prices/variants populated in Shopify admin.
- Homepage checked on desktop.
- Homepage checked on mobile.
- Add-to-cart tested.
- Cart and checkout flow tested.
- Search tested.
- Newsletter signup tested.
- No placeholder links remain where the assignment expects live Shopify destinations.
The header home/brand links use routes.root_url so the homepage can be reached correctly even when the Theme Editor is previewing the 404 template.
- Removed unsupported
defaultfrom thecollectionsection setting. - Added valid theme settings schema entries.
- Added explicit header subtitle setting.
- Homepage JSON template uses an alphanumeric section ID.