Sunrise

https://github.com/swellstores/sunrise-theme
Admin
Sunrise is Swell's official default theme for Proxima, providing a comprehensive foundation for...
Tokens:1,021
Snippets:8
Trust Score:7.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install and Run Sunrise Theme

Source: https://github.com/swellstores/sunrise-theme/blob/master/README.md

This snippet covers the initial setup and development server commands for the Sunrise theme. It requires Swell CLI, Node.js 18+, and npm. The commands clone the theme, install dependencies, and start a development server with or without bundling.

```bash
# 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 dev
```

--------------------------------

### Swell Theme Development Workflow Commands

Source: https://github.com/swellstores/sunrise-theme/blob/master/README.md

A collection of essential commands for managing the Sunrise theme's development lifecycle using the Swell CLI. These commands include starting the development server, building for production, deploying to a Swell store, and pulling the latest changes.

```bash
# 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 pull
```

--------------------------------

### Implement Custom HTML Element Component

Source: https://github.com/swellstores/sunrise-theme/blob/master/README.md

Provides an example of creating a custom HTML element using JavaScript for interactive features within the Sunrise theme. This custom element, 'my-component', renders a paragraph when connected to the DOM.

```javascript
// src/components/my-component.js
class MyComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<p>Custom component loaded</p>';
  }
}

customElements.define('my-component', MyComponent);
```

--------------------------------

### JavaScript Custom Element Example (JavaScript)

Source: https://github.com/swellstores/sunrise-theme/blob/master/README.md

This JavaScript snippet demonstrates the creation of a custom HTML element by extending the HTMLElement class. The constructor is called when an instance of the element is created, and the element's specific functionality is implemented within this class.

```javascript
class Accordion extends HTMLElement {
  constructor() {
    super();
  }
  // Element functionality written in here
}
```

--------------------------------

### Add Custom Tailwind CSS Styles

Source: https://github.com/swellstores/sunrise-theme/blob/master/README.md

Shows how to extend Sunrise theme's styling by adding custom CSS rules using Tailwind CSS utilities. This example defines a primary button style within the `src/styles/custom.css` file.

```css
/* src/styles/custom.css */
@layer components {
  .btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded;
  }
}
```

--------------------------------

### Display Product with Subscription Options (Liquid)

Source: https://github.com/swellstores/sunrise-theme/blob/master/README.md

This Liquid template snippet displays product information, including its name and price. It conditionally renders subscription pricing if available, iterating through available plans. It also shows the standard product price.

```liquid
<!-- 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>
```

--------------------------------

### Create a Custom Liquid Section

Source: https://github.com/swellstores/sunrise-theme/blob/master/README.md

Demonstrates how to create a new custom section for the Sunrise theme using Liquid templating. This involves defining the section's HTML structure and its associated schema for settings in the Swell dashboard.

```liquid
<!-- 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 %}
```

--------------------------------

### Add Product to Cart with Subscription Option (Liquid)

Source: https://github.com/swellstores/sunrise-theme/blob/master/README.md

This Liquid form snippet allows users to add a product to their cart. It includes a hidden input for the product ID and a conditional select dropdown for subscription plans if the product offers them. The form submits using the 'cart_add' action.

```liquid
<!-- 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 %}
```
Tokens:
Raw