easyorders 0.1.15 → 0.1.16

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

@@ -10,54 +10,39 @@
     {% endif %}
   </div>
 
+  <div class="ab-pd-divider"></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 %}
 
+      {% assign half_star_index = full_stars | plus: 1 %}
+
       {% 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 %}
+        {% elsif has_half and i == half_star_index %}
           <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 %}
+{% 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>

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

@@ -1,5 +1,12 @@
 
-<section class="ab-pgrid">
+<section
+  class="ab-pgrid"
+  style="
+    --ab-sale-badge-bg: {{ theme_data.sale_badge_bg_color | default: '#c94a4a' }};
+    --ab-sale-badge-text: {{ theme_data.sale_badge_text_color | default: '#ffffff' }};
+    --ab-product-card-bg: {% if theme_data.card_background_product == 'transparent' %}transparent{% else %}{{ theme_data.card_background_product_color | default: '#f5f4f2' }}{% endif %};
+  "
+>
   <div class="ab-pgrid-wrap ab-pgrid-wrap--no-hero">
     {% for product in products %}
       {% assign color_variation = product.variations | where: "type", "color" | first %}
@@ -11,10 +18,52 @@
         {% assign swatch_total = image_variation.props.size %}
       {% endif %}
 
+      {% assign pgrid_custom_badge = '' %}
+      {% if product.product_theme_data %}
+        {% assign pgrid_custom_badge = product.product_theme_data.custom_badge_title | strip %}
+      {% endif %}
+      {% assign pgrid_has_sale = false %}
+      {% if product.sale_price and product.sale_price < product.price and theme_data.show_sale_badge != false %}
+        {% assign pgrid_has_sale = true %}
+      {% endif %}
+      {% assign pgrid_has_variants = false %}
+      {% if product.variations and product.variations.size > 0 %}
+        {% assign pgrid_has_variants = true %}
+      {% endif %}
+      {% assign pgrid_disable_no_stock_str = product.disable_orders_for_no_stock | append: '' | downcase | strip %}
+      {% assign pgrid_disable_no_stock = false %}
+      {% if pgrid_disable_no_stock_str == 'true' or pgrid_disable_no_stock_str == '1' %}
+        {% assign pgrid_disable_no_stock = true %}
+      {% endif %}
+      {% assign pgrid_stock_flag_raw = product.in_stock | default: product.available %}
+      {% assign pgrid_stock_flag_str = pgrid_stock_flag_raw | append: '' | downcase | strip %}
+      {% assign pgrid_is_out_of_stock = false %}
+      {% if pgrid_stock_flag_str == 'false' or pgrid_stock_flag_str == '0' %}
+        {% assign pgrid_is_out_of_stock = true %}
+      {% elsif pgrid_stock_flag_str == 'true' or pgrid_stock_flag_str == '1' %}
+        {% assign pgrid_is_out_of_stock = false %}
+      {% else %}
+        {% assign pgrid_stock_qty = product.quantity | default: product.stock | default: product.total_quantity | default: 0 | plus: 0 %}
+        {% if pgrid_stock_qty <= 0 %}
+          {% assign pgrid_is_out_of_stock = true %}
+        {% endif %}
+      {% endif %}
+      {% assign pgrid_hide_add_btn = false %}
+      {% if pgrid_disable_no_stock and pgrid_has_variants == false and pgrid_is_out_of_stock %}
+        {% assign pgrid_hide_add_btn = true %}
+      {% 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>
+        {% if pgrid_has_sale or pgrid_custom_badge != '' %}
+          <div class="ab-pgrid-badge-stack">
+            {% if pgrid_has_sale %}
+              {% assign discount = product.price | minus: product.sale_price | times: 100 | divided_by: product.price | floor %}
+              <span class="ab-pgrid-badge ab-sale-badge">-{{ discount }}%</span>
+            {% endif %}
+            {% if pgrid_custom_badge != '' %}
+              <span class="ab-pgrid-badge ab-product-custom-badge">{{ pgrid_custom_badge }}</span>
+            {% endif %}
+          </div>
         {% endif %}
 
         <div class="ab-pgrid-media">
@@ -22,65 +71,64 @@
           {% 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>
+          {% unless pgrid_hide_add_btn %}
             <button
-              class="ab-compare-btn"
+              class="ab-pgrid-add-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>
+              aria-label="Add to cart"
+              onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('quick-add',{bubbles:true,detail:{productId:'{{ product.id }}'}}));"
+            ></button>
+          {% endunless %}
         </div>
 
-        <div class="ab-pgrid-info">
-          <p class="ab-pgrid-name">{{ product.name }}</p>
+          <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>
+            {% if color_variation and color_variation.props and color_variation.props.size > 0 %}
+              {% assign _sw0 = color_variation.props | first %}
+              <p class="ab-pgrid-color">{{ _sw0.name }}</p>
+            {% elsif image_variation and image_variation.props and image_variation.props.size > 0 %}
+              {% assign _sw0 = image_variation.props | first %}
+              <p class="ab-pgrid-color">{{ _sw0.name }}</p>
             {% 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 %}
+            <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>
 
-            {% if swatch_total > 6 %}
-              <span class="ab-pgrid-swatch-more">+{{ swatch_total | minus: 6 }}</span>
-            {% endif %}
+            <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{% if forloop.first %} ab-pgrid-swatch--active{% endif %}"
+                    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{% if forloop.first %} ab-pgrid-swatch--active{% endif %}"
+                    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>
-        </div>
-      </a>
+        </a>
     {% endfor %}
   </div>
+
+  
 </section>

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

@@ -1,4 +1,11 @@
-<section class="ab-plist ab-plist--related">
+<section
+  class="ab-plist ab-plist--related"
+  style="
+    --ab-sale-badge-bg: {{ theme_data.sale_badge_bg_color | default: '#c94a4a' }};
+    --ab-sale-badge-text: {{ theme_data.sale_badge_text_color | default: '#ffffff' }};
+    --ab-product-card-bg: {% if theme_data.card_background_product == 'transparent' %}transparent{% else %}{{ theme_data.card_background_product_color | default: '#f5f4f2' }}{% endif %};
+  "
+>
   <div class="ab-plist-header">
     {% if section_title %}
       <h2 class="ab-plist-title ab-reveal">{{ section_title }}</h2>
@@ -14,75 +21,132 @@
   </div>
 
   <div class="ab-plist-track">
-    {% for product in products %}
+    {% for product in products limit: 4 %}
       {% 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>
+      {% assign swatch_total = 0 %}
+      {% assign pgrid_custom_badge = '' %}
+      {% if product.product_theme_data %}
+        {% assign pgrid_custom_badge = product.product_theme_data.custom_badge_title | strip %}
+      {% endif %}
+      {% assign pgrid_has_sale = false %}
+      {% if product.sale_price and product.sale_price < product.price and theme_data.show_sale_badge != false %}
+        {% assign pgrid_has_sale = true %}
+      {% endif %}
+      {% 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 %}
+      {% assign pgrid_has_variants = false %}
+      {% if product.variations and product.variations.size > 0 %}
+        {% assign pgrid_has_variants = true %}
+      {% endif %}
+      {% assign pgrid_disable_no_stock_str = product.disable_orders_for_no_stock | append: '' | downcase | strip %}
+      {% assign pgrid_disable_no_stock = false %}
+      {% if pgrid_disable_no_stock_str == 'true' or pgrid_disable_no_stock_str == '1' %}
+        {% assign pgrid_disable_no_stock = true %}
+      {% endif %}
+      {% assign pgrid_stock_flag_raw = product.in_stock | default: product.available %}
+      {% assign pgrid_stock_flag_str = pgrid_stock_flag_raw | append: '' | downcase | strip %}
+      {% assign pgrid_is_out_of_stock = false %}
+      {% if pgrid_stock_flag_str == 'false' or pgrid_stock_flag_str == '0' %}
+        {% assign pgrid_is_out_of_stock = true %}
+      {% elsif pgrid_stock_flag_str == 'true' or pgrid_stock_flag_str == '1' %}
+        {% assign pgrid_is_out_of_stock = false %}
+      {% else %}
+        {% assign pgrid_stock_qty = product.quantity | default: product.stock | default: product.total_quantity | default: 0 | plus: 0 %}
+        {% if pgrid_stock_qty <= 0 %}
+          {% assign pgrid_is_out_of_stock = true %}
         {% endif %}
+      {% endif %}
+      {% assign pgrid_hide_add_btn = false %}
+      {% if pgrid_disable_no_stock and pgrid_has_variants == false and pgrid_is_out_of_stock %}
+        {% assign pgrid_hide_add_btn = true %}
+      {% 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-pgrid-card ab-reveal" style="animation-delay: {{ forloop.index | times: 0.04 }}s">
+        <a href="/products/{{ product.slug }}" class="ab-pgrid-card-link">
+          <div class="ab-pgrid-media">
+            {% if pgrid_has_sale or pgrid_custom_badge != '' %}
+              <div class="ab-pgrid-badge-stack">
+                {% if pgrid_has_sale %}
+                  {% assign discount = product.price | minus: product.sale_price | times: 100 | divided_by: product.price | floor %}
+                  <span class="ab-pgrid-badge ab-sale-badge">-{{ discount }}%</span>
+                {% endif %}
+                {% if pgrid_custom_badge != '' %}
+                  <span class="ab-pgrid-badge ab-product-custom-badge">{{ pgrid_custom_badge }}</span>
+                {% endif %}
+              </div>
+            {% endif %}
 
-        <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>
+            <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 %}
           </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 %}
+          <div class="ab-pgrid-info">
+            <p class="ab-pgrid-name">{{ product.name }}</p>
+
+            {% if color_variation and color_variation.props and color_variation.props.size > 0 %}
+              {% assign _sw0 = color_variation.props | first %}
+              <p class="ab-pgrid-color">{{ _sw0.name }}</p>
+            {% elsif image_variation and image_variation.props and image_variation.props.size > 0 %}
+              {% assign _sw0 = image_variation.props | first %}
+              <p class="ab-pgrid-color">{{ _sw0.name }}</p>
             {% endif %}
+
+            <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{% if forloop.first %} ab-pgrid-swatch--active{% endif %}"
+                    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{% if forloop.first %} ab-pgrid-swatch--active{% endif %}"
+                    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>
+
+        {% unless pgrid_hide_add_btn %}
+          <div class="ab-pgrid-card-footer">
+            <button
+              class="ab-pgrid-cta"
+              type="button"
+              aria-label="Add to cart"
+              onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('quick-add',{bubbles:true,detail:{productId:'{{ product.id }}'}}));"
+            >
+              <svg class="size-5" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.8999 7.5C8.8999 6.28498 9.88488 5.3 11.0999 5.3H12.8999C14.1149 5.3 15.0999 6.28498 15.0999 7.5C15.0999 7.77615 15.3238 8 15.5999 8C15.876 8 16.0999 7.77615 16.0999 7.5C16.0999 5.73269 14.6672 4.3 12.8999 4.3H11.0999C9.33259 4.3 7.8999 5.73269 7.8999 7.5C7.8999 7.77615 8.12376 8 8.3999 8C8.67604 8 8.8999 7.77615 8.8999 7.5ZM5.7998 15.6V9.39999H18.1998V15.6C18.1998 17.0359 17.0357 18.2 15.5998 18.2H8.39981C6.96387 18.2 5.7998 17.0359 5.7998 15.6ZM4.7998 9.29999C4.7998 8.80294 5.20275 8.39999 5.6998 8.39999H18.2998C18.7969 8.39999 19.1998 8.80294 19.1998 9.29999V15.6C19.1998 17.5882 17.588 19.2 15.5998 19.2H8.39981C6.41158 19.2 4.7998 17.5882 4.7998 15.6V9.29999Z" fill="currentColor"></path></svg>
+              <span class="ab-pgrid-cta-label">ADD TO CART</span>
+            </button>
           </div>
-        </div>
-      </a>
+        {% endunless %}
+      </div>
     {% endfor %}
   </div>
 </section>

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

@@ -1,27 +1,38 @@
 <div class="ab-reviews">
   <div class="ab-reviews-header">
-    <h2 class="ab-reviews-title">{{ t_users_reviews }}</h2>
+    <h2 class="ab-reviews-title">Real customer reviews</h2>
     <div class="ab-reviews-summary">
+     <span class="ab-reviews-count">{{ average_rating_display }} </span>
       <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>
+  {% if reviews_count > 0 %}
+    {% 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 %}
+
+    {% assign half_star_index = avg_full | plus: 1 %}
+
+    {% 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 == half_star_index %}
+        <span class="ab-pd-star ab-pd-star-half"></span>
+      {% else %}
+        <span class="ab-pd-star ab-pd-star-empty"></span>
+      {% endif %}
+    {% endfor %}
+  {% else %}
+    {% for i in (1..5) %}
+      <span class="ab-pd-star ab-pd-star-empty"></span>
+    {% endfor %}
+  {% endif %}
+</div>
+      <span class="ab-reviews-count"> ({{ 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>
@@ -30,14 +41,18 @@
     {% 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>
+  <div class="stars-wrapper">
+    {% 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>
+  
+  <span class="verified-badge">Verified Buyer</span>
+</div>
       {% if review.user_name and review.user_name != "" %}
         <h3 class="ab-review-author">{{ review.user_name }}</h3>
       {% endif %}