Shopify · kjellr · Dec 14, 2023 · Jul 18, 2023 · Jul 19, 2023 · Jul 18, 2023
diff --git a/assets/base.css b/assets/base.css
@@ -1585,6 +1585,7 @@ details[open] > .share-button__fallback {
   appearance: none;
   background-color: rgb(var(--color-background));
   color: rgb(var(--color-foreground));
+  font-family: var(--font-body-family);
   font-size: 1.6rem;
   width: 100%;
   box-sizing: border-box;
@@ -1925,6 +1926,7 @@ input[type='checkbox'] {
 
 .quantity__input {
   color: currentColor;
+  font-family: var(--font-body-family);
   font-size: 1.6rem;
   font-weight: 500;
   opacity: 0.85;

diff --git a/assets/component-list-social.css b/assets/component-list-social.css
@@ -11,19 +11,19 @@
 }
 
 .list-social__item .icon {
-  height: 1.8rem;
-  width: 1.8rem;
+  height: 2.2rem;
+  width: 2.2rem;
 }
 
 .list-social__link {
   align-items: center;
   display: flex;
-  padding: 1.3rem;
+  padding: 1.1rem;
   color: rgb(var(--color-foreground));
 }
 
 .utility-bar .list-social__link {
-  padding: 0 1.1rem;
+  padding: 0 0.8rem;
   height: 3.8rem;
 }
 

diff --git a/assets/component-menu-drawer.css b/assets/component-menu-drawer.css
@@ -261,5 +261,5 @@ details[open].menu-opening > .menu-drawer__submenu {
 }
 
 .menu-drawer .list-social__link {
-  padding: 1.3rem 1.3rem;
+  padding: 1.1rem 1.1rem;
 }
diff --git a/assets/component-price.css b/assets/component-price.css
@@ -64,10 +64,15 @@
 }
 
 .price--sold-out .price__badge-sold-out,
-.price--on-sale .price__badge-sale {
+.price--on-sale .price__badge-sale,
+.volume-pricing--sale-badge .price__badge-sale {
   display: inline-block;
 }
 
+.volume-pricing--sale-badge .price__badge-sale {
+  margin-left: 0.5rem;
+}
+
 .price--on-sale .price__sale {
   display: initial;
   flex-direction: row;

diff --git a/assets/component-volume-pricing.css b/assets/component-volume-pricing.css
@@ -49,6 +49,22 @@ volume-pricing show-more-button {
 }
 
 .product-form__input .price-per-item {
+  color: rgba(var(--color-foreground));
   font-size: 1.4rem;
   letter-spacing: 0.06rem;
 }
+
+.price-per-item dl {
+  margin: 0;
+}
+
+.price-per-item dd {
+  margin-left: 0;
+}
+
+.price-per-item__container .variant-item__old-price,
+.price__regular .variant-item__old-price {
+  color: rgba(var(--color-foreground), 0.75);
+  font-size: 1.2rem;
+  letter-spacing: 0.07rem;
+}
diff --git a/assets/global.js b/assets/global.js
@@ -1124,6 +1124,7 @@ class VariantSelects extends HTMLElement {
 
         if (pricePerItemSource && pricePerItemDestination) {
           pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML;
+          pricePerItemDestination.classList.toggle('visibility-hidden', pricePerItemSource.classList.contains('visibility-hidden'));
         }
 
         const price = document.getElementById(`price-${this.dataset.section}`);
@@ -1174,12 +1175,14 @@ class VariantSelects extends HTMLElement {
     const price = document.getElementById(`price-${this.dataset.section}`);
     const inventory = document.getElementById(`Inventory-${this.dataset.section}`);
     const sku = document.getElementById(`Sku-${this.dataset.section}`);
+    const pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`);
 
     if (!addButton) return;
     addButtonText.textContent = window.variantStrings.unavailable;
     if (price) price.classList.add('visibility-hidden');
     if (inventory) inventory.classList.add('visibility-hidden');
     if (sku) sku.classList.add('visibility-hidden');
+    if (pricePerItem) pricePerItem.classList.add('visibility-hidden');
   }
 
   getVariantData() {

diff --git a/assets/price-per-item.js b/assets/price-per-item.js
@@ -72,7 +72,6 @@ if (!customElements.get('price-per-item')) {
         if (this.classList.contains('variant-item__price-per-item')) {
           this.currentQtyForVolumePricing = this.getCartQuantity(updatedCartQuantity);
         }
-
         for (let pair of this.qtyPricePairs) {
           if (this.currentQtyForVolumePricing >= pair[0]) {
             const pricePerItemCurrent = document.querySelector(`price-per-item[id^="Price-Per-Item-${this.dataset.sectionId || this.dataset.variantId}"] .price-per-item span`);
@@ -97,7 +96,6 @@ if (!customElements.get('price-per-item')) {
             this.qtyPricePairs.push([qty, price]);
           });
         }
-
         this.qtyPricePairs.reverse();
       }
     }

diff --git a/assets/quantity-popover.css b/assets/quantity-popover.css
@@ -1,5 +1,6 @@
 quantity-popover {
   position: relative;
+  display: block;
 }
 
 quantity-popover volume-pricing li:nth-child(odd) {
@@ -22,12 +23,22 @@ quantity-popover volume-pricing li {
   max-width: 36rem;
 }
 
+.quantity-popover__info .button-close,
+.variant-remove-total quick-order-list-remove-all-button .button,
+.quick-order-list-total__confirmation quick-order-list-remove-all-button .button,
+quantity-popover quick-order-list-remove-button .button {
+  --shadow-opacity: 0;
+  --border-opacity: 0;
+}
+
 .quantity-popover__info-button {
   display: flex;
   align-items: center;
   margin: 0 0.4rem 0 0;
   min-width: 1.5rem;
   min-height: 1.5rem;
+  --shadow-opacity: 0;
+  --border-opacity: 0;
 }
 
 .quantity-popover__info-button--icon-with-label {
@@ -79,6 +90,10 @@ quantity-popover volume-pricing li {
   justify-content: flex-end;
 }
 
+.quantity-popover__info .volume-pricing-label~.button {
+  top: -0.2rem;
+}
+
 .quantity-popover__info .button .icon {
   width: 1.5rem;
   height: 1.5rem;
@@ -145,4 +160,4 @@ quantity-popover .quantity__rules .divider:nth-child(2)::before {
 quantity-popover .quantity__button:not(:focus-visible):not(.focused),
 quantity-popover .quantity__input:not(:focus-visible):not(.focused) {
   background-color: initial;
-}
+}
diff --git a/assets/quick-order-list.js b/assets/quick-order-list.js
@@ -68,6 +68,10 @@ class QuickOrderList extends HTMLElement {
     }
     this.quickOrderListId = 'quick-order-list'
     this.variantItemStatusElement = document.getElementById('shopping-cart-variant-item-status');
+    const form = this.querySelector('form');
+
+    form.addEventListener('submit', this.onSubmit.bind(this));
+
     const debouncedOnChange = debounce((event) => {
       this.onChange(event);
     }, ON_CHANGE_DEBOUNCE_TIMER);
@@ -76,6 +80,10 @@ class QuickOrderList extends HTMLElement {
 
   cartUpdateUnsubscriber = undefined;
 
+  onSubmit(event) {
+    event.preventDefault();
+  }
+
   connectedCallback() {
     this.cartUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.cartUpdate, (event) => {
       if (event.source === this.quickOrderListId) {

diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
@@ -282,35 +282,84 @@
                         assign current_qty_for_volume_pricing = cart_qty | plus: product.selected_or_first_available_variant.quantity_rule.increment
                       endif
                     -%}
-                    <price-per-item
-                      class="no-js-hidden"
-                      id="Price-Per-Item-{{ section.id }}"
-                      data-section-id="{{ section.id }}"
-                      data-variant-id="{{ product.selected_or_first_available_variant.id }}"
-                    >
-                      {%- if product.quantity_price_breaks_configured? -%}
-                        <div class="price-per-item">
-                          {%- if current_qty_for_volume_pricing < volume_pricing_array.last.minimum_quantity -%}
-                            {%- assign variant_price = product.selected_or_first_available_variant.price
-                              | money_with_currency
-                            -%}
-                            <span class="price-per-item--current">
-                              {{- 'products.product.volume_pricing.price_at_each' | t: price: variant_price -}}
-                            </span>
-                          {%- else -%}
-                            {%- for price_break in volume_pricing_array -%}
-                              {%- if current_qty_for_volume_pricing >= price_break.minimum_quantity -%}
-                                {%- assign price_break_price = price_break.price | money_with_currency -%}
-                                <span class="price-per-item--current">
-                                  {{- 'products.product.volume_pricing.price_at_each' | t: price: price_break_price -}}
-                                </span>
-                                {%- break -%}
-                              {%- endif -%}
-                            {%- endfor -%}
-                          {%- endif -%}
-                        </div>
-                      {%- endif -%}
-                    </price-per-item>
+                    {%- if product.quantity_price_breaks_configured? -%}
+                      <price-per-item
+                        class="no-js-hidden"
+                        id="Price-Per-Item-{{ section.id }}"
+                        data-section-id="{{ section.id }}"
+                        data-variant-id="{{ product.selected_or_first_available_variant.id }}"
+                      >
+                        {%- if product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}
+                          {%- assign variant_price_compare = product.selected_or_first_available_variant.compare_at_price -%}
+                          <div class="price-per-item">
+                            {%- if variant_price_compare -%}
+                              <dl class="price-per-item--current">
+                                <dt class="visually-hidden">
+                                  {{ 'products.product.price.regular_price' | t }}
+                                </dt>
+                                <dd>
+                                  <s class="variant-item__old-price">
+                                    {{ variant_price_compare | money_with_currency }}
+                                  </s>
+                                </dd>
+                              </dl>
+                            {%- endif -%}
+                            {%- if current_qty_for_volume_pricing < volume_pricing_array.last.minimum_quantity -%}
+                              {%- assign variant_price = product.selected_or_first_available_variant.price
+                                | money_with_currency
+                              -%}
+                              <span class="price-per-item--current">
+                                {{- 'products.product.volume_pricing.price_at_each' | t: price: variant_price -}}
+                              </span>
+                            {%- else -%}
+                              {%- for price_break in volume_pricing_array -%}
+                                {%- if current_qty_for_volume_pricing >= price_break.minimum_quantity -%}
+                                  {%- assign price_break_price = price_break.price | money_with_currency -%}
+                                  <span class="price-per-item--current">
+                                    {{-
+                                      'products.product.volume_pricing.price_at_each'
+                                      | t: price: price_break_price
+                                    -}}
+                                  </span>
+                                  {%- break -%}
+                                {%- endif -%}
+                              {%- endfor -%}
+                            {%- endif -%}
+                          </div>
+                        {%- else -%}
+                          {%- assign variant_price = product.selected_or_first_available_variant.price
+                            | money_with_currency
+                          -%}
+                          {%- assign variant_price_compare = product.selected_or_first_available_variant.compare_at_price -%}
+                          <div class="price-per-item">
+                            {%- if variant_price_compare -%}
+                              <dl class="price-per-item--current">
+                                <dt class="visually-hidden">
+                                  {{ 'products.product.price.regular_price' | t }}
+                                </dt>
+                                <dd>
+                                  <s class="variant-item__old-price">
+                                    {{ variant_price_compare | money_with_currency }}
+                                  </s>
+                                </dd>
+                                <dt class="visually-hidden">
+                                  {{ 'products.product.price.sale_price' | t }}
+                                </dt>
+                                <dd>
+                                  <span class="price-per-item--current">
+                                    {{- 'products.product.volume_pricing.price_at_each' | t: price: variant_price -}}
+                                  </span>
+                                </dd>
+                              </dl>
+                            {%- else -%}
+                              <span class="price-per-item--current">
+                                {{- 'products.product.volume_pricing.price_at_each' | t: price: variant_price -}}
+                              </span>
+                            {%- endif -%}
+                          </div>
+                        {%- endif -%}
+                      </price-per-item>
+                    {%- endif -%}
                   </div>
                   <div class="quantity__rules caption no-js-hidden">
                     {%- if product.selected_or_first_available_variant.quantity_rule.increment > 1 -%}

diff --git a/sections/main-cart-items.liquid b/sections/main-cart-items.liquid
@@ -319,7 +319,9 @@
                           hidden
                         >
                           {%- if has_qty_rules == false -%}
-                            <span class="volume-pricing-label caption">Volume pricing</span>
+                            <span class="volume-pricing-label caption">
+                              {{- 'products.product.volume_pricing.title' | t -}}
+                            </span>
                           {%- endif -%}
                           <div class="quantity__rules caption no-js-hidden">
                             {%- if item.variant.quantity_rule.increment > 1 -%}