diff --git a/app/[[...path]]/page.tsx b/app/[[...path]]/page.tsx
index 5f215c0..3adc857 100644
--- a/app/[[...path]]/page.tsx
+++ b/app/[[...path]]/page.tsx
@@ -1,6 +1,6 @@
 import { notFound } from "next/navigation";
-import { readSchema } from "~/lib/schema.server";
-import RenderClient from "~/components/RenderClient";
+import { readSchema } from "@/lib/schema.server";
+import RenderClient from "@/components/RenderClient";
 
 export const dynamic = "force-dynamic";
 
diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts
index 0eeb581..3a05b9f 100644
--- a/app/api/chat/route.ts
+++ b/app/api/chat/route.ts
@@ -10,16 +10,16 @@ import {
   reactEditorTools,
   getEditorContext,
 } from "@reacteditor/plugin-ai/server";
-import { patchRoute, readSchema } from "~/lib/schema.server";
-import { shopifyFetch } from "~/editor/services/shopify/client";
+import { patchRoute, readSchema } from "@/lib/schema.server";
+import { shopifyFetch } from "@/editor/services/shopify/client";
 import {
   GET_PRODUCTS_QUERY,
   GET_PRODUCT_QUERY,
-} from "~/editor/graphql/products";
+} from "@/editor/graphql/products";
 import {
   GET_COLLECTIONS_QUERY,
   GET_COLLECTION_PRODUCTS_QUERY,
-} from "~/editor/graphql/collections";
+} from "@/editor/graphql/collections";
 
 export const runtime = "nodejs";
 export const maxDuration = 60;
diff --git a/app/api/save-schema/route.ts b/app/api/save-schema/route.ts
index 9dd3d73..7f2fbb2 100644
--- a/app/api/save-schema/route.ts
+++ b/app/api/save-schema/route.ts
@@ -1,5 +1,5 @@
 import { NextResponse } from "next/server";
-import { patchRoute } from "~/lib/schema.server";
+import { patchRoute } from "@/lib/schema.server";
 
 export async function POST(request: Request) {
   try {
diff --git a/app/edit/[[...path]]/page.tsx b/app/edit/[[...path]]/page.tsx
index 8df4e0d..7e85e9b 100644
--- a/app/edit/[[...path]]/page.tsx
+++ b/app/edit/[[...path]]/page.tsx
@@ -1,5 +1,5 @@
-import { readSchema } from "~/lib/schema.server";
-import EditorClient from "~/components/EditorClient";
+import { readSchema } from "@/lib/schema.server";
+import EditorClient from "@/components/EditorClient";
 
 export const dynamic = "force-dynamic";
 
diff --git a/components/EditorClient.tsx b/components/EditorClient.tsx
index ce136cf..f902250 100644
--- a/components/EditorClient.tsx
+++ b/components/EditorClient.tsx
@@ -13,9 +13,9 @@ import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
 import { aiPlugin } from "@reacteditor/plugin-ai";
 import "@reacteditor/core/dist/index.css";
 import "~/editor/vendor/plugin-ai.css";
-import { createConfig } from "~/editor/config";
-import { ShopifyProvider } from "~/editor/contexts/shopify-context";
-import { Button } from "~/editor/components/ui/button";
+import { createConfig } from "@/editor/config";
+import { ShopifyProvider } from "@/editor/contexts/shopify-context";
+import { Button } from "@/editor/components/ui/button";
 
 type Schema = Record<string, { root: any; content: any[] }>;
 
diff --git a/components/RenderClient.tsx b/components/RenderClient.tsx
index 60d7e55..6fbaf78 100644
--- a/components/RenderClient.tsx
+++ b/components/RenderClient.tsx
@@ -3,8 +3,8 @@
 import { useMemo } from "react";
 import { Render } from "@reacteditor/core";
 import "@reacteditor/core/dist/index.css";
-import { createConfig } from "~/editor/config";
-import { ShopifyProvider } from "~/editor/contexts/shopify-context";
+import { createConfig } from "@/editor/config";
+import { ShopifyProvider } from "@/editor/contexts/shopify-context";
 
 const SHOPIFY_DOMAIN =
   process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop";
diff --git a/editor/components/commerce/cart-drawer.tsx b/editor/components/commerce/cart-drawer.tsx
index 8c6eb85..37e79a1 100644
--- a/editor/components/commerce/cart-drawer.tsx
+++ b/editor/components/commerce/cart-drawer.tsx
@@ -1,9 +1,9 @@
 'use client';
 
 import React from 'react';
-import { useShopifyCart, redirectToCheckout } from '~/editor/hooks/use-shopify-cart';
-import { Button } from '~/editor/components/ui/button';
-import { Spinner } from '~/editor/components/ui/spinner';
+import { useShopifyCart, redirectToCheckout } from '@/editor/hooks/use-shopify-cart';
+import { Button } from '@/editor/components/ui/button';
+import { Spinner } from '@/editor/components/ui/spinner';
 import {
   Sheet,
   SheetContent,
@@ -11,7 +11,7 @@ import {
   SheetTitle,
   SheetBody,
   AnimatePresence,
-} from '~/editor/components/ui/sheet';
+} from '@/editor/components/ui/sheet';
 
 const CartDrawer: React.FC = () => {
   const { isOpen, closeCart, items, itemCount, totalAmount, checkoutUrl, loading, removeItem, updateItemQuantity } = useShopifyCart();
diff --git a/editor/components/commerce/collection-card.tsx b/editor/components/commerce/collection-card.tsx
index 2c78ad3..5f6756b 100644
--- a/editor/components/commerce/collection-card.tsx
+++ b/editor/components/commerce/collection-card.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 // local link - plain anchor
-import { Card, CardContent } from '~/editor/components/ui/card';
+import { Card, CardContent } from '@/editor/components/ui/card';
 
 interface CollectionImage {
   url: string;
diff --git a/editor/components/commerce/collection-detail.tsx b/editor/components/commerce/collection-detail.tsx
index 6a928a0..754faee 100644
--- a/editor/components/commerce/collection-detail.tsx
+++ b/editor/components/commerce/collection-detail.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { useCollectionProducts } from '~/editor/hooks/use-shopify-collections';
+import { useCollectionProducts } from '@/editor/hooks/use-shopify-collections';
 import ProductCard from './product-card';
 
 const CollectionDetail: React.FC<{ handle?: string }> = ({ handle: handleProp }) => {
diff --git a/editor/components/commerce/collection-grid.editor.tsx b/editor/components/commerce/collection-grid.editor.tsx
index cc4c366..bc982bc 100644
--- a/editor/components/commerce/collection-grid.editor.tsx
+++ b/editor/components/commerce/collection-grid.editor.tsx
@@ -1,9 +1,9 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { useEffect, useState } from "react";
 import { FolderOpen } from "lucide-react";
-import { shopifyFetch } from "~/editor/services/shopify/client";
-import { GET_COLLECTIONS_QUERY } from "~/editor/graphql/collections";
-import { Typography } from "~/editor/theme/Typography";
+import { shopifyFetch } from "@/editor/services/shopify/client";
+import { GET_COLLECTIONS_QUERY } from "@/editor/graphql/collections";
+import { Typography } from "@/editor/theme/Typography";
 
 export type CollectionGridProps = {
   tagline: string;
diff --git a/editor/components/commerce/collection.editor.tsx b/editor/components/commerce/collection.editor.tsx
index 66acf3e..44b45ff 100644
--- a/editor/components/commerce/collection.editor.tsx
+++ b/editor/components/commerce/collection.editor.tsx
@@ -1,9 +1,9 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { FolderOpen } from "lucide-react";
 import type { ShopifyCollection } from "@reacteditor/field-shopify";
-import { useCollectionProducts } from "~/editor/hooks/use-shopify-collections";
+import { useCollectionProducts } from "@/editor/hooks/use-shopify-collections";
 import { ProductCard } from "./product-card";
-import { Typography } from "~/editor/theme/Typography";
+import { Typography } from "@/editor/theme/Typography";
 
 export type CollectionProps = {
   collection: ShopifyCollection | null;
diff --git a/editor/components/commerce/collections.tsx b/editor/components/commerce/collections.tsx
index a65b3d9..08df453 100644
--- a/editor/components/commerce/collections.tsx
+++ b/editor/components/commerce/collections.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { useCollections } from '~/editor/hooks/use-shopify-collections';
+import { useCollections } from '@/editor/hooks/use-shopify-collections';
 import CollectionCard from './collection-card';
 
 const Collections: React.FC = () => {
diff --git a/editor/components/commerce/featured-product.editor.tsx b/editor/components/commerce/featured-product.editor.tsx
index 42e1151..b4e09e5 100644
--- a/editor/components/commerce/featured-product.editor.tsx
+++ b/editor/components/commerce/featured-product.editor.tsx
@@ -1,9 +1,9 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { Star } from "lucide-react";
 import type { ShopifyProduct } from "@reacteditor/field-shopify";
-import { useProduct } from "~/editor/hooks/use-shopify-products";
-import { useShopifyCart } from "~/editor/hooks/use-shopify-cart";
-import { Typography } from "~/editor/theme/Typography";
+import { useProduct } from "@/editor/hooks/use-shopify-products";
+import { useShopifyCart } from "@/editor/hooks/use-shopify-cart";
+import { Typography } from "@/editor/theme/Typography";
 
 export type FeaturedProductProps = {
   product: ShopifyProduct | null;
diff --git a/editor/components/commerce/product-detail/index.tsx b/editor/components/commerce/product-detail/index.tsx
index 1cf3fad..b54926a 100644
--- a/editor/components/commerce/product-detail/index.tsx
+++ b/editor/components/commerce/product-detail/index.tsx
@@ -2,13 +2,13 @@
 
 import React, { useState, useEffect } from 'react';
 // local link - plain anchor
-import { useProduct, type Product } from '~/editor/hooks/use-shopify-products';
-import { useShopifyCart } from '~/editor/hooks/use-shopify-cart';
+import { useProduct, type Product } from '@/editor/hooks/use-shopify-products';
+import { useShopifyCart } from '@/editor/hooks/use-shopify-cart';
 import ProductDetailGallery from './product-detail-gallery';
 import ProductDetailInfo from './product-detail-info';
 import ProductRecommendations from './product-recommendations';
-import { Button } from '~/editor/components/ui/button';
-import { Alert, AlertTitle, AlertDescription } from '~/editor/components/ui/alert';
+import { Button } from '@/editor/components/ui/button';
+import { Alert, AlertTitle, AlertDescription } from '@/editor/components/ui/alert';
 import {
   Breadcrumb,
   BreadcrumbList,
@@ -16,7 +16,7 @@ import {
   BreadcrumbLink,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '~/editor/components/ui/breadcrumb';
+} from '@/editor/components/ui/breadcrumb';
 
 interface ProductVariant {
   id: string;
diff --git a/editor/components/commerce/product-detail/product-detail-gallery.tsx b/editor/components/commerce/product-detail/product-detail-gallery.tsx
index 8fee6db..98aa495 100644
--- a/editor/components/commerce/product-detail/product-detail-gallery.tsx
+++ b/editor/components/commerce/product-detail/product-detail-gallery.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '~/editor/components/ui/button';
+import { Button } from '@/editor/components/ui/button';
 
 interface ProductImage {
   url: string;
diff --git a/editor/components/commerce/product-detail/product-detail-info.tsx b/editor/components/commerce/product-detail/product-detail-info.tsx
index 0b2af30..84edafd 100644
--- a/editor/components/commerce/product-detail/product-detail-info.tsx
+++ b/editor/components/commerce/product-detail/product-detail-info.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Product, ProductVariant } from './index.tsx';
-import { Button } from '~/editor/components/ui/button';
-import { Badge } from '~/editor/components/ui/badge';
-import { Spinner } from '~/editor/components/ui/spinner';
+import { Button } from '@/editor/components/ui/button';
+import { Badge } from '@/editor/components/ui/badge';
+import { Spinner } from '@/editor/components/ui/spinner';
 
 interface ProductDetailInfoProps {
   product: Product;
diff --git a/editor/components/commerce/product-detail/product-recommendations.tsx b/editor/components/commerce/product-detail/product-recommendations.tsx
index c3e9f36..4f1661d 100644
--- a/editor/components/commerce/product-detail/product-recommendations.tsx
+++ b/editor/components/commerce/product-detail/product-recommendations.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { useProductRecommendations } from '~/editor/hooks/use-shopify-products';
+import { useProductRecommendations } from '@/editor/hooks/use-shopify-products';
 import ProductCard from '../product-card';
 
 interface ProductRecommendationsProps {
diff --git a/editor/components/commerce/product-details.editor.tsx b/editor/components/commerce/product-details.editor.tsx
index c18a113..696110e 100644
--- a/editor/components/commerce/product-details.editor.tsx
+++ b/editor/components/commerce/product-details.editor.tsx
@@ -2,9 +2,9 @@ import { ComponentConfig } from "@reacteditor/core";
 import { useEffect, useState } from "react";
 import { Package } from "lucide-react";
 import type { ShopifyProduct } from "@reacteditor/field-shopify";
-import { useProduct } from "~/editor/hooks/use-shopify-products";
-import { useShopifyCart } from "~/editor/hooks/use-shopify-cart";
-import { Typography } from "~/editor/theme/Typography";
+import { useProduct } from "@/editor/hooks/use-shopify-products";
+import { useShopifyCart } from "@/editor/hooks/use-shopify-cart";
+import { Typography } from "@/editor/theme/Typography";
 
 export type ProductDetailsProps = {
   product: ShopifyProduct | null;
diff --git a/editor/components/commerce/products-carousel.editor.tsx b/editor/components/commerce/products-carousel.editor.tsx
index 9f25927..5eef9ce 100644
--- a/editor/components/commerce/products-carousel.editor.tsx
+++ b/editor/components/commerce/products-carousel.editor.tsx
@@ -2,17 +2,17 @@ import { ComponentConfig } from "@reacteditor/core";
 import { useEffect, useState } from "react";
 import { GalleryHorizontalEnd } from "lucide-react";
 import type { ShopifyCollection } from "@reacteditor/field-shopify";
-import { getProducts } from "~/editor/hooks/use-shopify-products";
-import { getCollectionProducts } from "~/editor/hooks/use-shopify-collections";
+import { getProducts } from "@/editor/hooks/use-shopify-products";
+import { getCollectionProducts } from "@/editor/hooks/use-shopify-collections";
 import { ProductCard } from "./product-card";
-import { Typography } from "~/editor/theme/Typography";
+import { Typography } from "@/editor/theme/Typography";
 import {
   Carousel,
   CarouselContent,
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
-} from "~/editor/components/ui/carousel";
+} from "@/editor/components/ui/carousel";
 
 export type ProductsCarouselProps = {
   collection: ShopifyCollection | null;
diff --git a/editor/components/commerce/products-grid.editor.tsx b/editor/components/commerce/products-grid.editor.tsx
index e4fb668..f4ac663 100644
--- a/editor/components/commerce/products-grid.editor.tsx
+++ b/editor/components/commerce/products-grid.editor.tsx
@@ -2,10 +2,10 @@ import { ComponentConfig } from "@reacteditor/core";
 import { useEffect, useState } from "react";
 import { LayoutGrid } from "lucide-react";
 import type { ShopifyCollection } from "@reacteditor/field-shopify";
-import { getProducts } from "~/editor/hooks/use-shopify-products";
-import { getCollectionProducts } from "~/editor/hooks/use-shopify-collections";
+import { getProducts } from "@/editor/hooks/use-shopify-products";
+import { getCollectionProducts } from "@/editor/hooks/use-shopify-collections";
 import { ProductCard } from "./product-card";
-import { Typography } from "~/editor/theme/Typography";
+import { Typography } from "@/editor/theme/Typography";
 
 export type ProductsGridProps = {
   collection: ShopifyCollection | null;
diff --git a/editor/components/commerce/products.tsx b/editor/components/commerce/products.tsx
index 94c5b2b..99c0353 100644
--- a/editor/components/commerce/products.tsx
+++ b/editor/components/commerce/products.tsx
@@ -2,9 +2,9 @@
 
 import React, { useState, useEffect } from 'react';
 import ProductCard from './product-card';
-import { getProducts } from '~/editor/hooks/use-shopify-products';
-import { Button } from '~/editor/components/ui/button';
-import { Spinner } from '~/editor/components/ui/spinner';
+import { getProducts } from '@/editor/hooks/use-shopify-products';
+import { Button } from '@/editor/components/ui/button';
+import { Spinner } from '@/editor/components/ui/spinner';
 
 interface ProductImage {
   url: string;
diff --git a/editor/components/commerce/recommended-products.editor.tsx b/editor/components/commerce/recommended-products.editor.tsx
index a56d016..30b1b87 100644
--- a/editor/components/commerce/recommended-products.editor.tsx
+++ b/editor/components/commerce/recommended-products.editor.tsx
@@ -4,9 +4,9 @@ import type { ShopifyProduct } from "@reacteditor/field-shopify";
 import {
   useProduct,
   useProductRecommendations,
-} from "~/editor/hooks/use-shopify-products";
+} from "@/editor/hooks/use-shopify-products";
 import { ProductCard } from "./product-card";
-import { Typography } from "~/editor/theme/Typography";
+import { Typography } from "@/editor/theme/Typography";
 
 export type RecommendedProductsProps = {
   product: ShopifyProduct | null;
diff --git a/editor/components/commerce/shop-header.tsx b/editor/components/commerce/shop-header.tsx
index 7bee6fa..83ad805 100644
--- a/editor/components/commerce/shop-header.tsx
+++ b/editor/components/commerce/shop-header.tsx
@@ -2,8 +2,8 @@
 
 import React from 'react';
 // local link - plain anchor
-import { useShopifyCart } from '~/editor/hooks/use-shopify-cart';
-import config from '~/editor/lib/config.json';
+import { useShopifyCart } from '@/editor/hooks/use-shopify-cart';
+import config from '@/editor/lib/config.json';
 
 const CartIcon: React.FC = () => {
   const { toggleCart, itemCount } = useShopifyCart();
diff --git a/editor/components/cta/cta.editor.tsx b/editor/components/cta/cta.editor.tsx
index 5d0d6a8..25316d6 100644
--- a/editor/components/cta/cta.editor.tsx
+++ b/editor/components/cta/cta.editor.tsx
@@ -1,7 +1,7 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { Megaphone } from "lucide-react";
-import { cn } from "~/editor/lib/utils";
-import { Typography } from "~/editor/theme/Typography";
+import { cn } from "@/editor/lib/utils";
+import { Typography } from "@/editor/theme/Typography";
 
 export type CTAProps = {
   tagline: string;
diff --git a/editor/components/faq/faq.editor.tsx b/editor/components/faq/faq.editor.tsx
index 979e7ce..60582e6 100644
--- a/editor/components/faq/faq.editor.tsx
+++ b/editor/components/faq/faq.editor.tsx
@@ -1,7 +1,7 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { useState } from "react";
 import { HelpCircle, Plus, Minus } from "lucide-react";
-import { Typography } from "~/editor/theme/Typography";
+import { Typography } from "@/editor/theme/Typography";
 
 export type FAQProps = {
   tagline: string;
diff --git a/editor/components/features/features.editor.tsx b/editor/components/features/features.editor.tsx
index 161ea80..64f618a 100644
--- a/editor/components/features/features.editor.tsx
+++ b/editor/components/features/features.editor.tsx
@@ -1,6 +1,6 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { Sparkles } from "lucide-react";
-import { Typography } from "~/editor/theme/Typography";
+import { Typography } from "@/editor/theme/Typography";
 
 export type FeaturesProps = {
   tagline: string;
diff --git a/editor/components/footer/footer.editor.tsx b/editor/components/footer/footer.editor.tsx
index ee2fee8..427d720 100644
--- a/editor/components/footer/footer.editor.tsx
+++ b/editor/components/footer/footer.editor.tsx
@@ -1,7 +1,7 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { useState } from "react";
 import { LayoutGrid } from "lucide-react";
-import { Typography } from "~/editor/theme/Typography";
+import { Typography } from "@/editor/theme/Typography";
 
 export type FooterProps = {
   brand: string;
diff --git a/editor/components/hero/hero.editor.tsx b/editor/components/hero/hero.editor.tsx
index abbf748..0c5c08f 100644
--- a/editor/components/hero/hero.editor.tsx
+++ b/editor/components/hero/hero.editor.tsx
@@ -1,7 +1,7 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { LayoutTemplate } from "lucide-react";
-import { cn } from "~/editor/lib/utils";
-import { Typography } from "~/editor/theme/Typography";
+import { cn } from "@/editor/lib/utils";
+import { Typography } from "@/editor/theme/Typography";
 
 export type HeroProps = {
   tagline: string;
diff --git a/editor/components/landing/banner.editor.tsx b/editor/components/landing/banner.editor.tsx
index f3d44f0..5be7002 100644
--- a/editor/components/landing/banner.editor.tsx
+++ b/editor/components/landing/banner.editor.tsx
@@ -1,6 +1,6 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { Megaphone } from "lucide-react";
-import { cn } from "~/editor/lib/utils";
+import { cn } from "@/editor/lib/utils";
 
 export type BannerProps = {
   text: string;
diff --git a/editor/components/landing/image-gallery.editor.tsx b/editor/components/landing/image-gallery.editor.tsx
index 03e61ce..01e0c2c 100644
--- a/editor/components/landing/image-gallery.editor.tsx
+++ b/editor/components/landing/image-gallery.editor.tsx
@@ -1,7 +1,7 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { Images } from "lucide-react";
-import { cn } from "~/editor/lib/utils";
-import { Typography } from "~/editor/theme/Typography";
+import { cn } from "@/editor/lib/utils";
+import { Typography } from "@/editor/theme/Typography";
 
 export type ImageGalleryProps = {
   tagline: string;
diff --git a/editor/components/landing/newsletter-cta.editor.tsx b/editor/components/landing/newsletter-cta.editor.tsx
index 4551590..f763a02 100644
--- a/editor/components/landing/newsletter-cta.editor.tsx
+++ b/editor/components/landing/newsletter-cta.editor.tsx
@@ -1,8 +1,8 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { useState } from "react";
 import { Mail } from "lucide-react";
-import { cn } from "~/editor/lib/utils";
-import { Typography } from "~/editor/theme/Typography";
+import { cn } from "@/editor/lib/utils";
+import { Typography } from "@/editor/theme/Typography";
 
 export type NewsletterCtaProps = {
   tagline: string;
diff --git a/editor/components/navigation/navigation.editor.tsx b/editor/components/navigation/navigation.editor.tsx
index fcd4182..699d70e 100644
--- a/editor/components/navigation/navigation.editor.tsx
+++ b/editor/components/navigation/navigation.editor.tsx
@@ -1,9 +1,9 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { Menu as MenuIcon, ShoppingBag, Search, User, X } from "lucide-react";
 import { useState } from "react";
-import { useShopifyCart } from "~/editor/hooks/use-shopify-cart";
-import { Sheet, SheetContent, SheetHeader, SheetTitle } from "~/editor/components/ui/sheet";
-import { cn } from "~/editor/lib/utils";
+import { useShopifyCart } from "@/editor/hooks/use-shopify-cart";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/editor/components/ui/sheet";
+import { cn } from "@/editor/lib/utils";
 
 export type NavigationProps = {
   brand: string;
diff --git a/editor/components/testimonials/testimonials.editor.tsx b/editor/components/testimonials/testimonials.editor.tsx
index 836e4ad..2a86b95 100644
--- a/editor/components/testimonials/testimonials.editor.tsx
+++ b/editor/components/testimonials/testimonials.editor.tsx
@@ -1,7 +1,7 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { useState } from "react";
 import { Quote, ArrowLeft, ArrowRight } from "lucide-react";
-import { Typography } from "~/editor/theme/Typography";
+import { Typography } from "@/editor/theme/Typography";
 
 export type TestimonialsProps = {
   tagline: string;
diff --git a/editor/components/ui/accordion.tsx b/editor/components/ui/accordion.tsx
index 954febc..733867b 100644
--- a/editor/components/ui/accordion.tsx
+++ b/editor/components/ui/accordion.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDownIcon } from "lucide-react";
 
-import { cn } from "~/editor/lib/utils";
+import { cn } from "@/editor/lib/utils";
 
 function Accordion({
   ...props
diff --git a/editor/components/ui/alert.tsx b/editor/components/ui/alert.tsx
index 0d4bd30..e9f7351 100644
--- a/editor/components/ui/alert.tsx
+++ b/editor/components/ui/alert.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "~/editor/lib/utils"
+import { cn } from "@/editor/lib/utils"
 
 type AlertVariant = "default" | "destructive"
 
diff --git a/editor/components/ui/avatar.tsx b/editor/components/ui/avatar.tsx
index 5e2b899..badcf4a 100644
--- a/editor/components/ui/avatar.tsx
+++ b/editor/components/ui/avatar.tsx
@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
-import { cn } from "~/editor/lib/utils";
+import { cn } from "@/editor/lib/utils";
 
 function Avatar({
   className,
diff --git a/editor/components/ui/badge.tsx b/editor/components/ui/badge.tsx
index bfee237..0c2aaf5 100644
--- a/editor/components/ui/badge.tsx
+++ b/editor/components/ui/badge.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "~/editor/lib/utils";
+import { cn } from "@/editor/lib/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none transition-[color,box-shadow] overflow-hidden",
diff --git a/editor/components/ui/breadcrumb.tsx b/editor/components/ui/breadcrumb.tsx
index 61087ad..585ee9f 100644
--- a/editor/components/ui/breadcrumb.tsx
+++ b/editor/components/ui/breadcrumb.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { cn } from '~/editor/lib/utils';
+import { cn } from '@/editor/lib/utils';
 
 function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
   return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
diff --git a/editor/components/ui/button.tsx b/editor/components/ui/button.tsx
index 688e9f6..85bb99c 100644
--- a/editor/components/ui/button.tsx
+++ b/editor/components/ui/button.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "~/editor/lib/utils";
+import { cn } from "@/editor/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring",
diff --git a/editor/components/ui/card.tsx b/editor/components/ui/card.tsx
index 67012b1..cf6cfe6 100644
--- a/editor/components/ui/card.tsx
+++ b/editor/components/ui/card.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "~/editor/lib/utils";
+import { cn } from "@/editor/lib/utils";
 
 function Card({ className, ...props }: React.ComponentProps<"div">) {
   return (
diff --git a/editor/components/ui/carousel.tsx b/editor/components/ui/carousel.tsx
index fb21c7d..0649898 100644
--- a/editor/components/ui/carousel.tsx
+++ b/editor/components/ui/carousel.tsx
@@ -6,7 +6,7 @@ import React, {
   useRef,
   useEffect,
 } from 'react';
-import { cn } from '~/editor/lib/utils';
+import { cn } from '@/editor/lib/utils';
 import { Button } from './button';
 
 interface CarouselContextType {
diff --git a/editor/components/ui/empty.tsx b/editor/components/ui/empty.tsx
index f0d727f..cb2c9e0 100644
--- a/editor/components/ui/empty.tsx
+++ b/editor/components/ui/empty.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "~/editor/lib/utils"
+import { cn } from "@/editor/lib/utils"
 
 function Empty({ className, ...props }: React.ComponentProps<"div">) {
   return (
diff --git a/editor/components/ui/input-otp.tsx b/editor/components/ui/input-otp.tsx
index 4c3ade7..ebf2c9d 100644
--- a/editor/components/ui/input-otp.tsx
+++ b/editor/components/ui/input-otp.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { OTPInput, OTPInputContext } from 'input-otp';
-import { cn } from '~/editor/lib/utils';
+import { cn } from '@/editor/lib/utils';
 
 function InputOTP({
   className,
diff --git a/editor/components/ui/input.tsx b/editor/components/ui/input.tsx
index 8e6ffbe..f609d22 100644
--- a/editor/components/ui/input.tsx
+++ b/editor/components/ui/input.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "~/editor/lib/utils"
+import { cn } from "@/editor/lib/utils"
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
diff --git a/editor/components/ui/navigation-menu.tsx b/editor/components/ui/navigation-menu.tsx
index 8589f61..211a6e5 100644
--- a/editor/components/ui/navigation-menu.tsx
+++ b/editor/components/ui/navigation-menu.tsx
@@ -5,7 +5,7 @@ import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { cva } from "class-variance-authority";
 import { ChevronDownIcon } from "lucide-react";
 
-import { cn } from "~/editor/lib/utils";
+import { cn } from "@/editor/lib/utils";
 
 function NavigationMenu({
   className,
diff --git a/editor/components/ui/pagination.tsx b/editor/components/ui/pagination.tsx
index c8692c3..58f4b9a 100644
--- a/editor/components/ui/pagination.tsx
+++ b/editor/components/ui/pagination.tsx
@@ -5,8 +5,8 @@ import {
   MoreHorizontalIcon,
 } from "lucide-react"
 
-import { cn } from "~/editor/lib/utils"
-import { buttonVariants, type Button } from "~/editor/components/ui/button"
+import { cn } from "@/editor/lib/utils"
+import { buttonVariants, type Button } from "@/editor/components/ui/button"
 
 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
   return (
diff --git a/editor/components/ui/select.tsx b/editor/components/ui/select.tsx
index bc20c65..c54bc35 100644
--- a/editor/components/ui/select.tsx
+++ b/editor/components/ui/select.tsx
@@ -6,7 +6,7 @@ import React, {
   useEffect,
   useCallback,
 } from 'react';
-import { cn } from '~/editor/lib/utils';
+import { cn } from '@/editor/lib/utils';
 
 interface SelectContextType {
   open: boolean;
diff --git a/editor/components/ui/separator.tsx b/editor/components/ui/separator.tsx
index fee2a21..a1b87fc 100644
--- a/editor/components/ui/separator.tsx
+++ b/editor/components/ui/separator.tsx
@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
-import { cn } from "~/editor/lib/utils";
+import { cn } from "@/editor/lib/utils";
 
 function Separator({
   className,
diff --git a/editor/components/ui/sheet.tsx b/editor/components/ui/sheet.tsx
index 944ae6f..5ea6758 100644
--- a/editor/components/ui/sheet.tsx
+++ b/editor/components/ui/sheet.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useContext, createContext } from 'react';
 import { createPortal } from 'react-dom';
 import { motion, AnimatePresence } from 'framer-motion';
-import { cn } from '~/editor/lib/utils';
+import { cn } from '@/editor/lib/utils';
 
 interface SheetContextType {
   open: boolean;
diff --git a/editor/components/ui/skeleton.tsx b/editor/components/ui/skeleton.tsx
index 2d88436..d91fb1c 100644
--- a/editor/components/ui/skeleton.tsx
+++ b/editor/components/ui/skeleton.tsx
@@ -1,4 +1,4 @@
-import { cn } from "~/editor/lib/utils"
+import { cn } from "@/editor/lib/utils"
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
diff --git a/editor/components/ui/sonner.tsx b/editor/components/ui/sonner.tsx
index da3d2d8..bce41b4 100644
--- a/editor/components/ui/sonner.tsx
+++ b/editor/components/ui/sonner.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { toast } from 'sonner';
 
-import Button from '~/editor/components/ui/button';
+import Button from '@/editor/components/ui/button';
 
 export function SonnerDemo() {
   return (
diff --git a/editor/components/ui/spinner.tsx b/editor/components/ui/spinner.tsx
index 6bc1dc3..ce01a2d 100644
--- a/editor/components/ui/spinner.tsx
+++ b/editor/components/ui/spinner.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { cn } from '~/editor/lib/utils';
+import { cn } from '@/editor/lib/utils';
 
 interface SpinnerProps extends React.ComponentProps<'svg'> {
   size?: 'sm' | 'md' | 'lg' | 'xl';
diff --git a/editor/components/ui/switch.tsx b/editor/components/ui/switch.tsx
index 626f90e..02f96bf 100644
--- a/editor/components/ui/switch.tsx
+++ b/editor/components/ui/switch.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { cn } from '~/editor/lib/utils';
+import { cn } from '@/editor/lib/utils';
 
 interface SwitchProps extends Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
diff --git a/editor/components/ui/table.tsx b/editor/components/ui/table.tsx
index 211d82d..87b212e 100644
--- a/editor/components/ui/table.tsx
+++ b/editor/components/ui/table.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { cn } from '~/editor/lib/utils';
+import { cn } from '@/editor/lib/utils';
 
 function Table({ className, ...props }: React.ComponentProps<'table'>) {
   return (
diff --git a/editor/components/ui/tabs.tsx b/editor/components/ui/tabs.tsx
index 241da41..4cbfa5d 100644
--- a/editor/components/ui/tabs.tsx
+++ b/editor/components/ui/tabs.tsx
@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 
-import { cn } from "~/editor/lib/utils";
+import { cn } from "@/editor/lib/utils";
 
 function Tabs({
   className,
diff --git a/editor/components/ui/textarea.tsx b/editor/components/ui/textarea.tsx
index d172eda..efaecc6 100644
--- a/editor/components/ui/textarea.tsx
+++ b/editor/components/ui/textarea.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "~/editor/lib/utils"
+import { cn } from "@/editor/lib/utils"
 
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
   return (
diff --git a/editor/config/index.tsx b/editor/config/index.tsx
index 4e363fb..b2b7706 100644
--- a/editor/config/index.tsx
+++ b/editor/config/index.tsx
@@ -3,27 +3,27 @@ import {
   createFieldShopifyCollection,
 } from "@reacteditor/field-shopify";
 
-import { navigationEditor } from "~/editor/components/navigation/navigation.editor";
-import { footerEditor } from "~/editor/components/footer/footer.editor";
+import { navigationEditor } from "@/editor/components/navigation/navigation.editor";
+import { footerEditor } from "@/editor/components/footer/footer.editor";
 
-import { heroEditor } from "~/editor/components/hero/hero.editor";
-import { bannerEditor } from "~/editor/components/landing/banner.editor";
+import { heroEditor } from "@/editor/components/hero/hero.editor";
+import { bannerEditor } from "@/editor/components/landing/banner.editor";
 
-import { createFeaturedProductEditor } from "~/editor/components/commerce/featured-product.editor";
-import { createProductsGridEditor } from "~/editor/components/commerce/products-grid.editor";
-import { createProductsCarouselEditor } from "~/editor/components/commerce/products-carousel.editor";
-import { collectionGridEditor } from "~/editor/components/commerce/collection-grid.editor";
-import { createCollectionEditor } from "~/editor/components/commerce/collection.editor";
-import { createProductDetailsEditor } from "~/editor/components/commerce/product-details.editor";
-import { createRecommendedProductsEditor } from "~/editor/components/commerce/recommended-products.editor";
+import { createFeaturedProductEditor } from "@/editor/components/commerce/featured-product.editor";
+import { createProductsGridEditor } from "@/editor/components/commerce/products-grid.editor";
+import { createProductsCarouselEditor } from "@/editor/components/commerce/products-carousel.editor";
+import { collectionGridEditor } from "@/editor/components/commerce/collection-grid.editor";
+import { createCollectionEditor } from "@/editor/components/commerce/collection.editor";
+import { createProductDetailsEditor } from "@/editor/components/commerce/product-details.editor";
+import { createRecommendedProductsEditor } from "@/editor/components/commerce/recommended-products.editor";
 
-import { featuresEditor } from "~/editor/components/features/features.editor";
-import { testimonialsEditor } from "~/editor/components/testimonials/testimonials.editor";
-import { imageGalleryEditor } from "~/editor/components/landing/image-gallery.editor";
-import { newsletterCtaEditor } from "~/editor/components/landing/newsletter-cta.editor";
-import { logosEditor } from "~/editor/components/logos/logos.editor";
-import { ctaEditor } from "~/editor/components/cta/cta.editor";
-import { faqEditor } from "~/editor/components/faq/faq.editor";
+import { featuresEditor } from "@/editor/components/features/features.editor";
+import { testimonialsEditor } from "@/editor/components/testimonials/testimonials.editor";
+import { imageGalleryEditor } from "@/editor/components/landing/image-gallery.editor";
+import { newsletterCtaEditor } from "@/editor/components/landing/newsletter-cta.editor";
+import { logosEditor } from "@/editor/components/logos/logos.editor";
+import { ctaEditor } from "@/editor/components/cta/cta.editor";
+import { faqEditor } from "@/editor/components/faq/faq.editor";
 
 import Root from "./root";
 import type { UserConfig } from "./types";
diff --git a/editor/config/root.tsx b/editor/config/root.tsx
index 838be53..01b3b46 100644
--- a/editor/config/root.tsx
+++ b/editor/config/root.tsx
@@ -1,6 +1,6 @@
 import { DefaultRootProps, RootConfig } from "@reacteditor/core";
 import { createFieldGoogleFonts } from "@reacteditor/field-google-fonts";
-import { ThemeProvider, ThemeProps } from "~/editor/theme/ThemeProvider";
+import { ThemeProvider, ThemeProps } from "@/editor/theme/ThemeProvider";
 
 export type RootProps = DefaultRootProps &
   ThemeProps & {
diff --git a/editor/config/types.ts b/editor/config/types.ts
index 3b2a80f..c5c26d0 100644
--- a/editor/config/types.ts
+++ b/editor/config/types.ts
@@ -1,25 +1,25 @@
 import { Config, Data } from "@reacteditor/core";
 
-import { HeroProps } from "~/editor/components/hero/hero.editor";
-import { LogosProps } from "~/editor/components/logos/logos.editor";
-import { FeaturesProps } from "~/editor/components/features/features.editor";
-import { TestimonialsProps } from "~/editor/components/testimonials/testimonials.editor";
-import { CTAProps } from "~/editor/components/cta/cta.editor";
-import { FAQProps } from "~/editor/components/faq/faq.editor";
-import { NavigationProps } from "~/editor/components/navigation/navigation.editor";
-import { FooterProps } from "~/editor/components/footer/footer.editor";
+import { HeroProps } from "@/editor/components/hero/hero.editor";
+import { LogosProps } from "@/editor/components/logos/logos.editor";
+import { FeaturesProps } from "@/editor/components/features/features.editor";
+import { TestimonialsProps } from "@/editor/components/testimonials/testimonials.editor";
+import { CTAProps } from "@/editor/components/cta/cta.editor";
+import { FAQProps } from "@/editor/components/faq/faq.editor";
+import { NavigationProps } from "@/editor/components/navigation/navigation.editor";
+import { FooterProps } from "@/editor/components/footer/footer.editor";
 
-import { ProductsGridProps } from "~/editor/components/commerce/products-grid.editor";
-import { ProductsCarouselProps } from "~/editor/components/commerce/products-carousel.editor";
-import { CollectionGridProps } from "~/editor/components/commerce/collection-grid.editor";
-import { CollectionProps } from "~/editor/components/commerce/collection.editor";
-import { ProductDetailsProps } from "~/editor/components/commerce/product-details.editor";
-import { RecommendedProductsProps } from "~/editor/components/commerce/recommended-products.editor";
-import { FeaturedProductProps } from "~/editor/components/commerce/featured-product.editor";
+import { ProductsGridProps } from "@/editor/components/commerce/products-grid.editor";
+import { ProductsCarouselProps } from "@/editor/components/commerce/products-carousel.editor";
+import { CollectionGridProps } from "@/editor/components/commerce/collection-grid.editor";
+import { CollectionProps } from "@/editor/components/commerce/collection.editor";
+import { ProductDetailsProps } from "@/editor/components/commerce/product-details.editor";
+import { RecommendedProductsProps } from "@/editor/components/commerce/recommended-products.editor";
+import { FeaturedProductProps } from "@/editor/components/commerce/featured-product.editor";
 
-import { BannerProps } from "~/editor/components/landing/banner.editor";
-import { NewsletterCtaProps } from "~/editor/components/landing/newsletter-cta.editor";
-import { ImageGalleryProps } from "~/editor/components/landing/image-gallery.editor";
+import { BannerProps } from "@/editor/components/landing/banner.editor";
+import { NewsletterCtaProps } from "@/editor/components/landing/newsletter-cta.editor";
+import { ImageGalleryProps } from "@/editor/components/landing/image-gallery.editor";
 
 import { RootProps } from "./root";
 
diff --git a/editor/contexts/shopify-context.tsx b/editor/contexts/shopify-context.tsx
index 880fd25..66c7f61 100644
--- a/editor/contexts/shopify-context.tsx
+++ b/editor/contexts/shopify-context.tsx
@@ -7,8 +7,8 @@ import {
   addCartLines,
   removeCartLines,
   updateCartLines,
-} from '~/editor/hooks/use-shopify-cart';
-import { setShopifyCredentials } from '~/editor/services/shopify/client';
+} from '@/editor/hooks/use-shopify-cart';
+import { setShopifyCredentials } from '@/editor/services/shopify/client';
 
 const CART_ID_KEY = 'cartId';
 
diff --git a/editor/hooks/use-shopify-cart.ts b/editor/hooks/use-shopify-cart.ts
index a210f20..382e640 100644
--- a/editor/hooks/use-shopify-cart.ts
+++ b/editor/hooks/use-shopify-cart.ts
@@ -1,15 +1,15 @@
 'use client';
 
 import { useContext } from 'react';
-import { shopifyFetch, SHOPIFY_STORE_DOMAIN } from '~/editor/services/shopify/client';
-import { CartContext } from '~/editor/contexts/shopify-context';
+import { shopifyFetch, SHOPIFY_STORE_DOMAIN } from '@/editor/services/shopify/client';
+import { CartContext } from '@/editor/contexts/shopify-context';
 import {
   CREATE_CART_MUTATION,
   ADD_CART_LINES_MUTATION,
   UPDATE_CART_LINES_MUTATION,
   REMOVE_CART_LINES_MUTATION,
   GET_CART_QUERY,
-} from '~/editor/graphql/cart';
+} from '@/editor/graphql/cart';
 
 export interface CartLineInput {
   merchandiseId: string;
diff --git a/editor/hooks/use-shopify-collections.ts b/editor/hooks/use-shopify-collections.ts
index 964b468..f83989f 100644
--- a/editor/hooks/use-shopify-collections.ts
+++ b/editor/hooks/use-shopify-collections.ts
@@ -1,11 +1,11 @@
 'use client';
 
 import { useState, useEffect, useCallback } from 'react';
-import { shopifyFetch } from '~/editor/services/shopify/client';
+import { shopifyFetch } from '@/editor/services/shopify/client';
 import {
   GET_COLLECTIONS_QUERY,
   GET_COLLECTION_PRODUCTS_QUERY,
-} from '~/editor/graphql/collections';
+} from '@/editor/graphql/collections';
 import type { Product } from './use-shopify-products';
 
 interface CollectionImage {
diff --git a/editor/hooks/use-shopify-products.ts b/editor/hooks/use-shopify-products.ts
index 94b1432..cfbf37a 100644
--- a/editor/hooks/use-shopify-products.ts
+++ b/editor/hooks/use-shopify-products.ts
@@ -1,12 +1,12 @@
 'use client';
 
 import { useState, useEffect, useCallback } from 'react';
-import { shopifyFetch } from '~/editor/services/shopify/client';
+import { shopifyFetch } from '@/editor/services/shopify/client';
 import {
   GET_PRODUCTS_QUERY,
   GET_PRODUCT_QUERY,
   QUERY_PRODUCT_RECOMMENDATIONS,
-} from '~/editor/graphql/products';
+} from '@/editor/graphql/products';
 
 interface ProductImage {
   url: string;
diff --git a/editor/theme/Typography.tsx b/editor/theme/Typography.tsx
index c3f13c6..7751fb3 100644
--- a/editor/theme/Typography.tsx
+++ b/editor/theme/Typography.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cn } from "~/editor/lib/utils";
+import { cn } from "@/editor/lib/utils";
 
 export type TypographyVariant =
   | "h1"