Purelane — Shopify Theme

A custom Shopify storefront theme built for Purelane, a modern home-care brand focused on plant-powered cleaning products.

This project was developed as a Shopify theme implementation / Product Engineer assignment, with a strong focus on responsive UI, reusable Liquid components, merchant configurability, product merchandising, and polished storefront interactions.

✨ Overview

Purelane is designed as a clean, modern e-commerce experience that combines:

• Custom Shopify Liquid sections
• Responsive storefront design
• Reusable Liquid snippets
• Custom CSS architecture
• Lightweight JavaScript interactions
• Product and bundle merchandising
• Customer reviews
• Responsive navigation
• Shopify Theme Editor configuration

The repository is structured around Shopify's native theme architecture rather than relying on a separate frontend framework.

🚀 Features

Header & Navigation

Custom Purelane header with:

• Brand navigation
• Responsive layout
• Mobile-friendly navigation
• Shopify-compatible Liquid implementation

Hero Section

The hero section provides:

• Custom headline and subheading
• Primary and secondary CTAs
• Product promise badges
• Responsive product/bottle illustration
• Bundle pricing stages
• Compare-at pricing
• Savings/discount messaging
• Animated reveal effects
• Shopify Theme Editor settings

The hero supports configurable bundle stages for:

• Single product
• Any 2 products
• Any 3 products

All major copy, CTA links, badges, pricing and bundle information can be managed through Shopify's section settings.

Product Grid

The custom shop grid provides a dedicated storefront area for displaying Purelane products with reusable product-card components.

Bundles

A dedicated bundle section is included for presenting product combinations and promotional offers.

Product Combos

The theme includes a separate combo merchandising section designed to showcase curated product combinations.

Customer Reviews

A dedicated reviews section provides a structured area for customer testimonials and social proof.

Reusable Product Cards

Product-card functionality is separated into a reusable Liquid snippet, allowing product presentation to remain consistent across sections.

Custom Icons

The project includes a reusable icon snippet for rendering interface and product-promise icons.

🛠️ Tech Stack

Technology	Purpose
Shopify Liquid	Theme templating and dynamic storefront rendering
HTML5	Semantic storefront markup
CSS3	Layout, responsive design and visual styling
JavaScript	Interactive UI behaviour and animations
Shopify Theme Schema	Merchant-configurable sections and blocks
Shopify Online Store	E-commerce platform

The implementation follows the general Shopify theme architecture used by modern Shopify themes, where Liquid handles server-rendered storefront markup and JavaScript is used selectively for interactive behaviour.

📁 Project Structure

Shopify_Store/
│
├── assets/
│   ├── purelane-base.css
│   ├── purelane-bundles.css
│   ├── purelane-combos.css
│   ├── purelane-header.css
│   ├── purelane-hero.css
│   ├── purelane-hero.js
│   ├── purelane-reveal.js
│   ├── purelane-reviews.css
│   └── purelane-shop-grid.css
│
├── sections/
│   ├── purelane-bundles.liquid
│   ├── purelane-combos.liquid
│   ├── purelane-header.liquid
│   ├── purelane-hero.liquid
│   ├── purelane-reviews.liquid
│   └── purelane-shop-grid.liquid
│
└── snippets/
    ├── purelane-icon.liquid
    └── purelane-product-card.liquid

The repository currently contains six custom sections, nine theme assets, and two reusable snippets.

🧩 Architecture

The theme follows a component-oriented Shopify structure.

Sections

Each major storefront area is implemented as an independent Liquid section:

Header
   ↓
Hero
   ↓
Shop Grid
   ↓
Bundles
   ↓
Combos
   ↓
Reviews

This makes the storefront easier to maintain and allows sections to be configured independently through Shopify's Theme Editor.

Snippets

Common UI elements are extracted into reusable snippets:

purelane-icon.liquid
        │
        ├── Hero
        ├── Badges
        └── Other UI elements

purelane-product-card.liquid
        │
        ├── Product Grid
        ├── Bundles
        └── Product merchandising

🎨 Styling

CSS is separated by feature instead of placing the entire theme stylesheet into one file.

purelane-base.css
        │
        ├── Global styles
        └── Shared utilities

purelane-header.css
purelane-hero.css
purelane-bundles.css
purelane-combos.css
purelane-reviews.css
purelane-shop-grid.css

This keeps feature-specific styling isolated and makes future changes easier.

⚡ JavaScript

JavaScript is kept lightweight and focused on UI behaviour.

purelane-hero.js

Handles interactive behaviour associated with the hero bundle/product presentation.

purelane-reveal.js

Provides reveal/entrance animation behaviour for storefront elements.

The hero section loads these assets through Shopify's asset_url mechanism and uses deferred script loading.

⚙️ Shopify Theme Editor

The theme is designed to make important storefront content configurable by merchants rather than hard-coded.

For example, the hero section exposes settings for:

• Headline
• Highlighted headline text
• Subheading
• Primary CTA
• Secondary CTA
• Promise badges
• Icons
• Bundle quantity
• Product/bundle label
• Price
• Compare-at price
• Savings text

This allows the storefront content to be changed from Shopify's Theme Editor without modifying the Liquid source code.

🔧 Installation

Option 1 — Shopify CLI

Install the Shopify CLI and authenticate with your Shopify development store.

shopify theme dev

Then select or connect the appropriate development store when prompted.

Option 2 — Shopify Admin

1. Download or clone this repository.
2. Open your Shopify Admin.
3. Navigate to Online Store → Themes.
4. Add/upload the theme.
5. Open the Customize panel.
6. Configure the Purelane sections.
7. Preview the storefront.
8. Publish when ready.

This repository is structured as Shopify theme code and is intended to be used inside a Shopify storefront environment.

🧪 Development

Clone the repository:

git clone https://github.com/karanjha000/Shopify_Store.git
cd Shopify_Store

For local Shopify theme development:

shopify theme dev

For theme validation, Shopify's Theme Check tooling can be used to identify Liquid, schema and theme-development issues. Shopify also provides an official GitHub Action for running Theme Check in CI workflows.

📱 Responsive Design

The theme is designed for modern storefront layouts across:

• Desktop
• Tablet
• Mobile

Responsive behaviour is handled primarily through CSS, while JavaScript is reserved for interactive components.

♿ Accessibility Considerations

The implementation includes accessibility-oriented patterns such as:

• Semantic HTML
• aria-label attributes
• Button controls for interactive elements
• Tab roles for the hero bundle selector
• Descriptive labels for decorative product illustrations

For example, the hero bundle selector exposes tab semantics and selected-state information for the active bundle.

📌 Project Goals

The primary goals of this implementation are:

1. Recreate a polished Purelane storefront experience.
2. Use Shopify-native Liquid architecture.
3. Keep sections modular and reusable.
4. Make important content merchant-editable.
5. Provide responsive storefront behaviour.
6. Keep JavaScript lightweight.
7. Separate styling by feature.
8. Build reusable product and icon components.

📂 Main Components

Component	File	Purpose
Header	purelane-header.liquid	Store navigation/header
Hero	purelane-hero.liquid	Main storefront introduction and offers
Shop Grid	purelane-shop-grid.liquid	Product merchandising
Bundles	purelane-bundles.liquid	Bundle offers
Combos	purelane-combos.liquid	Curated product combinations
Reviews	purelane-reviews.liquid	Customer social proof
Product Card	purelane-product-card.liquid	Reusable product UI
Icons	purelane-icon.liquid	Reusable icon rendering

🎯 Assignment Context

This project was created as part of a Troopod AI Product Engineer assignment, focusing on implementing Purelane Shopify storefront sections and demonstrating practical Shopify theme-development skills. The repository itself identifies this assignment context in its project description.

👨‍💻 Author

Karan Jha

GitHub: https://github.com/karanjha000

Repository: https://github.com/karanjha000/Shopify_Store

📄 License

This project was created for development/assignment purposes.

Unless otherwise specified, the project should not be assumed to be licensed for unrestricted commercial redistribution.