Lushe - Custom Shopify Theme

Lushe is a bespoke Shopify theme built by extending Shopify’s native Horizon framework with fully customized blocks, sections, and modern web components. The architecture focuses on modular design, optimal performance, and merchant flexibility.

Architecture Overview

• Base Theme: Built on top of the Horizon ecosystem to maintain native Shopify features and OS 2.0 compatibility.
• Component Model: Leverages native HTML5 Web Components for encapsulated, JavaScript-driven interactive elements.
• Flexibility: Utilizes highly granular schema settings to give merchants precise control over layouts without touching code.
• Nested Blocks: Utilize the use of dynamic blocks to create dynamic controls.

Custom Sections

Sections act as the structural building blocks of the Lushe theme, designed to be fully reorderable on any page template.

• Liquid Scaffolding: Structured using clean semantic HTML and populated dynamically via section.settings.
• Dynamic CSS/JS: Asset loading is scoped directly to individual sections using javascript and stylesheet Liquid tags to reduce initial page load times.
• Contextual Presets: Every section includes predefined presets in its schema, enabling instant configuration within the Shopify Theme Editor.

Custom Blocks

Blocks provide granular modularity, allowing merchants to compose unique content layouts within the parent sections.

• Type Definition: Defined using specific type declarations inside the section schema to control block variety.
• Limit Controls: Enforced strict configuration limits (limit: max_number) to maintain layout integrity and performance boundaries.
• App Blocks: Configured to support standard content_for_index and third-party app blocks seamlessly.

Native Web Components

Interactive features in Lushe are driven by vanilla Web Components rather than heavy third-party JavaScript libraries.

• Custom Elements: Utilizes customElements.define to create reusable HTML tags (e.g., <lushe-carousel> or <product-quickview>).
• Encapsulation: JavaScript logic is tied directly to the lifecycle methods (connectedCallback) of the DOM element.
• Performance: Ensures zero framework overhead, fast rendering, and minimal impact on Shopify’s Lighthouse speed scores.

Store Link

Password: reompa

The full stack,
explained.

Lushe is a custom Shopify theme developed with Liquid, HTML and JavaScript using the Shopify API and Horizon Web component