@o2vend/theme-cli 1.0.32

package/test-theme/sections/hero-fallback.liquid

@@ -0,0 +1,212 @@
+{% comment %}
+  Hero Fallback Content
+  Used when widgets are not available or widget mode is disabled
+{% endcomment %}
+
+{% assign hero_image = section.settings.hero_image | default: '/assets/hero-placeholder.jpg' %}
+{% assign hero_title = section.settings.hero_title | default: shop.name %}
+{% assign hero_subtitle = section.settings.hero_subtitle | default: 'Discover our curated collection' %}
+{% assign hero_button_text = section.settings.hero_button_text | default: 'Shop Now' %}
+{% assign hero_button_url = section.settings.hero_button_url | default: '/collections/all' %}
+{% assign hero_button_2_text = section.settings.hero_button_2_text %}
+{% assign hero_button_2_url = section.settings.hero_button_2_url %}
+{% assign hero_text_position = section.settings.text_position | default: 'center' %}
+{% assign hero_text_color = section.settings.text_color | default: 'white' %}
+{% assign hero_overlay_opacity = section.settings.overlay_opacity | default: 0.4 %}
+
+<section class="hero-banner" 
+         style="background-image: url('{{ hero_image }}');"
+         data-hero-banner>
+  
+  <div class="hero-overlay" 
+       style="background: rgba(0, 0, 0, {{ hero_overlay_opacity }});"></div>
+  
+  <div class="hero-content hero-content--{{ hero_text_position }}">
+    <div class="hero-container">
+      <div class="hero-text" style="color: {{ hero_text_color }};">
+        {% if hero_title != blank %}
+          <h1 class="hero-title">{{ hero_title }}</h1>
+        {% endif %}
+        
+        {% if hero_subtitle != blank %}
+          <p class="hero-subtitle">{{ hero_subtitle }}</p>
+        {% endif %}
+        
+        <div class="hero-actions">
+          {% if hero_button_text != blank and hero_button_url != blank %}
+            <a href="{{ hero_button_url }}" class="hero-button hero-button--primary">
+              {{ hero_button_text }}
+            </a>
+          {% endif %}
+          
+          {% if hero_button_2_text != blank and hero_button_2_url != blank %}
+            <a href="{{ hero_button_2_url }}" class="hero-button hero-button--secondary">
+              {{ hero_button_2_text }}
+            </a>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .hero-banner {
+    position: relative;
+    height: 70vh;
+    min-height: 500px;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .hero-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+  }
+
+  .hero-content {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .hero-content--left {
+    justify-content: flex-start;
+  }
+
+  .hero-content--right {
+    justify-content: flex-end;
+  }
+
+  .hero-content--center {
+    justify-content: center;
+  }
+
+  .hero-container {
+    max-width: {{ settings.container_width }}px;
+    width: 100%;
+    padding: 0 2rem;
+  }
+
+  .hero-text {
+    max-width: 600px;
+    text-align: center;
+  }
+
+  .hero-content--left .hero-text {
+    text-align: left;
+  }
+
+  .hero-content--right .hero-text {
+    text-align: right;
+  }
+
+  .hero-title {
+    font-size: 3rem;
+    font-weight: 700;
+    line-height: 1.1;
+    margin: 0 0 1rem 0;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  }
+
+  .hero-subtitle {
+    font-size: 1.25rem;
+    line-height: 1.6;
+    margin: 0 0 2rem 0;
+    opacity: 0.9;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  }
+
+  .hero-actions {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .hero-content--left .hero-actions {
+    justify-content: flex-start;
+  }
+
+  .hero-content--right .hero-actions {
+    justify-content: flex-end;
+  }
+
+  .hero-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem 2rem;
+    border-radius: 0.5rem;
+    font-weight: 600;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    min-width: 150px;
+    text-align: center;
+  }
+
+  .hero-button--primary {
+    background: {{ settings.color_primary }};
+    color: white;
+    border: 2px solid {{ settings.color_primary }};
+  }
+
+  .hero-button--primary:hover {
+    background: transparent;
+    color: {{ settings.color_primary }};
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+  }
+
+  .hero-button--secondary {
+    background: transparent;
+    color: {{ hero_text_color }};
+    border: 2px solid {{ hero_text_color }};
+  }
+
+  .hero-button--secondary:hover {
+    background: {{ hero_text_color }};
+    color: {{ settings.color_primary }};
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+  }
+
+  @media (max-width: 768px) {
+    .hero-banner {
+      height: 60vh;
+      min-height: 400px;
+    }
+
+    .hero-title {
+      font-size: 2rem;
+    }
+
+    .hero-subtitle {
+      font-size: 1rem;
+    }
+
+    .hero-actions {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .hero-button {
+      width: 100%;
+      max-width: 250px;
+    }
+  }
+</style>
+

package/test-theme/sections/hero.liquid

@@ -0,0 +1,136 @@
+{% comment %}
+  Hero Section
+  
+  This section renders widgets from the "hero" section in order.
+  Widgets are rendered one below another, sorted by Position field.
+  Supports drag-and-drop ordering in visual editor.
+{% endcomment %}
+
+{% comment %}Hero Section - Always render, with widgets or fallback{% endcomment %}
+{% assign hero_widgets = widgets.hero %}
+{% if hero_widgets and hero_widgets.size > 0 %}
+  <section class="theme-section theme-section--hero" data-section="hero" data-section-id="{{ section.id }}">
+    {% for widget in hero_widgets %}
+      <div class="theme-widget-wrapper" 
+           data-widget-id="{{ widget.id }}" 
+           data-widget-type="{{ widget.type }}"
+           data-widget-position="{{ widget.Position | default: widget.position | default: forloop.index }}">
+        {{ widget | render_widget }}
+      </div>
+    {% endfor %}
+  </section>
+  <style>
+    .theme-section--hero .theme-widget-wrapper {
+      display: block;
+    }
+    .widget-error {
+      padding: 1rem;
+      background: #fee2e2;
+      border: 1px solid #fecaca;
+      border-radius: 0.5rem;
+      color: #991b1b;
+      font-size: 0.875rem;
+    }
+  </style>
+{% else %}
+  {% render 'sections/hero-fallback' %}
+{% endif %}
+
+{% schema %}
+{
+  "name": "Hero",
+  "settings": [
+    {
+      "type": "paragraph",
+      "content": "This section displays widgets from the 'hero' section. Widgets are automatically ordered by their Position field and can be reordered in the visual editor."
+    },
+    {
+      "type": "image_picker",
+      "id": "hero_image",
+      "label": "Hero Image",
+      "info": "Recommended size: 1920x800px"
+    },
+    {
+      "type": "text",
+      "id": "hero_title",
+      "label": "Hero Title",
+      "default": "Welcome to Our Store"
+    },
+    {
+      "type": "textarea",
+      "id": "hero_subtitle",
+      "label": "Hero Subtitle",
+      "default": "Discover amazing products at great prices"
+    },
+    {
+      "type": "text",
+      "id": "hero_button_text",
+      "label": "Primary Button Text",
+      "default": "Shop Now"
+    },
+    {
+      "type": "url",
+      "id": "hero_button_url",
+      "label": "Primary Button URL",
+      "default": "/collections/all"
+    },
+    {
+      "type": "text",
+      "id": "hero_button_2_text",
+      "label": "Secondary Button Text"
+    },
+    {
+      "type": "url",
+      "id": "hero_button_2_url",
+      "label": "Secondary Button URL"
+    },
+    {
+      "type": "select",
+      "id": "text_position",
+      "label": "Text Position",
+      "options": [
+        {
+          "value": "left",
+          "label": "Left"
+        },
+        {
+          "value": "center",
+          "label": "Center"
+        },
+        {
+          "value": "right",
+          "label": "Right"
+        }
+      ],
+      "default": "center"
+    },
+    {
+      "type": "color",
+      "id": "text_color",
+      "label": "Text Color",
+      "default": "#ffffff"
+    },
+    {
+      "type": "range",
+      "id": "overlay_opacity",
+      "label": "Overlay Opacity",
+      "min": 0,
+      "max": 0.8,
+      "step": 0.1,
+      "default": 0.4
+    }
+  ],
+  "presets": [
+    {
+      "name": "Hero",
+      "settings": {
+        "hero_title": "Welcome to Our Store",
+        "hero_subtitle": "Discover amazing products at great prices",
+        "hero_button_text": "Shop Now",
+        "hero_button_url": "/collections/all"
+      }
+    }
+  ]
+}
+{% endschema %}
+

package/test-theme/snippets/account-sidebar.liquid

@@ -0,0 +1,200 @@
+<!-- Mobile Menu Button -->
+<button class="account-menu-toggle" aria-label="Open account menu">
+  <span class="menu-icon">☰</span>
+  <span>Account Menu</span>
+</button>
+
+<!-- Overlay -->
+<div class="account-nav-overlay"></div>
+
+<!-- Sidebar Navigation -->
+<nav class="account-nav">
+  <div class="account-nav-header">
+    <span>My Account</span>
+    <button class="account-nav-close" aria-label="Close menu">✕</button>
+  </div>
+
+  <div class="account-nav-links">
+    <a href="/account" class="account-nav-link{% if page.handle == 'dashboard' %} active{% endif %}">Dashboard</a>
+    <a href="/orders" class="account-nav-link{% if page.handle == 'orders' or page.handle == 'order_detail' %} active{% endif %}">Orders</a>
+    <a href="/return-orders" class="account-nav-link{% if page.handle == 'return_orders' or page.handle == 'order_detail' %} active{% endif %}">Return Orders</a>
+    <a href="/addresses" class="account-nav-link{% if page.handle == 'addresses' %} active{% endif %}">Addresses</a>
+    <a href="/profile" class="account-nav-link{% if page.handle == 'profile' %} active{% endif %}">Profile</a>
+    <a href="/wishlist" class="account-nav-link{% if page.handle == 'wishlist' %} active{% endif %}">Wishlist</a>
+    <a href="/loyalty" class="account-nav-link{% if page.handle == 'loyalty' %} active{% endif %}">Loyalty Program</a>
+    <a href="/loyalty-redemption" class="account-nav-link{% if page.handle == 'loyalty-redemption' %} active{% endif %}">Loyalty Redemption</a>
+    <a href="/store-credit" class="account-nav-link{% if page.handle == 'store_credit' %} active{% endif %}">Store Credit</a>
+    <a href="/subscriptions" class="account-nav-link{% if page.handle == 'subscriptions' %} active{% endif %}">Subscription</a>
+  </div>
+</nav>
+
+<style>/* ===============================
+   Account Menu Toggle Button
+================================ */
+.account-menu-toggle {
+  display: none;
+  align-items: center;
+  gap: 8px;
+  background: white;
+  color: black;
+  padding: 12px 16px;
+  border-radius: 10px;
+  border: none;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  z-index: 9997;
+}
+
+/* ===============================
+   Overlay
+================================ */
+.account-nav-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(4px);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.35s ease, visibility 0.35s ease;
+  z-index: 9998;
+}
+
+/* ===============================
+   Sidebar Base (Desktop)
+================================ */
+.account-nav {
+  display: flex;
+  flex-direction: column;
+  z-index: 9999;
+}
+
+/* ===============================
+   Sidebar Header
+================================ */
+.account-nav-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #eee;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+/* Close button (hidden on desktop) */
+.account-nav-close {
+  display: none;
+  background: none;
+  border: none;
+  font-size: 22px;
+  cursor: pointer;
+  line-height: 1;
+}
+
+/* ===============================
+   Sidebar Links
+================================ */
+.account-nav-links {
+  margin-top: 16px;
+  display: flex;
+  flex-direction: column;
+}
+
+.account-nav-link {
+  padding: 14px 14px;
+  border-radius: 10px;
+  font-size: 15px;
+  color: #333;
+  text-decoration: none;
+  transition: background 0.25s ease, color 0.25s ease;
+}
+
+.account-nav-link:hover {
+  background: #f5f5f5;
+}
+
+.account-nav-link.active {
+  background: #111;
+  color: #fff;
+}
+
+/* ===============================
+   Mobile & Tablet Drawer
+================================ */
+@media (max-width: 991px) {
+
+  /* Show menu button */
+  .account-menu-toggle {
+    display: inline-flex;
+    font-weight: bolder;
+  }
+
+  /* Drawer */
+  .account-nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 300px;
+    height: 100vh;
+    background: #fff;
+    padding: 20px;
+    transform: translateX(-100%);
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
+    overflow-y: auto;
+  }
+
+  /* Open state */
+  .account-nav.open {
+    transform: translateX(0);
+  }
+
+  /* Overlay visible */
+  .account-nav-overlay.show {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  /* Show close button */
+  .account-nav-close {
+    display: inline-flex;
+  }
+
+  /* Sticky header */
+  .account-nav-header {
+    position: sticky;
+    top: 0;
+    background: #fff;
+    z-index: 1;
+  }
+  .account-sidebar {
+    z-index:999;
+  }
+}
+
+</style><script>
+  const toggleBtn = document.querySelector('.account-menu-toggle');
+  const sidebar = document.querySelector('.account-nav');
+  const overlay = document.querySelector('.account-nav-overlay');
+  const closeBtn = document.querySelector('.account-nav-close');
+  const links = document.querySelectorAll('.account-nav-link');
+
+  const closeMenu = () => {
+    sidebar.classList.remove('open');
+    overlay.classList.remove('show');
+  };
+
+  toggleBtn.addEventListener('click', () => {
+    sidebar.classList.add('open');
+    overlay.classList.add('show');
+  });
+
+  closeBtn.addEventListener('click', closeMenu);
+  overlay.addEventListener('click', closeMenu);
+
+  links.forEach(link => {
+    link.addEventListener('click', closeMenu);
+  });
+</script>
+