easyorders 0.1.14 → 0.1.15

package/dist/template/theme/sections/product-details.liquid

@@ -1,63 +1,63 @@
-<div class="ab-pd">
-  <h1 class="ab-pd-name">{{ product_name }}</h1>
-
-  <div class="ab-pd-price-row">
-    {% if sale_price and sale_price < price %}
-      <span class="ab-pd-price-old">{{ price }} {{ currency }}</span>
-      <span class="ab-pd-price ab-pd-price-sale">{{ sale_price }} {{ currency }}</span>
-    {% else %}
-      <span class="ab-pd-price">{{ price }} {{ currency }}</span>
-    {% endif %}
-  </div>
-
-  {% if rating > 0 %}
-  <div class="ab-pd-rating">
-    <div class="ab-pd-stars">
-      {% assign full_stars = rating | floor %}
-      {% assign has_half = false %}
-      {% assign decimal = rating | minus: full_stars %}
-      {% if decimal >= 0.25 and decimal < 0.75 %}
-        {% assign has_half = true %}
-      {% elsif decimal >= 0.75 %}
-        {% assign full_stars = full_stars | plus: 1 %}
-      {% endif %}
-
-      {% for i in (1..5) %}
-        {% if i <= full_stars %}
-          <span class="ab-pd-star ab-pd-star-filled"></span>
-        {% elsif has_half and i == full_stars | plus: 1 %}
-          <span class="ab-pd-star ab-pd-star-half"></span>
-        {% else %}
-          <span class="ab-pd-star ab-pd-star-empty"></span>
-        {% endif %}
-      {% endfor %}
-    </div>
-    <span class="ab-pd-reviews-count">({{ reviews_count }})</span>
-  </div>
-  {% endif %}
-
-  {% if description and description != "" %}
-    <p class="ab-pd-description">{{ description }}</p>
-  {% endif %}
-
-  {% comment %} Wishlist & Compare buttons on the product detail page — dispatch toggle events handled by the storefront JS layer
-  <div class="ab-pd-actions">
-    <button
-      class="ab-pd-wishlist-btn"
-      type="button"
-      aria-label="Add to wishlist"
-      onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('toggle-wishlist',{bubbles:true,detail:{productId:'{{ product_id }}'}}));"
-    >
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
-    </button>
-    <button
-      class="ab-pd-compare-btn"
-      type="button"
-      aria-label="Compare"
-      onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('toggle-compare',{bubbles:true,detail:{productId:'{{ product_id }}'}}));"
-    >
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 3 21 8 16 13"/><line x1="21" y1="8" x2="9" y2="8"/><polyline points="8 21 3 16 8 11"/><line x1="3" y1="16" x2="15" y2="16"/></svg>
-    </button>
-  </div>
-  {% endcomment %}
-</div>
+<div class="ab-pd">
+  <h1 class="ab-pd-name">{{ product_name }}</h1>
+
+  <div class="ab-pd-price-row">
+    {% if sale_price and sale_price < price %}
+      <span class="ab-pd-price-old">{{ price }} {{ currency }}</span>
+      <span class="ab-pd-price ab-pd-price-sale">{{ sale_price }} {{ currency }}</span>
+    {% else %}
+      <span class="ab-pd-price">{{ price }} {{ currency }}</span>
+    {% endif %}
+  </div>
+
+  {% if rating > 0 %}
+  <div class="ab-pd-rating">
+    <div class="ab-pd-stars">
+      {% assign full_stars = rating | floor %}
+      {% assign has_half = false %}
+      {% assign decimal = rating | minus: full_stars %}
+      {% if decimal >= 0.25 and decimal < 0.75 %}
+        {% assign has_half = true %}
+      {% elsif decimal >= 0.75 %}
+        {% assign full_stars = full_stars | plus: 1 %}
+      {% endif %}
+
+      {% for i in (1..5) %}
+        {% if i <= full_stars %}
+          <span class="ab-pd-star ab-pd-star-filled"></span>
+        {% elsif has_half and i == full_stars | plus: 1 %}
+          <span class="ab-pd-star ab-pd-star-half"></span>
+        {% else %}
+          <span class="ab-pd-star ab-pd-star-empty"></span>
+        {% endif %}
+      {% endfor %}
+    </div>
+    <span class="ab-pd-reviews-count">({{ reviews_count }})</span>
+  </div>
+  {% endif %}
+
+  {% if description and description != "" %}
+    <p class="ab-pd-description">{{ description }}</p>
+  {% endif %}
+
+  {% comment %} Wishlist & Compare buttons on the product detail page — dispatch toggle events handled by the storefront JS layer
+  <div class="ab-pd-actions">
+    <button
+      class="ab-pd-wishlist-btn"
+      type="button"
+      aria-label="Add to wishlist"
+      onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('toggle-wishlist',{bubbles:true,detail:{productId:'{{ product_id }}'}}));"
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+    </button>
+    <button
+      class="ab-pd-compare-btn"
+      type="button"
+      aria-label="Compare"
+      onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('toggle-compare',{bubbles:true,detail:{productId:'{{ product_id }}'}}));"
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 3 21 8 16 13"/><line x1="21" y1="8" x2="9" y2="8"/><polyline points="8 21 3 16 8 11"/><line x1="3" y1="16" x2="15" y2="16"/></svg>
+    </button>
+  </div>
+  {% endcomment %}
+</div>

package/dist/template/theme/sections/products-grid.liquid

@@ -1,86 +1,86 @@
-
-<section class="ab-pgrid">
-  <div class="ab-pgrid-wrap ab-pgrid-wrap--no-hero">
-    {% for product in products %}
-      {% assign color_variation = product.variations | where: "type", "color" | first %}
-      {% assign image_variation = product.variations | where: "type", "image" | first %}
-      {% assign swatch_total = 0 %}
-      {% if color_variation and color_variation.props %}
-        {% assign swatch_total = color_variation.props.size %}
-      {% elsif image_variation and image_variation.props %}
-        {% assign swatch_total = image_variation.props.size %}
-      {% endif %}
-
-      <a href="/products/{{ product.slug }}" class="ab-pgrid-card ab-reveal" style="animation-delay: {{ forloop.index | times: 0.04 }}s">
-        {% if product.sale_price and product.sale_price < product.price %}
-          {% assign discount = product.price | minus: product.sale_price | times: 100 | divided_by: product.price | floor %}
-          <span class="ab-pgrid-badge ab-sale-badge">{{ sale }} -{{ discount }}%</span>
-        {% endif %}
-
-        <div class="ab-pgrid-media">
-          <img class="ab-pgrid-img-primary" src="{{ product.thumb }}" alt="{{ product.name }}" loading="lazy" />
-          {% if product.images[0] %}
-            <img class="ab-pgrid-img-hover" src="{{ product.images[0] }}" alt="{{ product.name }}" loading="lazy" />
-          {% endif %}
-          {% comment %} Wishlist & Compare action buttons — dispatch custom events caught by the storefront JS layer
-          <div class="ab-card-actions">
-            <button
-              class="ab-wishlist-btn"
-              type="button"
-              aria-label="Add to wishlist"
-              onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('toggle-wishlist',{bubbles:true,detail:{productId:'{{ product.id }}'}}));"
-            >
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
-            </button>
-            <button
-              class="ab-compare-btn"
-              type="button"
-              aria-label="Compare"
-              onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('toggle-compare',{bubbles:true,detail:{productId:'{{ product.id }}'}}));"
-            >
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 3 21 8 16 13"/><line x1="21" y1="8" x2="9" y2="8"/><polyline points="8 21 3 16 8 11"/><line x1="3" y1="16" x2="15" y2="16"/></svg>
-            </button>
-          </div>
-          {% endcomment %}
-          <button
-            class="ab-pgrid-add-btn"
-            type="button"
-            aria-label="Add to cart"
-            onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('quick-add',{bubbles:true,detail:{productId:'{{ product.id }}'}}));"
-          ></button>
-        </div>
-
-        <div class="ab-pgrid-info">
-          <p class="ab-pgrid-name">{{ product.name }}</p>
-
-          <div class="ab-pgrid-price-row">
-            {% if product.sale_price and product.sale_price < product.price %}
-              <span class="ab-price-old">{{ product.price }} {{ currency }}</span>
-              <span class="ab-pgrid-price ab-price-sale">{{ product.sale_price }} {{ currency }}</span>
-            {% else %}
-              <span class="ab-pgrid-price">{{ product.price }} {{ currency }}</span>
-            {% endif %}
-          </div>
-
-          <div class="ab-pgrid-swatches">
-            {% if color_variation and color_variation.props %}
-              {% for prop in color_variation.props limit: 6 %}
-                <span class="ab-pgrid-swatch" style="background: {{ prop.value }}" title="{{ prop.name }}"></span>
-              {% endfor %}
-            {% elsif image_variation and image_variation.props %}
-              {% for prop in image_variation.props limit: 6 %}
-                <span class="ab-pgrid-swatch ab-pgrid-swatch-image" title="{{ prop.name }}">
-                  <img src="{{ prop.value }}" alt="{{ prop.name }}" loading="lazy" />
-                </span>
-              {% endfor %}
-            {% endif %}
-
-            {% if swatch_total > 6 %}
-              <span class="ab-pgrid-swatch-more">+{{ swatch_total | minus: 6 }}</span>
-            {% endif %}
-          </div>
-        </div>
-      </a>
-    {% endfor %}
-  </div>
-</section>
+
+<section class="ab-pgrid">
+  <div class="ab-pgrid-wrap ab-pgrid-wrap--no-hero">
+    {% for product in products %}
+      {% assign color_variation = product.variations | where: "type", "color" | first %}
+      {% assign image_variation = product.variations | where: "type", "image" | first %}
+      {% assign swatch_total = 0 %}
+      {% if color_variation and color_variation.props %}
+        {% assign swatch_total = color_variation.props.size %}
+      {% elsif image_variation and image_variation.props %}
+        {% assign swatch_total = image_variation.props.size %}
+      {% endif %}
+
+      <a href="/products/{{ product.slug }}" class="ab-pgrid-card ab-reveal" style="animation-delay: {{ forloop.index | times: 0.04 }}s">
+        {% if product.sale_price and product.sale_price < product.price %}
+          {% assign discount = product.price | minus: product.sale_price | times: 100 | divided_by: product.price | floor %}
+          <span class="ab-pgrid-badge ab-sale-badge">{{ sale }} -{{ discount }}%</span>
+        {% endif %}
+
+        <div class="ab-pgrid-media">
+          <img class="ab-pgrid-img-primary" src="{{ product.thumb }}" alt="{{ product.name }}" loading="lazy" />
+          {% if product.images[0] %}
+            <img class="ab-pgrid-img-hover" src="{{ product.images[0] }}" alt="{{ product.name }}" loading="lazy" />
+          {% endif %}
+          {% comment %} Wishlist & Compare action buttons — dispatch custom events caught by the storefront JS layer
+          <div class="ab-card-actions">
+            <button
+              class="ab-wishlist-btn"
+              type="button"
+              aria-label="Add to wishlist"
+              onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('toggle-wishlist',{bubbles:true,detail:{productId:'{{ product.id }}'}}));"
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+            </button>
+            <button
+              class="ab-compare-btn"
+              type="button"
+              aria-label="Compare"
+              onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('toggle-compare',{bubbles:true,detail:{productId:'{{ product.id }}'}}));"
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 3 21 8 16 13"/><line x1="21" y1="8" x2="9" y2="8"/><polyline points="8 21 3 16 8 11"/><line x1="3" y1="16" x2="15" y2="16"/></svg>
+            </button>
+          </div>
+          {% endcomment %}
+          <button
+            class="ab-pgrid-add-btn"
+            type="button"
+            aria-label="Add to cart"
+            onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('quick-add',{bubbles:true,detail:{productId:'{{ product.id }}'}}));"
+          ></button>
+        </div>
+
+        <div class="ab-pgrid-info">
+          <p class="ab-pgrid-name">{{ product.name }}</p>
+
+          <div class="ab-pgrid-price-row">
+            {% if product.sale_price and product.sale_price < product.price %}
+              <span class="ab-price-old">{{ product.price }} {{ currency }}</span>
+              <span class="ab-pgrid-price ab-price-sale">{{ product.sale_price }} {{ currency }}</span>
+            {% else %}
+              <span class="ab-pgrid-price">{{ product.price }} {{ currency }}</span>
+            {% endif %}
+          </div>
+
+          <div class="ab-pgrid-swatches">
+            {% if color_variation and color_variation.props %}
+              {% for prop in color_variation.props limit: 6 %}
+                <span class="ab-pgrid-swatch" style="background: {{ prop.value }}" title="{{ prop.name }}"></span>
+              {% endfor %}
+            {% elsif image_variation and image_variation.props %}
+              {% for prop in image_variation.props limit: 6 %}
+                <span class="ab-pgrid-swatch ab-pgrid-swatch-image" title="{{ prop.name }}">
+                  <img src="{{ prop.value }}" alt="{{ prop.name }}" loading="lazy" />
+                </span>
+              {% endfor %}
+            {% endif %}
+
+            {% if swatch_total > 6 %}
+              <span class="ab-pgrid-swatch-more">+{{ swatch_total | minus: 6 }}</span>
+            {% endif %}
+          </div>
+        </div>
+      </a>
+    {% endfor %}
+  </div>
+</section>

package/dist/template/theme/sections/related-products.liquid

@@ -1,88 +1,88 @@
-<section class="ab-plist ab-plist--related">
-  <div class="ab-plist-header">
-    {% if section_title %}
-      <h2 class="ab-plist-title ab-reveal">{{ section_title }}</h2>
-    {% endif %}
-    <div class="ab-plist-arrows">
-      <button class="ab-plist-arrow ab-plist-prev" aria-label="Previous">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
-      </button>
-      <button class="ab-plist-arrow ab-plist-next" aria-label="Next">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 6 15 12 9 18"/></svg>
-      </button>
-    </div>
-  </div>
-
-  <div class="ab-plist-track">
-    {% for product in products %}
-      {% assign color_variation = product.variations | where: "type", "color" | first %}
-      {% assign image_variation = product.variations | where: "type", "image" | first %}
-
-      <a href="/products/{{ product.slug }}" class="ab-plist-card ab-reveal" style="animation-delay: {{ forloop.index | times: 0.04 }}s">
-        {% if product.sale_price and product.sale_price < product.price %}
-          {% assign discount = product.price | minus: product.sale_price | times: 100 | divided_by: product.price | floor %}
-          <span class="ab-plist-badge ab-sale-badge">{{ sale }} -{{ discount }}%</span>
-        {% endif %}
-
-        <div class="ab-plist-media">
-          <img class="ab-plist-img-primary" src="{{ product.thumb }}" alt="{{ product.name }}" loading="lazy" />
-          {% if product.images[0] %}
-            <img class="ab-plist-img-hover" src="{{ product.images[0] }}" alt="{{ product.name }}" loading="lazy" />
-          {% endif %}
-          {% comment %} Wishlist & Compare action buttons — dispatch custom events caught by the storefront JS layer
-          <div class="ab-card-actions">
-            <button
-              class="ab-wishlist-btn"
-              type="button"
-              aria-label="Add to wishlist"
-              onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('toggle-wishlist',{bubbles:true,detail:{productId:'{{ product.id }}'}}));"
-            >
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
-            </button>
-            <button
-              class="ab-compare-btn"
-              type="button"
-              aria-label="Compare"
-              onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('toggle-compare',{bubbles:true,detail:{productId:'{{ product.id }}'}}));"
-            >
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 3 21 8 16 13"/><line x1="21" y1="8" x2="9" y2="8"/><polyline points="8 21 3 16 8 11"/><line x1="3" y1="16" x2="15" y2="16"/></svg>
-            </button>
-          </div>
-          {% endcomment %}
-          <button
-            class="ab-plist-add-btn"
-            type="button"
-            aria-label="Add to cart"
-            onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('quick-add',{bubbles:true,detail:{productId:'{{ product.id }}'}}));"
-          ></button>
-        </div>
-
-        <div class="ab-plist-info">
-          <p class="ab-plist-name">{{ product.name }}</p>
-          <div class="ab-plist-price-row">
-            {% if product.sale_price and product.sale_price < product.price %}
-              <span class="ab-price-old">{{ product.price }} {{ currency }}</span>
-              <span class="ab-plist-price ab-price-sale">{{ product.sale_price }} {{ currency }}</span>
-            {% else %}
-              <span class="ab-plist-price">{{ product.price }} {{ currency }}</span>
-            {% endif %}
-          </div>
-
-          <div class="ab-plist-swatches">
-            {% if color_variation and color_variation.props %}
-              {% for prop in color_variation.props limit: 4 %}
-                <span class="ab-plist-swatch" style="background: {{ prop.value }}" title="{{ prop.name }}"></span>
-              {% endfor %}
-            {% elsif image_variation and image_variation.props %}
-              {% for prop in image_variation.props limit: 4 %}
-                <span class="ab-plist-swatch ab-plist-swatch-image" title="{{ prop.name }}">
-                  <img src="{{ prop.value }}" alt="{{ prop.name }}" loading="lazy" />
-                </span>
-              {% endfor %}
-            {% endif %}
-          </div>
-        </div>
-      </a>
-    {% endfor %}
-  </div>
-</section>
+<section class="ab-plist ab-plist--related">
+  <div class="ab-plist-header">
+    {% if section_title %}
+      <h2 class="ab-plist-title ab-reveal">{{ section_title }}</h2>
+    {% endif %}
+    <div class="ab-plist-arrows">
+      <button class="ab-plist-arrow ab-plist-prev" aria-label="Previous">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
+      </button>
+      <button class="ab-plist-arrow ab-plist-next" aria-label="Next">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 6 15 12 9 18"/></svg>
+      </button>
+    </div>
+  </div>
+
+  <div class="ab-plist-track">
+    {% for product in products %}
+      {% assign color_variation = product.variations | where: "type", "color" | first %}
+      {% assign image_variation = product.variations | where: "type", "image" | first %}
+
+      <a href="/products/{{ product.slug }}" class="ab-plist-card ab-reveal" style="animation-delay: {{ forloop.index | times: 0.04 }}s">
+        {% if product.sale_price and product.sale_price < product.price %}
+          {% assign discount = product.price | minus: product.sale_price | times: 100 | divided_by: product.price | floor %}
+          <span class="ab-plist-badge ab-sale-badge">{{ sale }} -{{ discount }}%</span>
+        {% endif %}
+
+        <div class="ab-plist-media">
+          <img class="ab-plist-img-primary" src="{{ product.thumb }}" alt="{{ product.name }}" loading="lazy" />
+          {% if product.images[0] %}
+            <img class="ab-plist-img-hover" src="{{ product.images[0] }}" alt="{{ product.name }}" loading="lazy" />
+          {% endif %}
+          {% comment %} Wishlist & Compare action buttons — dispatch custom events caught by the storefront JS layer
+          <div class="ab-card-actions">
+            <button
+              class="ab-wishlist-btn"
+              type="button"
+              aria-label="Add to wishlist"
+              onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('toggle-wishlist',{bubbles:true,detail:{productId:'{{ product.id }}'}}));"
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+            </button>
+            <button
+              class="ab-compare-btn"
+              type="button"
+              aria-label="Compare"
+              onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('toggle-compare',{bubbles:true,detail:{productId:'{{ product.id }}'}}));"
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 3 21 8 16 13"/><line x1="21" y1="8" x2="9" y2="8"/><polyline points="8 21 3 16 8 11"/><line x1="3" y1="16" x2="15" y2="16"/></svg>
+            </button>
+          </div>
+          {% endcomment %}
+          <button
+            class="ab-plist-add-btn"
+            type="button"
+            aria-label="Add to cart"
+            onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('quick-add',{bubbles:true,detail:{productId:'{{ product.id }}'}}));"
+          ></button>
+        </div>
+
+        <div class="ab-plist-info">
+          <p class="ab-plist-name">{{ product.name }}</p>
+          <div class="ab-plist-price-row">
+            {% if product.sale_price and product.sale_price < product.price %}
+              <span class="ab-price-old">{{ product.price }} {{ currency }}</span>
+              <span class="ab-plist-price ab-price-sale">{{ product.sale_price }} {{ currency }}</span>
+            {% else %}
+              <span class="ab-plist-price">{{ product.price }} {{ currency }}</span>
+            {% endif %}
+          </div>
+
+          <div class="ab-plist-swatches">
+            {% if color_variation and color_variation.props %}
+              {% for prop in color_variation.props limit: 4 %}
+                <span class="ab-plist-swatch" style="background: {{ prop.value }}" title="{{ prop.name }}"></span>
+              {% endfor %}
+            {% elsif image_variation and image_variation.props %}
+              {% for prop in image_variation.props limit: 4 %}
+                <span class="ab-plist-swatch ab-plist-swatch-image" title="{{ prop.name }}">
+                  <img src="{{ prop.value }}" alt="{{ prop.name }}" loading="lazy" />
+                </span>
+              {% endfor %}
+            {% endif %}
+          </div>
+        </div>
+      </a>
+    {% endfor %}
+  </div>
+</section>

package/dist/template/theme/sections/reviews.liquid

@@ -1,55 +1,55 @@
-<div class="ab-reviews">
-  <div class="ab-reviews-header">
-    <h2 class="ab-reviews-title">{{ t_users_reviews }}</h2>
-    <div class="ab-reviews-summary">
-      <div class="ab-reviews-avg-stars">
-        {% assign avg_full = average_rating | floor %}
-        {% assign avg_decimal = average_rating | minus: avg_full %}
-        {% assign avg_has_half = false %}
-        {% if avg_decimal >= 0.25 and avg_decimal < 0.75 %}
-          {% assign avg_has_half = true %}
-        {% elsif avg_decimal >= 0.75 %}
-          {% assign avg_full = avg_full | plus: 1 %}
-        {% endif %}
-        {% for i in (1..5) %}
-          {% if i <= avg_full %}
-            <span class="ab-pd-star ab-pd-star-filled"></span>
-          {% elsif avg_has_half and i == avg_full | plus: 1 %}
-            <span class="ab-pd-star ab-pd-star-half"></span>
-          {% else %}
-            <span class="ab-pd-star ab-pd-star-empty"></span>
-          {% endif %}
-        {% endfor %}
-      </div>
-      <span class="ab-reviews-count">{{ average_rating_display }} ({{ reviews_count }} {{ t_reviews }})</span>
-    </div>
-    <button class="ab-reviews-write-btn" type="button" onclick="this.dispatchEvent(new CustomEvent('review-open',{bubbles:true}))">{{ t_share_your_review }}</button>
-  </div>
-
-  <div class="ab-reviews-list">
-    {% for review in reviews %}
-    <div class="ab-review-card">
-      <div class="ab-review-stars">
-        {% for i in (1..5) %}
-          {% if i <= review.rating %}
-            <span class="ab-pd-star ab-pd-star-filled"></span>
-          {% else %}
-            <span class="ab-pd-star ab-pd-star-empty"></span>
-          {% endif %}
-        {% endfor %}
-      </div>
-      {% if review.user_name and review.user_name != "" %}
-        <h3 class="ab-review-author">{{ review.user_name }}</h3>
-      {% endif %}
-      <p class="ab-review-comment" data-review-comment>{{ review.comment }}</p>
-      {% if review.image and review.image != "" %}
-        <img src="{{ review.image }}" alt="{{ review.user_name }}" class="ab-review-image" loading="lazy" />
-      {% endif %}
-    </div>
-    {% endfor %}
-  </div>
-
-  {% if reviews.size == 0 %}
-    <p class="ab-reviews-empty">{{ t_no_reviews }}</p>
-  {% endif %}
-</div>
+<div class="ab-reviews">
+  <div class="ab-reviews-header">
+    <h2 class="ab-reviews-title">{{ t_users_reviews }}</h2>
+    <div class="ab-reviews-summary">
+      <div class="ab-reviews-avg-stars">
+        {% assign avg_full = average_rating | floor %}
+        {% assign avg_decimal = average_rating | minus: avg_full %}
+        {% assign avg_has_half = false %}
+        {% if avg_decimal >= 0.25 and avg_decimal < 0.75 %}
+          {% assign avg_has_half = true %}
+        {% elsif avg_decimal >= 0.75 %}
+          {% assign avg_full = avg_full | plus: 1 %}
+        {% endif %}
+        {% for i in (1..5) %}
+          {% if i <= avg_full %}
+            <span class="ab-pd-star ab-pd-star-filled"></span>
+          {% elsif avg_has_half and i == avg_full | plus: 1 %}
+            <span class="ab-pd-star ab-pd-star-half"></span>
+          {% else %}
+            <span class="ab-pd-star ab-pd-star-empty"></span>
+          {% endif %}
+        {% endfor %}
+      </div>
+      <span class="ab-reviews-count">{{ average_rating_display }} ({{ reviews_count }} {{ t_reviews }})</span>
+    </div>
+    <button class="ab-reviews-write-btn" type="button" onclick="this.dispatchEvent(new CustomEvent('review-open',{bubbles:true}))">{{ t_share_your_review }}</button>
+  </div>
+
+  <div class="ab-reviews-list">
+    {% for review in reviews %}
+    <div class="ab-review-card">
+      <div class="ab-review-stars">
+        {% for i in (1..5) %}
+          {% if i <= review.rating %}
+            <span class="ab-pd-star ab-pd-star-filled"></span>
+          {% else %}
+            <span class="ab-pd-star ab-pd-star-empty"></span>
+          {% endif %}
+        {% endfor %}
+      </div>
+      {% if review.user_name and review.user_name != "" %}
+        <h3 class="ab-review-author">{{ review.user_name }}</h3>
+      {% endif %}
+      <p class="ab-review-comment" data-review-comment>{{ review.comment }}</p>
+      {% if review.image and review.image != "" %}
+        <img src="{{ review.image }}" alt="{{ review.user_name }}" class="ab-review-image" loading="lazy" />
+      {% endif %}
+    </div>
+    {% endfor %}
+  </div>
+
+  {% if reviews.size == 0 %}
+    <p class="ab-reviews-empty">{{ t_no_reviews }}</p>
+  {% endif %}
+</div>