@okendo/shopify-hydrogen 2.3.1 → 2.4.0

package/README.md

@@ -2,7 +2,7 @@
 
 # Okendo Hydrogen 2 (Remix) React Components
 
-This package brings [Okendo's review widgets](https://www.okendo.io/blog/widget-plus/) to a Shopify Hydrogen store.
+This package brings [Okendo's review widgets](https://www.okendo.io/blog/widget-plus/) and [Loyalty widgets](https://okendo.io/loyalty/) to a Shopify Hydrogen store.
 
 ## Requirements
 
@@ -44,6 +44,8 @@ Follow the instructions on [this page](https://help.shopify.com/en/manual/apps/a
 
 #### Using Curl
 
+> Note: The settings metafields exist within the Okendo App's Reserved Namespace. To access these metafields we need to include the Okendo App ID (`app--1576377`) as a prefix in the `namespace` field.
+
 Open a new terminal or PowerShell window, then:
 
 1. Run the following command to expose the `widget_pre_render_style_tags` shop metafield:
@@ -55,22 +57,22 @@ https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "WidgetPreRenderStyleTags"
-      namespace: "$app:reviews"
-      key: "widget_pre_render_style_tags"
-      type: "multi_line_text_field"
-      ownerType: SHOP
-      access: {
-        admin: PUBLIC_READ
-        storefront: PUBLIC_READ
-      }
-    }
-  ) {
-    createdDefinition { id name }
-    userErrors { field message code }
-  }
+	metafieldDefinitionCreate(
+		definition: {
+			name: "WidgetPreRenderStyleTags"
+            namespace: "app--1576377--reviews"
+			key: "widget_pre_render_style_tags"
+			type: "multi_line_text_field"
+			ownerType: SHOP
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
+		}
+	) {
+		createdDefinition { id name }
+		userErrors { field message code }
+	}
 }
 '
 ```
@@ -84,22 +86,22 @@ https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "WidgetPreRenderBodyStyleTags"
-      namespace: "$app:reviews"
-      key: "widget_pre_render_body_style_tags"
-      type: "multi_line_text_field"
-      ownerType: SHOP
-      access: {
-        admin: PUBLIC_READ
-        storefront: PUBLIC_READ
-      }
-    }
-  ) {
-    createdDefinition { id name }
-    userErrors { field message code }
-  }
+	metafieldDefinitionCreate(
+		definition: {
+			name: "WidgetPreRenderBodyStyleTags"
+            namespace: "app--1576377--reviews"
+			key: "widget_pre_render_body_style_tags"
+			type: "multi_line_text_field"
+			ownerType: SHOP
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
+		}
+	) {
+		createdDefinition { id name }
+		userErrors { field message code }
+	}
 }
 '
 ```
@@ -113,22 +115,22 @@ https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "ReviewsWidgetSnippet"
-      namespace: "$app:reviews"
-      key: "reviews_widget_snippet"
-      type: "multi_line_text_field"
-      ownerType: PRODUCT
-      access: {
-        admin: PUBLIC_READ
-        storefront: PUBLIC_READ
-      }
-    }
-  ) {
-    createdDefinition { id name }
-    userErrors { field message code }
-  }
+	metafieldDefinitionCreate(
+		definition: {
+			name: "ReviewsWidgetSnippet"
+			namespace: "app--1576377--reviews"
+			key: "reviews_widget_snippet"
+			type: "multi_line_text_field"
+			ownerType: PRODUCT
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
+		}
+	) {
+		createdDefinition { id name }
+		userErrors { field message code }
+	}
 }
 '
 ```
@@ -142,22 +144,22 @@ https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "StarRatingSnippet"
-      namespace: "$app:reviews"
-      key: "star_rating_snippet"
-      type: "multi_line_text_field"
-      ownerType: PRODUCT
-      access: {
-        admin: PUBLIC_READ
-        storefront: PUBLIC_READ
-      }
-    }
-  ) {
-    createdDefinition { id name }
-    userErrors { field message code }
-  }
+	metafieldDefinitionCreate(
+		definition: {
+			name: "StarRatingSnippet"
+			namespace: "app--1576377--reviews"
+			key: "star_rating_snippet"
+			type: "multi_line_text_field"
+			ownerType: PRODUCT
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
+		}
+	) {
+		createdDefinition { id name }
+		userErrors { field message code }
+	}
 }
 '
 ```
@@ -171,22 +173,22 @@ https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "ReviewCount"
-      namespace: "$app:reviews"
-      key: "review_count"
-      type: "number_integer"
-      ownerType: PRODUCT
-      access: {
-        admin: PUBLIC_READ
-        storefront: PUBLIC_READ
-      }
-    }
-  ) {
-    createdDefinition { id name }
-    userErrors { field message code }
-  }
+	metafieldDefinitionCreate(
+		definition: {
+			name: "ReviewCount"
+			namespace: "app--1576377--reviews"
+			key: "review_count"
+			type: "number_integer"
+			ownerType: PRODUCT
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
+		}
+	) {
+		createdDefinition { id name }
+		userErrors { field message code }
+	}
 }
 '
 ```
@@ -200,22 +202,22 @@ https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "AverageRating"
-      namespace: "$app:reviews"
-      key: "average_rating"
-      type: "rating"
-      ownerType: PRODUCT
-      access: {
-        admin: PUBLIC_READ
-        storefront: PUBLIC_READ
-      }
-    }
-  ) {
-    createdDefinition { id name }
-    userErrors { field message code }
-  }
+	metafieldDefinitionCreate(
+		definition: {
+			name: "AverageRating"
+			namespace: "app--1576377--reviews"
+			key: "average_rating"
+			type: "rating"
+			ownerType: PRODUCT
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
+		}
+	) {
+		createdDefinition { id name }
+		userErrors { field message code }
+	}
 }
 '
 ```
@@ -231,26 +233,29 @@ Open your GraphQL IDE (such as Postman) and make `POST` requests with the follow
 
 ```graphql
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "WidgetPreRenderStyleTags"
-      namespace: "$app:reviews"
-      key: "widget_pre_render_style_tags"
-      type: "multi_line_text_field"
-      ownerType: SHOP
-      access: { admin: PUBLIC_READ, storefront: PUBLIC_READ }
-    }
-  ) {
-    createdDefinition {
-      id
-      name
-    }
-    userErrors {
-      field
-      message
-      code
-    }
-  }
+	metafieldDefinitionCreate(
+		definition: {
+			name: "WidgetPreRenderStyleTags"
+			namespace: "app--1576377--reviews"
+			key: "widget_pre_render_style_tags"
+			type: "multi_line_text_field"
+			ownerType: SHOP
+            access: {
+                admin: PUBLIC_READ,
+                storefront: PUBLIC_READ
+            }
+		}
+	) {
+		createdDefinition {
+			id
+			name
+		}
+		userErrors {
+			field
+			message
+			code
+		}
+	}
 }
 ```
 
@@ -258,26 +263,29 @@ mutation {
 
 ```graphql
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "WidgetPreRenderBodyStyleTags"
-      namespace: "$app:reviews"
-      key: "widget_pre_render_body_style_tags"
-      type: "multi_line_text_field"
-      ownerType: SHOP
-      access: { admin: PUBLIC_READ, storefront: PUBLIC_READ }
-    }
-  ) {
-    createdDefinition {
-      id
-      name
-    }
-    userErrors {
-      field
-      message
-      code
-    }
-  }
+	metafieldDefinitionCreate(
+		definition: {
+			name: "WidgetPreRenderBodyStyleTags"
+			namespace: "app--1576377--reviews"
+			key: "widget_pre_render_body_style_tags"
+			type: "multi_line_text_field"
+			ownerType: SHOP
+            access: {
+                admin: PUBLIC_READ,
+                storefront: PUBLIC_READ
+            }
+		}
+	) {
+		createdDefinition {
+			id
+			name
+		}
+		userErrors {
+			field
+			message
+			code
+		}
+	}
 }
 ```
 
@@ -285,26 +293,29 @@ mutation {
 
 ```graphql
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "ReviewsWidgetSnippet"
-      namespace: "$app:reviews"
-      key: "reviews_widget_snippet"
-      type: "multi_line_text_field"
-      ownerType: PRODUCT
-      access: { admin: PUBLIC_READ, storefront: PUBLIC_READ }
-    }
-  ) {
-    createdDefinition {
-      id
-      name
-    }
-    userErrors {
-      field
-      message
-      code
-    }
-  }
+	metafieldDefinitionCreate(
+		definition: {
+			name: "ReviewsWidgetSnippet"
+			namespace: "app--1576377--reviews"
+			key: "reviews_widget_snippet"
+			type: "multi_line_text_field"
+			ownerType: PRODUCT
+            access: {
+                admin: PUBLIC_READ,
+                storefront: PUBLIC_READ
+            }
+		}
+	) {
+		createdDefinition {
+			id
+			name
+		}
+		userErrors {
+			field
+			message
+			code
+		}
+	}
 }
 ```
 
@@ -312,26 +323,29 @@ mutation {
 
 ```graphql
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "StarRatingSnippet"
-      namespace: "$app:reviews"
-      key: "star_rating_snippet"
-      type: "multi_line_text_field"
-      ownerType: PRODUCT
-      access: { admin: PUBLIC_READ, storefront: PUBLIC_READ }
-    }
-  ) {
-    createdDefinition {
-      id
-      name
-    }
-    userErrors {
-      field
-      message
-      code
-    }
-  }
+	metafieldDefinitionCreate(
+		definition: {
+			name: "StarRatingSnippet"
+			namespace: "app--1576377--reviews"
+			key: "star_rating_snippet"
+			type: "multi_line_text_field"
+			ownerType: PRODUCT
+            access: {
+                admin: PUBLIC_READ,
+                storefront: PUBLIC_READ
+            }
+		}
+	) {
+		createdDefinition {
+			id
+			name
+		}
+		userErrors {
+			field
+			message
+			code
+		}
+	}
 }
 ```
 
@@ -339,26 +353,29 @@ mutation {
 
 ```graphql
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "ReviewCount"
-      namespace: "$app:reviews"
-      key: "review_count"
-      type: "number_integer"
-      ownerType: PRODUCT
-      access: { admin: PUBLIC_READ, storefront: PUBLIC_READ }
-    }
-  ) {
-    createdDefinition {
-      id
-      name
-    }
-    userErrors {
-      field
-      message
-      code
-    }
-  }
+	metafieldDefinitionCreate(
+		definition: {
+			name: "ReviewCount"
+			namespace: "app--1576377--reviews"
+			key: "review_count"
+			type: "number_integer"
+			ownerType: PRODUCT
+            access: {
+                admin: PUBLIC_READ,
+                storefront: PUBLIC_READ
+            }
+		}
+	) {
+		createdDefinition {
+			id
+			name
+		}
+		userErrors {
+			field
+			message
+			code
+		}
+	}
 }
 ```
 
@@ -366,26 +383,29 @@ mutation {
 
 ```graphql
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "AverageRating"
-      namespace: "$app:reviews"
-      key: "average_rating"
-      type: "rating"
-      ownerType: PRODUCT
-      access: { admin: PUBLIC_READ, storefront: PUBLIC_READ }
-    }
-  ) {
-    createdDefinition {
-      id
-      name
-    }
-    userErrors {
-      field
-      message
-      code
-    }
-  }
+	metafieldDefinitionCreate(
+		definition: {
+			name: "AverageRating"
+			namespace: "app--1576377--reviews"
+			key: "average_rating"
+			type: "rating"
+			ownerType: PRODUCT
+            access: {
+                admin: PUBLIC_READ,
+                storefront: PUBLIC_READ
+            }
+		}
+	) {
+		createdDefinition {
+			id
+			name
+		}
+		userErrors {
+			field
+			message
+			code
+		}
+	}
 }
 ```
 
@@ -444,8 +464,8 @@ Open `app/root.tsx` and add the following import:
 
 ```ts
 import {
-  OkendoProvider,
-  getOkendoProviderData,
+	OkendoProvider,
+	getOkendoProviderData,
 } from '@okendo/shopify-hydrogen';
 ```
 
@@ -458,10 +478,10 @@ return defer({
   // ...
   okendoProviderData:
     /* place `await` here if you want server-rendered widgets */ getOkendoProviderData(
-      {
+	{
         context: args.context,
         subscriberId: '<your-okendo-subscriber-id>',
-      },
+	},
     ),
 });
 ```
@@ -470,10 +490,10 @@ Locate the `Layout` component, add the `meta` tag `oke:subscriber_id` to `head`,
 
 ```tsx
 <head>
-  <meta charSet="utf-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <meta name="oke:subscriber_id" content="<your-okendo-subscriber-id>" />
-  ...
+	<meta charSet="utf-8" />
+	<meta name="viewport" content="width=device-width,initial-scale=1" />
+	<meta name="oke:subscriber_id" content="<your-okendo-subscriber-id>" />
+	...
 </head>
 ```
 
@@ -487,10 +507,10 @@ Append `OkendoProvider` to `body`, and pass it the promise — or the data — r
         cart={data.cart}
         shop={data.shop}
         consent={data.consent}
-      >
+	>
         <PageLayout {...data}>{children}</PageLayout>
       </Analytics.Provider>
-    </OkendoProvider>
+	</OkendoProvider>
   ) : (
     children
   )}
@@ -512,8 +532,8 @@ const { nonce, header, NonceProvider } = createContentSecurityPolicy({
     checkoutDomain: context.env.PUBLIC_CHECKOUT_DOMAIN,
     storeDomain: context.env.PUBLIC_STORE_DOMAIN,
   },
-  defaultSrc: [
-    "'self'",
+    defaultSrc: [
+      "'self'",
     'localhost:*',
     'https://cdn.shopify.com',
     'https://www.google.com',
@@ -525,9 +545,9 @@ const { nonce, header, NonceProvider } = createContentSecurityPolicy({
     'https://surveys.okendo.io',
     'https://api.okendo.io',
     'data:',
-  ],
-  imgSrc: [
-    "'self'",
+    ],
+    imgSrc: [
+      "'self'",
     'https://cdn.shopify.com',
     'data:',
     'https://d3hw6dc1ow8pp2.cloudfront.net',
@@ -535,26 +555,26 @@ const { nonce, header, NonceProvider } = createContentSecurityPolicy({
     'https://dov7r31oq5dkj.cloudfront.net',
     'https://cdn-static.okendo.io',
     'https://surveys.okendo.io',
-  ],
-  mediaSrc: [
-    "'self'",
+    ],
+    mediaSrc: [
+      "'self'",
     'https://d3hw6dc1ow8pp2.cloudfront.net',
     'https://d3g5hqndtiniji.cloudfront.net',
     'https://dov7r31oq5dkj.cloudfront.net',
     'https://cdn-static.okendo.io',
-  ],
+    ],
   styleSrc: [
-    "'self'",
-    "'unsafe-inline'",
+      "'self'",
+      "'unsafe-inline'",
     'https://cdn.shopify.com',
     'https://fonts.googleapis.com',
     'https://fonts.gstatic.com',
     'https://d3hw6dc1ow8pp2.cloudfront.net',
     'https://cdn-static.okendo.io',
     'https://surveys.okendo.io',
-  ],
-  scriptSrc: [
-    "'self'",
+    ],
+    scriptSrc: [
+      "'self'",
     'https://cdn.shopify.com',
     'https://d3hw6dc1ow8pp2.cloudfront.net',
     'https://dov7r31oq5dkj.cloudfront.net',
@@ -563,18 +583,18 @@ const { nonce, header, NonceProvider } = createContentSecurityPolicy({
     'https://api.okendo.io',
     'https://www.google.com',
     'https://www.gstatic.com',
-  ],
-  fontSrc: [
-    "'self'",
+    ],
+    fontSrc: [
+      "'self'",
     'https://fonts.gstatic.com',
     'https://d3hw6dc1ow8pp2.cloudfront.net',
     'https://dov7r31oq5dkj.cloudfront.net',
     'https://cdn.shopify.com',
     'https://cdn-static.okendo.io',
     'https://surveys.okendo.io',
-  ],
-  connectSrc: [
-    "'self'",
+    ],
+    connectSrc: [
+      "'self'",
     'https://monorail-edge.shopifysvc.com',
     'localhost:*',
     'ws://localhost:*',
@@ -585,7 +605,7 @@ const { nonce, header, NonceProvider } = createContentSecurityPolicy({
     'https://api.raygun.com',
     'https://www.google.com',
     'https://www.gstatic.com',
-  ],
+    ],
   frameSrc: ['https://www.google.com', 'https://www.gstatic.com'],
 });
 ```
@@ -602,14 +622,14 @@ Add the following block just before the `RECOMMENDED_PRODUCTS_QUERY` GraphQL que
 
 ```ts
 const OKENDO_PRODUCT_STAR_RATING_FRAGMENT = `#graphql
-  fragment OkendoStarRatingSnippet on Product {
-    okendoStarRatingSnippet: metafield(
-      namespace: "$app:reviews"
-      key: "star_rating_snippet"
-    ) {
-      value
-    }
-  }
+	fragment OkendoStarRatingSnippet on Product {
+		okendoStarRatingSnippet: metafield(
+            namespace: "app--1576377--reviews"
+            key: "star_rating_snippet"
+		) {
+			value
+		}
+	}
 ` as const;
 ```
 
@@ -617,36 +637,36 @@ Then append `${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}` and `...OkendoStarRatingSni
 
 ```ts
 const RECOMMENDED_PRODUCTS_QUERY = `#graphql
-  ${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}
-  fragment RecommendedProduct on Product {
-    id
-    title
-    handle
-    priceRange {
-      minVariantPrice {
-        amount
-        currencyCode
-      }
-    }
-    images(first: 1) {
-      nodes {
-        id
-        url
-        altText
-        width
-        height
-      }
-    }
-    ...OkendoStarRatingSnippet
-  }
-  query RecommendedProducts ($country: CountryCode, $language: LanguageCode)
-    @inContext(country: $country, language: $language) {
-    products(first: 4, sortKey: UPDATED_AT, reverse: true) {
-      nodes {
-        ...RecommendedProduct
-      }
-    }
-  }
+	${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}
+	fragment RecommendedProduct on Product {
+		id
+		title
+		handle
+		priceRange {
+			minVariantPrice {
+				amount
+				currencyCode
+			}
+		}
+		images(first: 1) {
+			nodes {
+				id
+				url
+				altText
+				width
+				height
+			}
+		}
+		...OkendoStarRatingSnippet
+	}
+	query RecommendedProducts ($country: CountryCode, $language: LanguageCode)
+		@inContext(country: $country, language: $language) {
+		products(first: 4, sortKey: UPDATED_AT, reverse: true) {
+			nodes {
+				...RecommendedProduct
+			}
+		}
+	}
 ` as const;
 ```
 
@@ -656,17 +676,17 @@ Add `OkendoStarRating` to the `RecommendedProducts` component — for instance,
 
 ```tsx
 <Image
-  data={product.images.nodes[0]}
-  aspectRatio="1/1"
-  sizes="(min-width: 45em) 20vw, 50vw"
+	data={product.images.nodes[0]}
+	aspectRatio="1/1"
+	sizes="(min-width: 45em) 20vw, 50vw"
 />
 <h4>{product.title}</h4>
 <OkendoStarRating
-  productId={product.id}
-  okendoStarRatingSnippet={product.okendoStarRatingSnippet}
+	productId={product.id}
+	okendoStarRatingSnippet={product.okendoStarRatingSnippet}
 />
 <small>
-  <Money data={product.priceRange.minVariantPrice} />
+	<Money data={product.priceRange.minVariantPrice} />
 </small>
 ```
 
@@ -690,25 +710,25 @@ Add the following block just before the `PRODUCT_FRAGMENT` GraphQL query:
 
 ```ts
 const OKENDO_PRODUCT_STAR_RATING_FRAGMENT = `#graphql
-  fragment OkendoStarRatingSnippet on Product {
-    okendoStarRatingSnippet: metafield(
-      namespace: "$app:reviews"
-      key: "star_rating_snippet"
-    ) {
-      value
-    }
-  }
+	fragment OkendoStarRatingSnippet on Product {
+		okendoStarRatingSnippet: metafield(
+            namespace: "app--1576377--reviews"
+            key: "star_rating_snippet"
+		) {
+			value
+		}
+	}
 ` as const;
 
 const OKENDO_PRODUCT_REVIEWS_FRAGMENT = `#graphql
-  fragment OkendoReviewsSnippet on Product {
-    okendoReviewsSnippet: metafield(
-      namespace: "$app:reviews"
-      key: "reviews_widget_snippet"
-    ) {
-      value
-    }
-  }
+	fragment OkendoReviewsSnippet on Product {
+		okendoReviewsSnippet: metafield(
+            namespace: "app--1576377--reviews"
+            key: "reviews_widget_snippet"
+		) {
+			value
+		}
+	}
 ` as const;
 ```
 
@@ -716,35 +736,35 @@ Then append `${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}`, `${OKENDO_PRODUCT_REVIEWS_
 
 ```ts
 const PRODUCT_FRAGMENT = `#graphql
-  ${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}
-  ${OKENDO_PRODUCT_REVIEWS_FRAGMENT}
-  fragment Product on Product {
-    id
-    title
-    vendor
-    handle
-    descriptionHtml
-    description
-    options {
-      name
-      values
-    }
-    selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions) {
-      ...ProductVariant
-    }
-    variants(first: 1) {
-      nodes {
-        ...ProductVariant
-      }
-    }
-    seo {
-      description
-      title
-    }
-    ...OkendoStarRatingSnippet
-    ...OkendoReviewsSnippet
-  }
-  ${PRODUCT_VARIANT_FRAGMENT}
+	${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}
+	${OKENDO_PRODUCT_REVIEWS_FRAGMENT}
+	fragment Product on Product {
+		id
+		title
+		vendor
+		handle
+		descriptionHtml
+		description
+		options {
+			name
+			values
+		}
+		selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions) {
+			...ProductVariant
+		}
+		variants(first: 1) {
+			nodes {
+				...ProductVariant
+			}
+		}
+		seo {
+			description
+			title
+		}
+		...OkendoStarRatingSnippet
+		...OkendoReviewsSnippet
+	}
+	${PRODUCT_VARIANT_FRAGMENT}
 ` as const;
 ```
 
@@ -754,27 +774,27 @@ Add `OkendoStarRating` and `OkendoReviews` to the `Product` component:
 
 ```tsx
 <>
-  <div className="product">
-    <ProductImage image={selectedVariant?.image} />
+	<div className="product">
+		<ProductImage image={selectedVariant?.image} />
     <div className="product-main">
       <h1>{title}</h1>
       <OkendoStarRating
         productId={product.id}
         okendoStarRatingSnippet={product.okendoStarRatingSnippet}
-      />
+		/>
       <ProductPrice
         price={selectedVariant?.price}
         compareAtPrice={selectedVariant?.compareAtPrice}
       />
       ...
-    </div>
+	</div>
     ...
   </div>
 
-  <OkendoReviews
-    productId={product.id}
-    okendoReviewsSnippet={product.okendoReviewsSnippet}
-  />
+	<OkendoReviews
+		productId={product.id}
+		okendoReviewsSnippet={product.okendoReviewsSnippet}
+	/>
 </>
 ```
 
@@ -795,7 +815,7 @@ import { type MetaFunction } from '@remix-run/react';
 import { OkendoReviews } from '@okendo/shopify-hydrogen';
 
 export const meta: MetaFunction = () => {
-  return [{ title: `Hydrogen | Okendo All Reviews` }];
+  return [{title: `Hydrogen | Okendo All Reviews`}];
 };
 
 export default function ReviewsPage() {
@@ -807,3 +827,72 @@ export default function ReviewsPage() {
   );
 }
 ```
+
+### Okendo Reviews Carousel Widget - Client Side Only
+If you would like to include a copy of the Okendo Reviews Carousel Widget which displays reviews by product or group for a given store (to be used on a homepage or featured page for example), please add the `OkendoReviewsCarouselWidget` with or without the the `productId` or `groupId`.
+
+Please note the all reviews widget loads on the client not the server.
+
+```tsx
+import { type MetaFunction } from '@remix-run/react';
+import { OkendoReviews } from '@okendo/shopify-hydrogen';
+
+export const meta: MetaFunction = () => {
+  return [{title: `Hydrogen | Okendo Reviews Carousel`}];
+};
+
+export default function AFeaturedPage() {
+  return (
+    <div className="all-reviews">
+      <h1>Reviews Carousel Widget</h1>
+      <OkendoReviewsCarousel 
+	      productId={product.id}
+	  />
+    </div>
+  );
+}
+```
+
+# Loyalty Widgets
+## Installation
+To include Loyalty Widgets in your Shopify Hydrogen store, you will need to make the following changes:
+
+1. Add `customerAccessToken: await args.context.customerAccount.getAccessToken(),` to your `loader` function, this will be used to log your customer into the Loyalty App.
+
+2. Add `okendoProducts: ['reviews', 'loyalty'],` as a property to `getOkendoProviderData` in your `loader` function, alongside the existing `context` and `subscriberId` arguments.
+
+> Note: If you only wish to use the Loyalty product and not reviews then simply leave out the `'reviews'` from the array like so: `okendoProducts: ['loyalty'],`.
+
+The relevant section should now look something like this:
+```ts
+return defer({
+  // ...
+  customerAccessToken: await args.context.customerAccount.getAccessToken(),
+  okendoProviderData:
+    getOkendoProviderData(
+	{
+        context: args.context,
+        subscriberId: '<your-okendo-subscriber-id>',
+        okendoProducts: ['reviews', 'loyalty'],
+	},
+    ),
+});
+```
+
+3. Add `customerAccessToken={data.customerAccessToken}` to the `OkendoProvider` component, it should now look like:
+```ts
+<OkendoProvider
+    nonce={nonce}
+    okendoProviderData={data.okendoProviderData}
+    customerAccessToken={data.customerAccessToken}
+>
+    ...
+</OkendoProvider>
+```
+
+If your Okendo Loyalty Settings are [correctly set up](https://support.okendo.io/en/collections/8270193-okendo-loyalty) and your program has launched, the Loyalty Floating Widget will now appear on your store.
+
+## Dedicated Loyalty Page
+Add `<OkendoLoyaltyEmbeddedWidget />` to any components/pages where you wish to have the Dedicated Loyalty Page appear.
+
+*Make sure you are importing the component from the `okendo-shopify-hydrogen` package: `import {OkendoLoyaltyEmbeddedWidget} from '@okendo/shopify-hydrogen';`*