Sunrise is Swell's official default theme for Proxima, featuring comprehensive Shopify compatibility and subscription support. Sunrise provides a complete foundation for building high-converting ecommerce storefronts.
- Announcement bar - Promotional messages and notifications
- Hero section - Eye-catching homepage banners
- Featured products - Showcase bestsellers and highlights
- Product slideshow - Interactive product carousels
- Newsletter signup - Email capture and marketing
- Testimonials - Social proof and customer reviews
- FAQ section - Common questions and answers
- Image gallery - Visual storytelling and brand assets
- Contact forms - Customer inquiry collection
- Rich text content - Flexible content management
- Video sections - Multimedia product demonstrations
- Collection showcase - Category and product organization
- Social proof - Instagram feeds and reviews
- Custom HTML - Developer-friendly customization
- Blog integration - Content marketing support
- Subscription products - Recurring purchase options with flexible billing schedules
- Subscription management - Customer portal for managing recurring orders
- Trial periods - Free trial support for subscription products
- Multiple billing frequencies - Daily, weekly, monthly, and yearly options
- Subscription upsells - Cross-selling and upgrade opportunities
- Direct template mapping - Seamless migration from Shopify themes
- Liquid template support - Full Swell Liquid implementation with Shopify objects
- Form compatibility - Cart, checkout, and contact form equivalents
- Object structure - Compatible product, collection, and customer objects
- Theme settings - Familiar configuration interface
- Tailwind CSS - Utility-first styling framework
- Rollup bundling - Optimized JavaScript and CSS compilation
- Custom HTML elements - Modern web component approach
- Hot reloading - Real-time development updates
- TypeScript support - Type-safe development environment
- Responsive design - Mobile-first responsive layouts
Clone this theme and create your own version:
# Clone the Sunrise theme
git clone https://github.com/swellstores/sunrise.git my-theme
cd my-theme
# Install dependencies
npm install
# Start development server with bundling
swell theme dev --bundle
# Or start without bundling
swell theme devSunrise uses the Swell CLI for development and deployment:
# Start local development with hot reloading
swell theme dev --bundle
# Build for production
npm run build
# Deploy to your Swell store
swell theme push
# Pull latest changes from store
swell theme pullConfigure colors, fonts, and layout options in the Swell dashboard under Storefront > Themes > Customize.
Add new sections by creating files in the theme/sections/ directory:
<!-- theme/sections/my-custom-section.liquid -->
<section class="my-section">
<h2>{{ section.settings.title }}</h2>
<p>{{ section.settings.description }}</p>
</section>
{% schema %}
{
"name": "Custom Section",
"settings": [
{
"type": "text",
"id": "title",
"label": "Section Title"
}
]
}
{% endschema %}Sunrise uses Tailwind CSS for styling. Add custom styles in src/styles/:
/* src/styles/custom.css */
@layer components {
.btn-primary {
@apply bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded;
}
}Add interactive features using custom HTML elements:
// src/components/my-component.js
class MyComponent extends HTMLElement {
connectedCallback() {
this.innerHTML = '<p>Custom component loaded</p>';
}
}
customElements.define('my-component', MyComponent);sunrise/
├── theme/ # Liquid templates
│ ├── assets/ # Static assets
│ ├── components/ # Reusable components
│ ├── config/ # Theme configuration
│ ├── layouts/ # Page layouts
│ ├── sections/ # Theme sections
│ └── templates/ # Page templates
├── src/ # JS and CSS source files
├── rollup.config.js # Build configuration
├── tailwind.config.js # Tailwind configuration
└── swell.json # Theme metadata
Sunrise uses Swell Liquid, an enhanced version of Liquid with additional objects and filters.
<!-- Display product with subscription options -->
<div class="product">
<h1>{{ product.name }}</h1>
<div class="price">
{% if product.purchase_options.subscription %}
<!-- Subscription pricing -->
{% for plan in product.purchase_options.subscription.plans %}
<div class="subscription-option">
{{ plan.name }} - {{ plan.price | money }}
</div>
{% endfor %}
{% endif %}
<!-- Standard pricing -->
<span class="price">{{ product.price | money }}</span>
</div>
</div><!-- Add to cart with subscription -->
{% form 'cart_add' %}
<input type="hidden" name="product_id" value="{{ product.id }}">
{% if product.purchase_options.subscription %}
<select name="purchase_option[plan_id]">
{% for plan in product.purchase_options.subscription.plans %}
<option value="{{ plan.id }}">{{ plan.name }}</option>
{% endfor %}
</select>
{% endif %}
<button type="submit">Add to Cart</button>
{% endform %}Sunrise includes comprehensive subscription commerce capabilities:
- Multiple billing frequencies (monthly, yearly, etc.)
- Trial periods and introductory pricing
- Pause and skip functionality
- Subscription-only products
- Subscription dashboard in customer accounts
- Billing and shipping address management
- Payment method updates
- Order history and tracking
We use Tailwind for styling. Refer to Tailwind's documentation for more details.
IIFE: Wrap all JavaScript code not imported in src/main.js in an Immediately Invoked Function Expression (IIFE) (() => { ... })();. This ensures a local scope and prevents global variable conflicts.
We use custom elements by creating classes that extend HTMLElement for JS and HTML interactions:
class Accordion extends HTMLElement {
constructor() {
super();
}
// Element functionality written in here
}<accordion>
<!-- Element markup written in here -->
</accordion>- Slideshow - Swiper
- Megamenu, Copy-to-Clipboard, Dropdown, Select - Floating UI
- Icons - Ionic Icons
- Swell Documentation
- Swell Liquid Reference
- Proxima Storefront
- Theme Development
- Swell CLI Documentation
See the LICENSE file for details.