diff --git a/examples/commerce-essentials/e2e/models/d2c-product-detail-page.ts b/examples/commerce-essentials/e2e/models/d2c-product-detail-page.ts
index 618c2ade..cb3bee22 100644
--- a/examples/commerce-essentials/e2e/models/d2c-product-detail-page.ts
+++ b/examples/commerce-essentials/e2e/models/d2c-product-detail-page.ts
@@ -1,13 +1,13 @@
+import type { ElasticPath, ProductResponse } from "@elasticpath/js-sdk";
 import type { Page } from "@playwright/test";
 import { expect, test } from "@playwright/test";
+import { getSkuIdFromOptions } from "../../src/lib/product-helper";
+import { getCartId } from "../util/get-cart-id";
 import {
   getProductById,
   getSimpleProduct,
   getVariationsProduct,
 } from "../util/resolver-product-from-store";
-import type {ElasticPath, ProductResponse } from "@elasticpath/js-sdk";
-import { getCartId } from "../util/get-cart-id";
-import { getSkuIdFromOptions } from "../../src/lib/product-helper";
 
 const host = process.env.NEXT_PUBLIC_EPCC_ENDPOINT_URL;
 
@@ -110,16 +110,21 @@ async function selectOptions(
 ): Promise<string> {
   /* select one of each variation option */
   const options = baseProduct.meta.variations?.reduce((acc, variation) => {
-    return [...acc, ...([variation.options?.[0]] ?? [])];
+    const value = variation.options?.[0];
+    return [...acc, { ...variation, value }];
   }, []);
 
   if (options && baseProduct.meta.variation_matrix) {
     for (const option of options) {
-      await page.click(`text=${option.name}`);
+      if (option.name.toLowerCase() === "color") {
+        await page.getByTitle(option.value.name).click();
+      } else {
+        await page.click(`text=${option.value.name}`);
+      }
     }
 
     const variationId = getSkuIdFromOptions(
-      options.map((x) => x.id),
+      options.map((x) => x.value.id),
       baseProduct.meta.variation_matrix,
     );
 
diff --git a/examples/commerce-essentials/src/components/product/variations/ProductVariationColor.tsx b/examples/commerce-essentials/src/components/product/variations/ProductVariationColor.tsx
index d60cbd37..bbbd6085 100644
--- a/examples/commerce-essentials/src/components/product/variations/ProductVariationColor.tsx
+++ b/examples/commerce-essentials/src/components/product/variations/ProductVariationColor.tsx
@@ -39,8 +39,9 @@ const ProductVariationColor = ({
           >
             <button
               type="button"
+              title={o.name}
               className={clsx(
-                colorLookup[o.name.toLowerCase()],
+                `bg-${colorLookup[o.name.toLowerCase()]}-500`,
                 "rounded-full border border-gray-200 p-4",
               )}
               onClick={() => updateOptionHandler(variation.id, o.id)}
diff --git a/examples/commerce-essentials/src/lib/color-lookup.ts b/examples/commerce-essentials/src/lib/color-lookup.ts
index 9c147119..74f7745a 100644
--- a/examples/commerce-essentials/src/lib/color-lookup.ts
+++ b/examples/commerce-essentials/src/lib/color-lookup.ts
@@ -7,4 +7,6 @@ export const colorLookup: { [key: string]: string } = {
   purple: "purple",
   green: "green",
   blue: "blue",
+  yellow: "yellow",
+  orange: "orange"
 };
diff --git a/examples/commerce-essentials/tailwind.config.ts b/examples/commerce-essentials/tailwind.config.ts
index fc51cc8d..d7af7be5 100644
--- a/examples/commerce-essentials/tailwind.config.ts
+++ b/examples/commerce-essentials/tailwind.config.ts
@@ -3,6 +3,11 @@ import type { Config } from "tailwindcss";
 
 export default {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  safelist: [
+    "bg-purple-500",
+    "bg-yellow-500",
+    "bg-orange-500"
+  ],
   theme: {
     extend: {
       maxWidth: {