diff --git a/src/app/shared/components/product-row-card/product-row-card.component.html b/src/app/shared/components/product-row-card/product-row-card.component.html
index b1672c4..4604ae6 100644
--- a/src/app/shared/components/product-row-card/product-row-card.component.html
+++ b/src/app/shared/components/product-row-card/product-row-card.component.html
@@ -30,7 +30,7 @@
@if (variants().length > 0) {
}
diff --git a/src/app/shared/components/product-row-card/product-row-card.component.ts b/src/app/shared/components/product-row-card/product-row-card.component.ts
index 5a8448d..b3a6114 100644
--- a/src/app/shared/components/product-row-card/product-row-card.component.ts
+++ b/src/app/shared/components/product-row-card/product-row-card.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, input, output, model } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, input, output, model } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ButtonComponent } from '../button/button.component';
import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';
@@ -27,6 +27,18 @@ export class ProductRowCardComponent {
readonly quantity = model(1);
readonly selectedVariant = model(null);
+ private readonly selectFirstVariant = effect(() => {
+ const variants = this.variants();
+ const selectedVariant = this.selectedVariant();
+
+ if (
+ variants.length > 0 &&
+ !variants.some((variant) => Object.is(variant.value, selectedVariant))
+ ) {
+ this.selectedVariant.set(variants[0].value);
+ }
+ });
+
// Interactive events
readonly buy = output();
readonly addToCart = output<{ quantity: number; variant: any }>();