diff --git a/app/components/WhatsAppButton.jsx b/app/components/WhatsAppButton.jsx
new file mode 100644
index 0000000..413ba29
--- /dev/null
+++ b/app/components/WhatsAppButton.jsx
@@ -0,0 +1,69 @@
+import { Button } from '@shopify/polaris';
+
+const WHATSAPP_NUMBER = '+16476797651';
+const WHATSAPP_NUMBER_DIALED = WHATSAPP_NUMBER.replace(/[^\d]/g, '');
+
+export function getWhatsAppLink(message) {
+ const base = `https://wa.me/${WHATSAPP_NUMBER_DIALED}`;
+ return message ? `${base}?text=${encodeURIComponent(message)}` : base;
+}
+
+const WhatsAppIcon = () => (
+
+);
+
+export default function WhatsAppButton({ message, label = 'Chat on WhatsApp', size, fullWidth }) {
+ return (
+
+ );
+}
+
+export function WhatsAppFloatingButton() {
+ return (
+
+
+
+ );
+}
+
+export { WHATSAPP_NUMBER };
diff --git a/app/routes/app.jsx b/app/routes/app.jsx
index 47d2ab9..2e502f6 100644
--- a/app/routes/app.jsx
+++ b/app/routes/app.jsx
@@ -44,6 +44,7 @@ import { AppProvider } from "@shopify/shopify-app-remix/react";
import { NavMenu } from "@shopify/app-bridge-react";
import polarisStyles from "@shopify/polaris/build/esm/styles.css?url";
import { authenticate } from "../shopify.server";
+import { WhatsAppFloatingButton } from "../components/WhatsAppButton";
export const links = () => [{ rel: "stylesheet", href: polarisStyles }];
@@ -66,6 +67,7 @@ export default function App() {
{/* 🆘 Testing */}
+
);
}