diff --git a/src/app/core/services/catalog/catalog.interface.ts b/src/app/core/services/catalog/catalog.interface.ts
index 637a779..cb297c0 100644
--- a/src/app/core/services/catalog/catalog.interface.ts
+++ b/src/app/core/services/catalog/catalog.interface.ts
@@ -117,6 +117,14 @@ export interface CatalogFeaturedItemVariant {
   values: Record<string, CatalogVariantValue>;
 }
 
+export interface CatalogVariantOptionsResponse {
+  variants: CatalogFeaturedItemVariant[];
+  options: Record<string, CatalogVariantValue[]>;
+  selected_values: Record<string, string | string[]>;
+  resolved_variant_id: number | null;
+  valid: boolean;
+}
+
 export interface CatalogFeaturedItem {
   id: number;
   type: CatalogItemType;
diff --git a/src/app/core/services/catalog/catalog.service.ts b/src/app/core/services/catalog/catalog.service.ts
index 7ab4b00..13f3037 100644
--- a/src/app/core/services/catalog/catalog.service.ts
+++ b/src/app/core/services/catalog/catalog.service.ts
@@ -12,6 +12,7 @@ import {
   CatalogFeaturedItem,
   CatalogFeaturedItems,
   CatalogItemDetail,
+  CatalogVariantOptionsResponse,
   CategoryItemsResponse,
   Product,
 } from './catalog.interface';
@@ -74,10 +75,7 @@ export class CatalogService extends BaseApiService {
     );
   }
 
-  getCatalogItem(
-    id: number,
-    variantId?: number,
-  ): Observable<CatalogItemDetail> {
+  getCatalogItem(id: number, variantId?: number): Observable<CatalogItemDetail> {
     let params = new HttpParams();
     if (variantId) {
       params = params.set('variant_id', variantId);
@@ -90,6 +88,21 @@ export class CatalogService extends BaseApiService {
       .pipe(map((response) => response.data));
   }
 
+  getVariantOptions(
+    catalogItemId: number,
+    payload: {
+      selected_values: Record<string, string | string[]>;
+      excluded_variant_ids?: number[];
+      cart_item_id?: number | null;
+    },
+  ): Observable<CatalogVariantOptionsResponse> {
+    return this.http
+      .post<
+        ApiResponse<CatalogVariantOptionsResponse>
+      >(`${this.tenantApiUrl}/catalog-items/${catalogItemId}/variant-options`, payload, { withCredentials: true })
+      .pipe(map((response) => response.data));
+  }
+
   private buildHttpParams(params?: ApiPaginationQueryParams): HttpParams {
     if (!params) {
       return new HttpParams();
diff --git a/src/app/shared/components/variant-selector/variant-selector.component.ts b/src/app/shared/components/variant-selector/variant-selector.component.ts
index 5be45a5..fac5801 100644
--- a/src/app/shared/components/variant-selector/variant-selector.component.ts
+++ b/src/app/shared/components/variant-selector/variant-selector.component.ts
@@ -5,6 +5,7 @@ import {
   effect,
   input,
   model,
+  output,
   signal,
   untracked,
 } from '@angular/core';
@@ -23,6 +24,11 @@ export interface VariantSelectorVariant {
   values: Record<string, VariantAttributeValue>;
 }
 
+export interface VariantSelectorSelectionChange {
+  values: Record<string, VariantAttributeValue>;
+  selectedVariant: unknown;
+}
+
 interface VariantSelectorOption {
   key: string;
   label: string;
@@ -49,6 +55,7 @@ export class VariantSelectorComponent {
   readonly disabled = input(false);
   readonly compact = input(false);
   readonly autoSelectFirst = input(true);
+  readonly selectionValuesChange = output<VariantSelectorSelectionChange>();
 
   protected readonly selectedValues = signal<Record<string, VariantAttributeValue>>({});
   protected readonly compareValues = (
@@ -143,6 +150,10 @@ export class VariantSelectorComponent {
 
     this.selectedValues.set(values);
     this.selectedVariant.set(matchingVariant?.id ?? null);
+    this.selectionValuesChange.emit({
+      values: { ...values },
+      selectedVariant: matchingVariant?.id ?? null,
+    });
   }
 
   private optionsFor(variants: VariantSelectorVariant[], key: string): VariantSelectorOption[] {