payloadcms · JessRynkar · Jun 16, 2026
diff --git a/packages/plugin-ecommerce/src/fields/pricesField.ts b/packages/plugin-ecommerce/src/fields/pricesField.ts
@@ -1,4 +1,4 @@
-import type { GroupField } from 'payload'
+import type { GroupField, RowField } from 'payload'
 
 import type { CurrenciesConfig } from '../types/index.js'
 
@@ -18,53 +18,53 @@ export const pricesField: (props: Props) => GroupField[] = ({
 }) => {
   const currencies = currenciesConfig.supportedCurrencies
 
-  const fields: GroupField[] = currencies.map((currency) => {
+  const rows: RowField[] = currencies.map((currency) => {
     const name = `priceIn${currency.code}`
 
     const path = conditionalPath ? `${conditionalPath}.${name}Enabled` : `${name}Enabled`
 
     return {
-      type: 'group',
-      admin: {
-        description: 'Prices for this product in different currencies.',
-      },
+      type: 'row',
       fields: [
         {
-          type: 'row',
-          fields: [
-            {
-              name: `${name}Enabled`,
-              type: 'checkbox',
-              admin: {
-                style: {
-                  alignSelf: 'baseline',
-                  flex: '0 0 auto',
-                },
-              },
-              label: ({ t }) =>
-                // @ts-expect-error - translations are not typed in plugins yet
-                t('plugin-ecommerce:enableCurrencyPrice', { currency: currency.code }),
+          name: `${name}Enabled`,
+          type: 'checkbox',
+          admin: {
+            style: {
+              alignSelf: 'baseline',
+              flex: '0 0 auto',
             },
-            amountField({
-              currenciesConfig,
-              currency,
-              overrides: {
-                name,
-                admin: {
-                  condition: (_, siblingData) => Boolean(siblingData?.[path]),
-                  description: ({ t }) =>
-                    // @ts-expect-error - translations are not typed in plugins yet
-                    t('plugin-ecommerce:productPriceDescription'),
-                },
-                // @ts-expect-error - translations are not typed in plugins yet
-                label: ({ t }) => t('plugin-ecommerce:priceIn', { currency: currency.code }),
-              },
-            }),
-          ],
+          },
+          label: ({ t }) =>
+            // @ts-expect-error - translations are not typed in plugins yet
+            t('plugin-ecommerce:enableCurrencyPrice', { currency: currency.code }),
         },
+        amountField({
+          currenciesConfig,
+          currency,
+          overrides: {
+            name,
+            admin: {
+              condition: (_, siblingData) => Boolean(siblingData?.[path]),
+              description: ({ t }) =>
+                // @ts-expect-error - translations are not typed in plugins yet
+                t('plugin-ecommerce:productPriceDescription'),
+            },
+            // @ts-expect-error - translations are not typed in plugins yet
+            label: ({ t }) => t('plugin-ecommerce:priceIn', { currency: currency.code }),
+          },
+        }),
       ],
     }
   })
 
-  return fields
+  return [
+    {
+      type: 'group',
+      admin: {
+        description: 'Prices for this product in different currencies.',
+      },
+      fields: rows,
+    },
+  ]
 }
diff --git a/packages/plugin-ecommerce/src/ui/PriceInput/FormattedInput.tsx b/packages/plugin-ecommerce/src/ui/PriceInput/FormattedInput.tsx
@@ -140,14 +140,14 @@ export const FormattedInput: React.FC<Props> = ({
     <div className={`field-type number ${baseClass}`}>
       {label && <FieldLabel as="label" htmlFor={id} label={label} required={required} />}
 
-      <div className={`${baseClass}Container`}>
+      <div className={`${baseClass}Container form-input-group`}>
         <div className={`${baseClass}CurrencySymbol`}>
           <span>{currency.symbol}</span>
         </div>
 
         {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
         <input
-          className={`${baseClass}Input`}
+          className={`${baseClass}Input form-input`}
           disabled={disabled || readOnly}
           id={id}
           onBlur={handleInputBlur}

diff --git a/packages/plugin-ecommerce/src/ui/PriceInput/index.css b/packages/plugin-ecommerce/src/ui/PriceInput/index.css
@@ -1,35 +1,23 @@
-.formattedPrice {
-  .formattedPriceLabel {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: #333;
-  }
-
-  .formattedPriceContainer {
-    display: flex;
-    position: relative;
-  }
+@layer payload-default {
+  .formattedPrice {
+    .formattedPriceCurrencySymbol {
+      position: absolute;
+      inset-inline-start: var(--field-padding-inline);
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--color-text-secondary);
+      user-select: none;
+      pointer-events: none;
+      z-index: 1;
+    }
 
-  .formattedPriceCurrencySymbol {
-    position: absolute;
-    left: 10px;
-    top: 50%;
-    transform: translateY(calc(-50%));
-    color: var(--theme-elevation-500);
-    user-select: none;
-    pointer-events: none;
-  }
-
-  .formattedPriceInput {
-    padding: 0.5rem 0.5rem 0.5rem 1.75rem;
-    min-width: 2rem;
-    width: fit-content;
-    max-width: 10rem;
-  }
+    .formattedPriceInput {
+      /* Reserve space for the absolutely-positioned currency symbol prefix */
+      padding-inline-start: var(--spacer-4);
+    }
 
-  .formattedPriceDescription {
-    max-width: 46rem;
+    .formattedPriceDescription {
+      max-width: 75ch;
+    }
   }
 }
diff --git a/packages/plugin-ecommerce/src/ui/PriceRowLabel/index.css b/packages/plugin-ecommerce/src/ui/PriceRowLabel/index.css
@@ -2,12 +2,12 @@
   .priceRowLabel {
     display: flex;
     align-items: center;
-    gap: calc(var(--base) * 1);
+    gap: var(--spacer-3);
   }
 
   .priceValue {
     display: flex;
     align-items: center;
-    gap: calc(var(--base) * 0.25);
+    gap: var(--spacer-1);
   }
 }
diff --git a/packages/plugin-ecommerce/src/ui/VariantOptionsSelector/index.css b/packages/plugin-ecommerce/src/ui/VariantOptionsSelector/index.css
@@ -1,26 +1,24 @@
 @layer payload-default {
   .variantOptionsSelector {
-    margin-top: calc(var(--spacing-field) * 2);
-    margin-bottom: calc(var(--spacing-field) * 2);
+    margin-block: var(--spacer-2);
   }
 
   .variantOptionsSelectorHeading {
-    font-size: calc(var(--base) * 1);
-    font-weight: 500;
+    font-size: var(--text-body-large-font-size);
     color: var(--color-text);
-    margin-bottom: calc(var(--base) * 0.5);
+    margin-block-end: var(--spacer-2);
   }
 
   .variantOptionsSelectorItem {
     display: flex;
     flex-direction: column;
-    gap: 0;
+    gap: var(--spacer-2);
   }
 
   .variantOptionsSelectorList {
     display: flex;
     flex-direction: column;
-    gap: calc(var(--base) * 0.75);
+    gap: var(--spacer-3);
   }
 
   .variantOptionsSelectorError {
@@ -29,9 +27,9 @@
 
   .variantOptionsSelectorErrorWrapper {
     &.showError {
-      border-radius: 2px;
-      outline: 1px solid var(--theme-error-400);
-      outline-offset: 2px;
+      border-radius: var(--radius-small);
+      outline: var(--stroke-width-small) solid var(--field-color-border-error);
+      outline-offset: var(--stroke-width-medium);
     }
   }
 }
@@ -239,6 +239,7 @@
     }
 
     .document-fields__sidebar {
+      padding-top: var(--gutter-h);
       padding-bottom: calc(var(--spacer-5) * 2);
       overflow: visible;
     }
@@ -254,4 +255,11 @@
   .drawer .document-fields__edit {
     padding: var(--gutter-h);
   }
+
+  /* In a drawer the main and sidebar fields stack without the page's vertical
+     divider, so add a top border to the sidebar fields to separate them from
+     the main fields above. */
+  .drawer .document-fields__sidebar-wrap {
+    border-top: var(--stroke-width-small) solid var(--color-border);
+  }
 }
@@ -7,11 +7,11 @@
     &::before {
       content: '';
       position: absolute;
-      top: calc(var(--spacer-5) / -2);
+      top: calc(var(--gutter-h) * -1);
       left: calc(var(--gutter-h) * -1);
       right: calc(var(--gutter-h) * -1);
       height: 0;
-      border-top: 1px solid var(--color-border);
+      border-top: var(--stroke-width-small) solid var(--color-border);
     }
 
     &:first-child {
@@ -33,7 +33,7 @@
       left: calc(var(--spacer-3) * -1);
       right: calc(var(--spacer-3) * -1);
       height: 0;
-      border-top: 1px solid var(--color-border);
+      border-top: var(--stroke-width-small) solid var(--color-border);
     }
 
     &:first-child {
@@ -79,7 +79,7 @@
   }
 
   .group-field--gutter {
-    border-left: 1px solid var(--color-border);
+    border-left: var(--stroke-width-small) solid var(--color-border);
     padding-left: var(--spacer-3);
   }
 
@@ -126,12 +126,6 @@
   @media (max-width: 768px) {
     .group-field--top-level {
       &::before {
-        content: '';
-        position: absolute;
-        top: calc(var(--spacer-5) / -2.5);
-        left: calc(var(--gutter-h) * -1);
-        right: calc(var(--gutter-h) * -1);
-        height: 0;
         border-top: var(--stroke-width-small) solid var(--color-border);
       }
     }

@@ -38,20 +38,20 @@
           margin-top: 0;
         }
 
-        &:last-child {
+        &:last-of-type {
           margin-bottom: 0;
         }
       }
 
       &.group-field {
-        margin-top: calc(var(--spacing-field) * 2);
-        margin-bottom: calc(var(--spacing-field) * 3);
+        margin-top: calc(var(--gutter-h) * 2);
+        margin-bottom: calc(var(--gutter-h) * 3);
 
         &:first-child {
           margin-top: 0;
         }
 
-        &:last-child {
+        &:last-of-type {
           margin-bottom: 0;
         }
       }

diff --git a/test/plugin-ecommerce/config.ts b/test/plugin-ecommerce/config.ts
@@ -88,6 +88,22 @@ export default buildConfigWithDefaults({
       },
       products: {
         variants: true,
+        productsCollectionOverride: ({ defaultCollection }) => ({
+          ...defaultCollection,
+          admin: {
+            ...defaultCollection.admin,
+            defaultColumns: ['name', ...(defaultCollection.admin?.defaultColumns ?? [])],
+            useAsTitle: 'name',
+          },
+          fields: [
+            {
+              name: 'name',
+              type: 'text',
+              required: true,
+            },
+            ...defaultCollection.fields,
+          ],
+        }),
       },
       payments: {
         paymentMethods: [