docs: updates live preview docs

docs/live-preview/overview.mdx

@@ -30,7 +30,9 @@ Here is a basic example of enabling Live Preview on a `pages` collection:
 ```ts
 // payload.config.ts
 {
+  // ...
   admin: {
+    // ...
     livePreview: {
       url: 'http://localhost:3000', // The URL to your front-end, this can also be a function (see below)
       collections: ['pages'], // The collections to enable Live Preview on (globals are also possible)
@@ -39,11 +41,22 @@ Here is a basic example of enabling Live Preview on a `pages` collection:
 }
 ```
 
-Once configured, a new "Live Preview" tab will appear at the top of enabled documents. Navigating to this tab opens the preview window and loads your front-end application.
+Alternatively, you can define the <code>admin.livePreview</code> property on individual collection and global configs. Settings defined here will be merged into the top-level as overrides (if applicable).
 
-<Banner type="info">
-  You can also define the <code>admin.livePreview</code> property on individual collection and global configs. Settings defined here will be merged into the top-level (if defined) as overrides.
-</Banner>
+```ts
+// Collection.ts
+{
+  // ...
+  admin: {
+    // ...
+    livePreview: {
+      url: 'http://localhost:3000',
+    },
+  }
+}
+```
+
+Once configured, a new "Live Preview" tab will appear at the top of enabled documents. Navigating to this tab opens the preview window and loads your front-end application.
 
 ### URL
 
@@ -62,7 +75,9 @@ Here is an example of using a function that returns a dynamic URL:
 ```ts
 // payload.config.ts
 {
+  // ...
   admin: {
+    // ...
     livePreview: {
       url: ({
         data,
@@ -90,6 +105,41 @@ The breakpoints property is an array of objects which are used as “device size
 
 _\* An asterisk denotes that a property is required._
 
+Here is an example of defining breakpoints:
+
+```ts
+// payload.config.ts
+{
+  // ...
+  admin: {
+    // ...
+    livePreview: {
+      url: 'http://localhost:3000',
+      breakpoints: [
+        {
+          label: 'Mobile',
+          name: 'mobile',
+          width: 375,
+          height: 667,
+        },
+        {
+          label: 'Tablet',
+          name: 'tablet',
+          width: 768,
+          height: 1024,
+        },
+        {
+          label: 'Desktop',
+          name: 'desktop',
+          width: 1440,
+          height: 900,
+        },
+      ],
+    },
+  }
+}
+```
+
 {/* IMAGE OF TOOLBAR HERE */}
 
 The "Responsive" option is always available in the drop-down and requires no additional configuration. This is the default breakpoint that will be used on initial load. This option styles the iframe with a width and height of `100%` so that it fills the screen at its maximum size and automatically resizes as the window changes size.
@@ -97,3 +147,7 @@ The "Responsive" option is always available in the drop-down and requires no add
 You may also explicitly resize the Live Preview by using the corresponding inputs in the toolbar. This will temporarily override the breakpoint selection to "Custom" until a predefined breakpoint is selected once again.
 
 If you prefer to freely resize the Live Preview without the use of breakpoints, you can open it in a new window by clicking the button in the toolbar. This will close the iframe and open a new window which can be resized as you wish. Closing it will automatically re-open the iframe.
+
+## Example
+
+For a working demonstration of this, check out the official [Live Preview Example](https://github.com/payloadcms/payload/tree/main/examples/live-preview/payload).