Horizon
Headless NextJS storefront starter powered by Swell
Overview:
Horizon is a fully-featured headless e-commerce theme developed around Swell's powerful and flexible subscription features. It comes pre-configured to work with the Swell Editor out-of-the-box, allowing users to customize its content and styling as needed. The codebase is built using Next.js, making it easy to modify for those familiar with React.
Features:
- Complete purchase flow: Horizon has a seamless purchase flow, allowing customers to complete transactions effortlessly.
- Subscriptions: The theme supports Swell's subscription features, providing flexibility for recurring payments.
- Content personalization through customizable Quizzes: Horizon enables personalized content through customizable quizzes, enhancing the customer experience.
- Multi-currency: It supports multiple currencies, allowing customers to view and transact in their preferred currency.
- i18n: Horizon offers internationalization support, making it accessible to customers from different regions.
- Product sales: The theme includes features for product sales, helping businesses drive revenue.
- Automatic discounts: Horizon provides automatic discount functionality, allowing businesses to apply discounts to products effortlessly.
- One-click add-to-cart for products: Customers can add products to their cart with just a click, streamlining the shopping process.
- Dynamic pages with a large and extendable collection of content blocks: Horizon offers dynamic page creation with a wide range of customizable content blocks, providing flexibility in content presentation.
- Product search: The theme includes a product search feature, enabling customers to find specific products easily.
- Filter products by any attribute: Customers can filter products based on various attributes, helping them narrow down their search results.
- Flexible product customization through variant options: Horizon allows for flexible product customization through variant options, giving customers more choices when making a purchase.
- A customer portal with orders and subscription handling: The theme includes a customer portal where customers can manage their orders and subscriptions.
- Technology stack: Horizon is built using Next.js, React, TypeScript, and Tailwind CSS. It also utilizes Storybook for UI development, Swell's GraphQL API for data retrieval, Zustand for state management, and Jest and React Testing Library for testing.
Summary:
Horizon is a powerful headless e-commerce theme built around Swell's subscription features. It offers a wide range of features, including a complete purchase flow, content personalization through quizzes, multi-currency support, automatic discounts, and more. With a technology stack consisting of Next.js, React, TypeScript, and Tailwind CSS, Horizon provides flexibility for customization and ease of use. By following the installation guide, businesses can easily set up and run Horizon to enhance their e-commerce experience.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Headless UI
Headless UI is a set of completely unstyled, fully accessible UI components for React, Vue, and Alpine.js that empower developers to build their own fully accessible custom UI components. Headless UI allows developers to focus on building accessible and highly functional user interfaces, without the need to worry about styling or layout.
- Ecommerce
Ecommerce websites sell products or services to customers through an online storefront. These websites typically include features such as product listings, shopping carts, payment processing, and order management tools.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Framer Motion
Alpine.js is a lightweight JavaScript framework that simplifies the process of creating dynamic, reactive user interfaces on the web. It uses a declarative syntax that offers a higher level of abstraction compared to vanilla JavaScript, while being more performant and easier to use than jQuery.
- Graphql
A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.
- Zustand
Zustand is a lightweight state management library for React that provides a simple and intuitive API for managing state in your application. It allows developers to easily create and manage global state, and provides a powerful set of tools for optimizing performance and improving developer productivity. Zustand is designed to be easy to use and easy to learn, making it a popular choice for developers of all skill levels.