Overview

The Neptune theme is an in house theme at SLTWTR built on Shopify's Dawn theme, part of their Online Store 2.0 release. It offers tailored Webpack configurations, greater folder structure flexibility, and accommodates diverse client requirements. The theme allows for easy integration of complex features while keeping things simple for those who don't need them.

Key Features

Two main directories

The project has two primary folders - Components and Theme. The Theme directory follows the standard Shopify theme structure, while the Components directory holds assets and feature-specific folders.

Components directory

This is the heart of the Neptune theme. This directory contains assets and folders named for the features they create. Each feature folder can include JavaScript, styles (CSS or SASS), and more folders that follow the Shopify theme pattern of sections, snippets, and templates.

Webpack Dynamic Entrypoints

Inside of a component there are 2 options for bundling assets. Including javascript and CSS in the main bundle is the primary way to build out globally available features but with this configuration if an index.js exists in the component These assets with be processed as a separate entry point and compile to the theme/assets/ directory as component-name.js and component-name.css. This is particularly useful for code that doesn't need to exist in the main bundle like javascript and styles for the collection page or product detail page.

Symbolic links

Liquid files added to the folders in the Components directory are moved to corresponding directories and replaced with symbolic links when the project starts. This supports component-minded development while adhering to Shopify theme development practices.

You can read more about this functionality here.

Easy component transfer

The Neptune theme structure enables seamless component movement between client projects, allowing for easy extension of functionality when needed, while keeping things simple for stores that don't require added complexity.

Component Structure

Neptune-theme 2.0 
└── components     
		├── main.css     
		├── main.js     
		└── slider-cart         
				├── sections         
				│   ├── cart-modal.js         
				│   └── cart-modal.liquid         
				├── snippets         
				│   └── cart-item.liquid         
				└── index.js