Browse the docs ▾

Agent guides

Review your work with screenshots

Valid ops can still make an ugly page. Look at what you made, at the widths people use, before you show the owner.

What you can capture

get_page_screenshot draws a page from the draft (the default) or the live site.

page

A page key from get_site. The default is the home page.

breakpoint

desktop, tablet or mobile.

full_page

The whole page rather than the first screen.

state

The page in a state, such as {"tab": "pricing"} or {"show_menu": "true"}.

item_id

A published item on a page for each item, a collection on category_page, or a product on product_page.

tag

A tag on a tag page, once that tag has an address.

A review routine

1

After each batch that changes how a page looks, take a first-screen picture of it.

2

When a page is finished, take full_page at desktop and at mobile.

3

Check every state you built: tabs, drawers, and open answers.

4

For pages that show data, look at a long item and a short one. The longest title usually breaks a card first.

5

Before you publish, go through every page once on mobile.
Screenshots use context, so take them where they tell you something. One page at one width is often enough during a change.

What to look for

Layout

Overflow, collapsed columns, cards of uneven height, big empty gaps.

Type

Overlong headlines, too-small text, and lines that run too wide.

Colour

Contrast, especially text over images, and hover-only styles that hide things.

Images

Stretched or badly cropped pictures, and leftover placeholders.

Content

Sample words, invented facts and broken-looking empty lists.

Navigation

Every page is linked from both menus.

Shop

A price on every card, and a working path to the product page.

Fix one thing at a time

Change one problem, in one small batch, and look again. If a style has no effect, read the node with get_node. The usual causes are a breakpoint value overriding common, a text style controlling the size, or a child's background covering its parent's.

What screenshots can't show

Draft items

Only published items appear in screenshots. A new content item can't be checked until it is published, so try a design with one item the owner has agreed to publish.

Clicks

A picture doesn't press buttons. Ask the owner to try the cart, the links and the forms.

Lists in state

in_list state can't be set in a screenshot, so accordions built with it need checking in a browser.

Speed and accessibility

There is no performance or accessibility report. list_pages does flag missing search text and images without alt text.

‹ Previous

Ecommerce

Check a phone layout

{
  "name": "get_page_screenshot",
  "arguments": {
    "org_id": 1042,
    "page": "home",
    "breakpoint": "mobile",
    "full_page": true
  }
}

Check the phone menu

{
  "name": "get_page_screenshot",
  "arguments": {
    "org_id": 1042,
    "page": "home",
    "breakpoint": "mobile",
    "state": { "show_menu": "true" }
  }
}

Compare with what's live

{
  "name": "get_page_screenshot",
  "arguments": {
    "org_id": 1042,
    "page": "home",
    "source": "live"
  }
}

‹ Previous

Ecommerce