docs: add bloom emails (#14895)

shahednasser · web-flow · commit f549a9af2f00 · 2026-04-10T16:40:31.000+03:00
diff --git a/www/apps/bloom/app/developers/email-templates/page.mdx b/www/apps/bloom/app/developers/email-templates/page.mdx
@@ -315,7 +315,12 @@ This template component uses React Email components to structure the email and a
 
 If you're using the [Code Editor](../code-editor/page.mdx) feature, save the template's file to commit it to the GitHub repository of the project. If you've [exported your project to GitHub](../export-to-github/page.mdx) and you created the template locally, make sure to push it to GitHub.
 
-Then, in your Bloom project's interface, click on <InProductAction product={"bloom"} type={"MEDUSA_AI_OPEN_PANE"} data={{ pane: "emails" }}>**Emails**</InProductAction> at the top of the preview. This will open the email previewer where you can switch between your email templates and see how they look with demo data.
+Then, in your Bloom project's interface, open your <InProductAction product={"bloom"} type={"MEDUSA_AI_OPEN_PANE"} data={{ pane: "emails" }}>**Emails**</InProductAction> tab:
+
+1. Press <Kbd>{getOsShortcut()}</Kbd> + <Kbd>k</Kbd> to open the preview tab switcher.
+2. Select the "Emails" tab from the list.
+
+This will open the email previewer where you can view your email template and see how it looks on desktop and mobile.
 
 {/* TODO: add screenshot */}
 
diff --git a/www/apps/bloom/app/features/emails/page.mdx b/www/apps/bloom/app/features/emails/page.mdx
@@ -23,7 +23,7 @@ When you publish your store, Bloom automatically sends the emails to customers b
 
 <Note>
 
-Emails only send from your live store. You can only send test emails in preview mode.
+Emails only send from your live store. You can only send test emails in preview mode to yourself or anyone in your [team](../../organization-management/team/page.mdx).
 
 </Note>
 
@@ -51,13 +51,16 @@ To open the <InProductAction product={"bloom"} type={"MEDUSA_AI_OPEN_PANE"} data
 1. Press <Kbd>{getOsShortcut()}</Kbd> + <Kbd>k</Kbd> to open the preview tab switcher.
 2. Select the "Emails" tab from the list.
 
-This will open the email preview where you can switch between email templates, see how they look on desktop and mobile, and make changes to the design and content.
+This will open the email preview where you can:
+
+1. Switch between email templates, see how they look on desktop and mobile, and make changes to the design and content.
+2. Copy prompts for common email templates to ask Bloom to create them for you.
 
 ### Choose Email Template
 
-To choose which email template to preview, use the dropdown at the top right of the preview. This dropdown lists all the email templates Bloom has created for your store.
+If you have email templates, you can preview them at the left side of the Emails tab.
 
-Once you choose a template, a preview of the template will show in the main area.
+Clicking the template will preview its content in the main area on the right.
 
 {/* TODO: Screenshot of template dropdown */}
 
@@ -100,22 +103,21 @@ hard to click. Can you make the text bigger and the buttons larger on mobile?
 
 Bloom will see the issue from the screenshot and update the template to fix the mobile design.
 
-### Send Test Emails
+---
 
-After previewing the email template and making any necessary changes, you can send a test email to yourself to see how it looks in your inbox. This is necessary to see how the email realistically looks to customers and to check that all links and images work correctly.
+## Start Sending Emails
 
-To send a test email:
+Once you're done building your email templates with Bloom, you can test them in preview mode before publishing them to your live store.
 
-1. In the Email preview, click the "Test" button at the top right.
-2. Enter your email address when prompted and click "Send Test".
+### Send Test Emails
 
-Bloom will send a test email to your inbox so you can see how it looks in your email app. If there are any issues with the email, take a screenshot and ask Bloom to fix them.
+To send a test email, simulate the flow that triggers the email in preview mode. You can only send test emails to yourself or anyone in your [team](../../organization-management/team/page.mdx).
 
----
+For example, if you created an order confirmation email, you can try placing an order in preview mode using your email address. This will trigger the order confirmation email to be sent to you as a test.
 
-## Send Emails to Customers
+### Publish Email Templates
 
-Once you're done building your email templates with Bloom, you need to publish the changes to your live store for customers to start receiving the emails.
+Once you're satisfied with your email templates and have tested them, you need to publish the changes to your live store for customers and admin users to start receiving the emails.
 
 To publish the changes, click the "Publish" button at the top right of the preview and confirm publishing.
 
diff --git a/www/apps/bloom/app/going-live/page.mdx b/www/apps/bloom/app/going-live/page.mdx
@@ -93,15 +93,15 @@ Ask Bloom to integrate Stripe for payments, Klaviyo for email marketing, Slack f
 
 See the [Integrations](../features/integrations/page.mdx) guide for instructions on integrating services with Bloom.
 
-{/* ### 1.6. Set Up Transactional Emails
+### 1.6. Set Up Transactional Emails
 
 Bloom allows you to design and customize transactional emails that customers receive for important events like order confirmations and shipping notifications.
 
 Before publishing, make sure transactional emails are set up and customized to match your brand. This ensures customers receive professional and branded communications from your store.
 
-See the [Emails](../features/emails/page.mdx) guide for detailed setup instructions. */}
+See the [Emails](../features/emails/page.mdx) guide for detailed setup instructions.
 
-### 1.6. Optimize for Search Engines
+### 1.7. Optimize for Search Engines
 
 Search Engine Optimization (SEO) is crucial for helping customers find your store through search engines like Google. Before publishing, optimize your store's SEO to improve visibility and attract organic traffic.
 
@@ -121,7 +121,7 @@ And more.
 
 You can also upload images and ask Bloom to use them for OpenGraph meta tags, which improve how your store looks when shared on social media.
 
-### 1.7. Test Mobile Experience
+### 1.8. Test Mobile Experience
 
 Most customers shop from their phones, so it's crucial to ensure your store looks and works great on mobile devices before publishing.
 
diff --git a/www/apps/bloom/generated/edit-dates.mjs b/www/apps/bloom/generated/edit-dates.mjs
@@ -41,8 +41,8 @@ export const generatedEditDates = {
   "app/organization-management/team/page.mdx": "2026-02-18T10:24:38.994Z",
   "app/features/team-collaboration/page.mdx": "2026-02-17T14:30:51.065Z",
   "app/preview-tabs/page.mdx": "2026-02-24T08:56:07.482Z",
-  "app/developers/_email-templates/page.mdx": "2026-02-16T15:35:31.906Z",
-  "app/features/_emails/page.mdx": "2026-02-18T13:53:16.758Z",
+  "app/developers/email-templates/page.mdx": "2026-03-16T13:19:23.033Z",
+  "app/features/emails/page.mdx": "2026-03-16T13:10:48.784Z",
   "app/features/integrations/guides/cookiebot/page.mdx": "2026-03-18T08:23:24.558Z",
   "app/features/integrations/guides/klaviyo/page.mdx": "2026-03-18T08:33:25.354Z",
   "app/features/integrations/guides/slack/page.mdx": "2026-03-18T08:33:20.171Z",
diff --git a/www/apps/bloom/generated/sidebar.mjs b/www/apps/bloom/generated/sidebar.mjs
@@ -170,6 +170,14 @@ export const generatedSidebars = [
             "path": "/features/view-switcher",
             "children": []
           },
+          {
+            "loaded": true,
+            "isPathHref": true,
+            "type": "link",
+            "title": "Emails",
+            "path": "/features/emails",
+            "children": []
+          },
           {
             "loaded": true,
             "isPathHref": true,
@@ -373,6 +381,14 @@ export const generatedSidebars = [
         "title": "Environment Variables",
         "path": "/developers/environment-variables",
         "children": []
+      },
+      {
+        "loaded": true,
+        "isPathHref": true,
+        "type": "link",
+        "title": "Email Templates",
+        "path": "/developers/email-templates",
+        "children": []
       }
     ]
   },
diff --git a/www/apps/bloom/sidebars/developers.mjs b/www/apps/bloom/sidebars/developers.mjs
@@ -19,11 +19,11 @@ export const developersSidebar = [
         title: "Environment Variables",
         path: "/developers/environment-variables",
       },
-      // {
-      //   type: "link",
-      //   title: "Email Templates",
-      //   path: "/developers/email-templates",
-      // },
+      {
+        type: "link",
+        title: "Email Templates",
+        path: "/developers/email-templates",
+      },
     ],
   },
 ]
diff --git a/www/apps/bloom/sidebars/features.mjs b/www/apps/bloom/sidebars/features.mjs
@@ -19,11 +19,11 @@ export const featuresSidebar = [
             title: "View Switcher",
             path: "/features/view-switcher",
           },
-          // {
-          //   type: "link",
-          //   title: "Emails",
-          //   path: "/features/emails",
-          // },
+          {
+            type: "link",
+            title: "Emails",
+            path: "/features/emails",
+          },
           {
             type: "link",
             title: "Integrations",
