diff --git a/starters/shopify-next-tailwind/README.md b/starters/shopify-next-tailwind/README.md
index 327c57c55..bcc51ebda 100644
--- a/starters/shopify-next-tailwind/README.md
+++ b/starters/shopify-next-tailwind/README.md
@@ -98,6 +98,13 @@ git clone https://github.com/thisdot/starter.dev.git
- `pnpm run format` - Formats code for the entire project.
- `pnpm run format.check` - Checks all project code to conform to prettier rules.
+## Shopify Analytics
+
+By default, Shopify Analytics is enabled. There are 2 main options you have to set them in the code from `app/components/ShopifyAnalytics.tsx`:
+
+- `currency` - The currency used in the store. nd by default is set to `USD`.
+- `acceptedLanguages` - The languages accepted by the store. By default is set to `US`.
+
## Demo Implementation
[Live Store](https://shopify-next-tailwind.starter.dev)
diff --git a/starters/shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx b/starters/shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx
new file mode 100644
index 000000000..3d0e9c3db
--- /dev/null
+++ b/starters/shopify-next-tailwind/app/compoents/ShopifyAnalytics.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { useEffect } from 'react';
+import {
+ sendShopifyAnalytics,
+ getClientBrowserParameters,
+ AnalyticsEventName,
+ useShopifyCookies,
+} from '@shopify/hydrogen-react';
+import { CurrencyCode } from '@/lib/useMoney';
+import { LanguageCode } from '@shopify/hydrogen-react/storefront-api-types';
+
+const ANALYTICS_CONFIG: {
+ currency: CurrencyCode;
+ acceptedLanguage: LanguageCode;
+} = {
+ currency: 'USD',
+ acceptedLanguage: 'EN',
+};
+
+export function sendPageView(shopId: string) {
+ sendShopifyAnalytics({
+ eventName: AnalyticsEventName.PAGE_VIEW,
+ payload: {
+ ...getClientBrowserParameters(),
+ hasUserConsent: true,
+ shopId: shopId,
+ currency: ANALYTICS_CONFIG.currency,
+ acceptedLanguage: ANALYTICS_CONFIG.acceptedLanguage,
+ },
+ });
+}
+
+function ShopifyAnalytics({ shopId }: { shopId: string }) {
+ const pathname = usePathname();
+
+ useEffect(() => {
+ sendPageView(shopId);
+ }, [pathname]);
+
+ useShopifyCookies();
+
+ return <>;
+}
+
+export default ShopifyAnalytics;
diff --git a/starters/shopify-next-tailwind/app/layout.tsx b/starters/shopify-next-tailwind/app/layout.tsx
index 51cdca0b4..b8aaf7210 100644
--- a/starters/shopify-next-tailwind/app/layout.tsx
+++ b/starters/shopify-next-tailwind/app/layout.tsx
@@ -7,6 +7,7 @@ import Footer from './compoents/Footer';
import Header from './compoents/Header';
import { cookies } from 'next/headers';
import { Metadata } from 'next';
+import ShopifyAnalytics from './compoents/ShopifyAnalytics';
const inter = Inter({ subsets: ['latin'] });
@@ -27,6 +28,7 @@ export default async function RootLayout({
return (
+
diff --git a/starters/shopify-next-tailwind/lib/shopify/types.ts b/starters/shopify-next-tailwind/lib/shopify/types.ts
index f661772e3..2b68c5a70 100644
--- a/starters/shopify-next-tailwind/lib/shopify/types.ts
+++ b/starters/shopify-next-tailwind/lib/shopify/types.ts
@@ -1,10 +1,12 @@
import { FiltersQueryParams } from '@/app/collections/[collectionHandle]/page';
import { CollectionHero } from '@/components/Hero';
+import { LanguageCode } from '@shopify/hydrogen-react/storefront-api-types';
export type Shop = {
id: string;
name: string;
description: string | null;
+ currencyCode: CurrencyCode;
primaryDomain: {
url: string;
};
@@ -77,6 +79,9 @@ export type ShopifyFooterItem = {
export type ShopifyLayoutOperation = {
data: {
shop: Shop;
+ shopLocales: {
+ locale: LanguageCode;
+ }[];
headerMenu: ShopifyHeaderMenu;
footerMenu: ShopifyFooterMenu;
};
diff --git a/starters/shopify-next-tailwind/package.json b/starters/shopify-next-tailwind/package.json
index 31cd34568..fb4e0b4aa 100644
--- a/starters/shopify-next-tailwind/package.json
+++ b/starters/shopify-next-tailwind/package.json
@@ -28,6 +28,7 @@
"dependencies": {
"@babel/core": "7.22.9",
"@headlessui/react": "1.7.15",
+ "@shopify/hydrogen-react": "^2023.7.4",
"@storybook/addon-styling": "1.3.4",
"@storybook/testing-library": "0.2.0",
"@tailwindcss/forms": "0.5.4",