import { InlineIcon, Table } from "docs-ui" import { LaptopMobile } from "@medusajs/icons"

export const metadata = { title: Responsive View, }

{metadata.title}

Responsive View lets you see how your store looks on mobile devices. Use this feature to check mobile appearance while building and ask Bloom to fix any issues.

Why Check Mobile View?

Most customers shop on their phones, so your store needs to look good and work well on mobile. Checking mobile view manually is tedious as you have to switch devices or resize your browser.

With Responsive View, you can quickly toggle between desktop and mobile views right in the preview. This makes it easy to spot and fix mobile-specific issues without leaving Bloom. You can still use Bloom's features like Selection Mode to target specific elements for mobile fixes.

When to Check Mobile View?

Check mobile view regularly as you build your store, especially after making design changes and adding features. This way you can catch and fix mobile issues early, making sure they also look good on desktop.

Waiting until the end of development to check mobile view can lead to a long list of issues that are harder to fix. Regularly checking mobile view helps you maintain a great experience for all customers, regardless of device.

Switch to Mobile View

To see how your store looks on mobile:

Click the <InlineIcon Icon={LaptopMobile} alt="Device Toggle Icon" /> icon in the preview toolbar.
The preview resizes to show how your store looks on a phone.

Click the desktop icon to return to full-width view.

Review Your Store in Mobile View

Once in mobile view, navigate through your store as a customer would and look for any issues. Pay attention to the following details:

<Table> <Table.Header> <Table.Row> <Table.HeaderCell> Aspect </Table.HeaderCell> <Table.HeaderCell className="w-2/3"> What to Check </Table.HeaderCell> </Table.Row> </Table.Header> <Table.Body> <Table.Row> <Table.Cell> Text </Table.Cell> <Table.Cell> - Are headings readable and not too large? - Is body text not too small? - Is important information visible without zooming? </Table.Cell> </Table.Row> <Table.Row> <Table.Cell> Buttons </Table.Cell> <Table.Cell> - Are buttons large enough to tap easily? - Is the add to cart button prominent on product pages? - Do buttons overlap or get cut off? </Table.Cell> </Table.Row> <Table.Row> <Table.Cell> Images </Table.Cell> <Table.Cell> - Do images fit within the screen without horizontal scrolling? - Are product images clear and not cut off? - Do hero images look good on mobile? </Table.Cell> </Table.Row> <Table.Row> <Table.Cell> Navigation </Table.Cell> <Table.Cell> - Does the menu open and close properly? - Are all links working and easy to tap? - Are cart and search icons accessible? </Table.Cell> </Table.Row> <Table.Row> <Table.Cell> Layout </Table.Cell> <Table.Cell> - Is there any horizontal scrolling? - Do sections have good spacing? - Does content stack properly without overlapping? </Table.Cell> </Table.Row> </Table.Body> </Table>

Make sure to test all key pages in mobile view, including the homepage, product pages, and checkout. Look for any issues that could affect the customer experience or sales.

Ask Bloom to Fix Mobile Issues

Once you identify issues in mobile view, you can ask Bloom to fix them. Provide clear prompts on what to change, mention that the issue is specific to mobile, and provide screenshots if possible. Bloom will adjust the mobile styling while keeping desktop view unchanged.

For example, you can say:

bash

The hero text is too large on mobile, make it smaller

bash

Increase spacing between buttons on mobile

bash

The product images are cut off on mobile, fix them

Once Bloom makes the changes, review both mobile and desktop views to ensure the issue is resolved and works across devices.