SkillShelf

Audit a Product Detail Page

Audit a PDP from screenshots and a brand voice guide. Produces a prioritized report split into content/merchandising and dev/design changes.

Here's how the conversation starts

I'm going to build your brand voice profile. This is a document that captures how your brand writes, so you (and other AI tools) can produce on-brand copy consistently. Here's how it works:

  • You share examples of your brand's writing
  • I analyze the patterns and produce your voice profile
  • You review it, we refine anything that's off

Any questions? If not, we can get started. What's your brand name and website URL?

Foundation documents used by this skill

These documents teach the skill about your brand. Create them once, use them everywhere.

Common questions

What inputs does this skill need? +

Desktop and mobile PDP screenshots and a brand voice guide are required. A GA4 Pages and Screens screenshot with the device category dimension is strongly recommended. The skill provides step-by-step instructions for pulling the GA4 data.

What does the audit cover? +

Product copy and content structure, imagery, page layout and information architecture, calls to action, mobile UX, SEO metadata, social proof, and accessibility. Every recommendation is grounded in published research from Baymard Institute, Nielsen Norman Group, Google, and WCAG standards.

Who is this skill for? +

Ecommerce directors and merchandising managers who want evidence-based PDP optimization recommendations. The output is split into changes the ecommerce team can make through their CMS and changes that need dev or design involvement.

Can I ask follow-up questions about the recommendations? +

Yes. After the audit is delivered, you can ask about the reasoning behind any recommendation and the skill will look up the underlying research to provide a fuller explanation.

Example skill output +

Example: Audit a Product Detail Page

This is an example of what the audit-pdp skill produces when given desktop and mobile PDP screenshots, a brand voice guide, and a GA4 performance screenshot. The example uses Great Outdoors Co., a fictional outdoor gear brand. The PDP audited is the Ridgewalker GTX Hiking Boot.

The example demonstrates how the skill inventories the page, evaluates against the best practices rubric, sorts recommendations into content/merchandising and dev/design buckets, and prioritizes actions. It also shows how GA4 data with the mobile/desktop split influences recommendation weighting.


PDP Summary

Product: Ridgewalker GTX Hiking Boot (Great Outdoors Co.) Category: Footwear / Hiking Price: $189

The PDP uses a hybrid layout: a two-column structure on desktop (image gallery left, buy section right) with long-scroll content below the fold organized in horizontal tabs (Description, Specs, Reviews). On mobile, the layout collapses to a single column with the image gallery at top, buy section below, and the same tabbed content structure further down.

Content elements visible: Product title, price, color swatches (4 colors), size selector (drop-down), add-to-cart button, 5 product images (2 studio packshots, 1 lifestyle on-trail image, 1 sole detail, 1 box/packaging shot), a 3-paragraph marketing description, a specs table, customer reviews (4.3 stars, 247 reviews), a "You may also like" cross-sell row with 4 products.

Notable desktop/mobile differences: The desktop gallery uses a vertical thumbnail strip. On mobile, the gallery uses dot indicators with no thumbnails. The sticky add-to-cart bar on mobile appears only after scrolling past the main buy section. The cross-sell row is truncated to 2 products on mobile. The tabbed content is identical on both platforms.

Performance Context

GA4 data provided for the last 30 days, segmented by device category.

Metric Desktop Mobile
Views 4,210 9,840
Engagement rate 62% 41%
Avg. engagement time 1m 48s 0m 52s
Add-to-cart rate 8.2% 3.1%

Mobile accounts for 70% of traffic but converts at less than half the desktop rate. The engagement rate gap (62% vs. 41%) suggests mobile users are bouncing before engaging with the page content. Average engagement time on mobile (52 seconds) is low for a $189 product where fit, waterproofing specs, and trail suitability all factor into the decision. This data shifts priority toward mobile-specific and content-scannability recommendations.

Content & Merchandising Opportunities

Replace the marketing-first description with a highlights-led structure

The current description opens with three paragraphs of brand storytelling ("Born from decades of trail wisdom...") before reaching any specific product information. The waterproofing rating, sole compound, and weight don't appear until the Specs tab. Baymard's research shows that a scannable "highlights" layer before deeper detail increases engagement because it lets users quickly validate the most decision-critical benefits and specs. (Baymard Institute, "Structuring Product Page Descriptions by 'Highlights' Increases User Engagement (Yet 78% of Sites Don't)," 2018). For a hiking boot at this price point, the first thing visible should be the 3-5 attributes that differentiate this boot: waterproof rating, weight, sole type, intended terrain, and ankle support level.

Recommended change: Restructure the description to lead with a short highlights block (5-7 bullet points covering key specs and benefits), followed by the marketing narrative for users who want more context. This is a CMS-level edit.

Add an in-scale image showing the boot on a foot or next to a size reference

Four of the five images are isolated product shots. The one lifestyle image shows a hiker on a trail, but the boot is small in the frame and cropped at the ankle. Users trying to assess bulk, height, and visual weight of the boot don't have a clear reference. Baymard reports that many users try to infer size from images, and the absence of an in-scale reference increases abandonment for products where physical scale is a decision driver. (Baymard Institute, "Product Page UX 2026: 10 Pitfalls and Best Practices," 2026).

Recommended change: Replace the box/packaging image (which adds no decision value) with a close-up lifestyle shot showing the boot on a foot in context, ideally with visible ankle height and proportional reference.

Remove or reposition the packaging image

The box/packaging shot occupies one of five gallery slots and provides no information that helps a user evaluate fit, quality, or suitability. Every gallery slot is real estate, especially on mobile where the first image dominates the viewport.

Recommended change: Remove the packaging image and replace it with a more useful angle: a fit-on-foot shot, a tread detail in mud or wet rock context, or a side-by-side with the other colorways.

Clarify size option labels and surface fit guidance earlier

The size selector is a drop-down with numeric sizes only. There is no indication of fit (runs small, true to size, runs large) near the selector. Fit information appears only inside the Reviews tab where several reviewers mention "runs a half size small." NNGroup notes that option labels should be unambiguous and meaningful because users must understand each variation to confidently begin the purchase process. (Nielsen Norman Group, "UX Guidelines for Ecommerce Product Pages," 2019).

Recommended change: Add a "Runs a half size small" note adjacent to the size selector, sourced from review data. If a size guide exists, link it directly next to the selector rather than burying it in the Description or Specs tab.

Improve alt text on product images

The current alt text for all five images is "Ridgewalker GTX Hiking Boot." Descriptive alt text should differentiate what each image shows (e.g., "Ridgewalker GTX sole tread pattern detail," "Ridgewalker GTX worn on rocky trail showing ankle height"). Google states that alt text helps search engines understand the image's relationship to page content. (Google Search Central, "SEO Starter Guide," 2025). This also improves accessibility for screen reader users.

Recommended change: Write unique, descriptive alt text for each product image. This is a quick CMS edit with SEO and accessibility upside.

Surface return policy and shipping cost estimate near the buy section

Neither return policy nor shipping cost is visible near the add-to-cart button. Shipping information appears only in the site footer. For a $189 purchase, users actively look for return policy information on the PDP, and the absence of quick access can create enough doubt to trigger site abandonment. (Baymard Institute, "Product Page UX 2026: 10 Pitfalls and Best Practices," 2026).

Recommended change: Add a short line near the add-to-cart button: "Free shipping over $150 / Free returns within 60 days" (or whatever the policy is). If policies vary, link to the detail page. Many CMS platforms and Shopify themes support this as a configurable content block.

Respond to negative reviews

The reviews section shows 247 reviews at 4.3 stars, with several 1- and 2-star reviews visible mentioning waterproofing failure after 6+ months and sizing issues. None have brand responses. Baymard reports that when company responses are present, a meaningful subset of users factors those responses positively into their evaluations. (Baymard Institute, "E-Commerce Sites Need to Respond to Some or All Negative User Reviews (87% of Sites Don't)," 2019).

Recommended change: Respond to negative reviews, particularly those about waterproofing durability and sizing. Acknowledge the issue, offer a resolution path, and (for sizing) reference the fit guidance. This is a review platform admin task, not a dev task.

Dev & Design Opportunities

Replace horizontal tabs with vertically collapsed sections

The Description, Specs, and Reviews content is organized in horizontal tabs. Baymard reports that horizontal tabs cause users to overlook product information entirely, with materially higher content-miss rates versus alternative structures. (Baymard Institute, "PDP UX: Core Product Content Is Overlooked in 'Horizontal Tabs' Layouts (Yet 28% of Sites Have This Layout)," 2018). Given the low mobile engagement rate (41%), users are likely not discovering the Specs and Reviews content at all.

Recommended change: Replace the tabbed layout with vertically stacked, collapsible sections with descriptive titles ("Specifications," "Customer Reviews (4.3 stars, 247 reviews)"). This is a template-level change.

Replace mobile dot indicators with thumbnails for image gallery navigation

The mobile gallery uses dot indicators with no thumbnails. Baymard finds that thumbnails better communicate the existence and variety of images and reduce mis-taps on mobile. (Baymard Institute, "Always Use Thumbnails to Represent Additional Product Images (76% of Mobile Sites Don't)," 2020). With mobile accounting for 70% of traffic and the first image dominating the viewport, users may not realize there are additional useful images.

Recommended change: Implement a thumbnail strip or mini-thumbnail row below the main mobile image. This is a template/component change.

Convert size selector from drop-down to button-style

The drop-down hides available sizes and out-of-stock sizes. Baymard reports that exposing sizes as buttons supports faster scanning and clearer out-of-stock discovery. (Baymard Institute, "Product Page UX 2026: 10 Pitfalls and Best Practices," 2026). For a category where sizing is a primary decision factor and a common return driver, reducing friction on size selection is high-impact.

Recommended change: Replace the size drop-down with button-style selectors that show all sizes at a glance, with out-of-stock sizes visually distinguished but still visible. This requires a template change but is a common pattern with well-documented implementations.

Improve add-to-cart confirmation feedback

On both desktop and mobile, clicking "Add to Cart" updates the cart icon count in the header but provides no other visual confirmation. On mobile, the cart icon is above the fold when the sticky bar triggers the add, so the count change may not be visible. NNGroup reports that inadequate add-to-cart feedback leads to common user errors. (Nielsen Norman Group, "UX Guidelines for Ecommerce Product Pages," 2019).

Recommended change: Add a confirmation pattern: a brief slide-in confirmation panel, a visible flash or animation on the CTA, or a mini-cart drawer. This is a front-end component change.

Priority Actions

  1. Restructure product description to lead with highlights. Content & Merchandising. The current marketing-first description combined with the horizontal tab layout means mobile users (70% of traffic, 41% engagement rate) likely never see the key specs. This is the highest-impact content change available without dev involvement.

  2. Replace horizontal tabs with collapsed sections. Dev & Design. The tab layout is hiding Specs and Reviews content from a material share of users. Combined with the description restructure, this addresses the core content-discovery problem driving low mobile engagement.

  3. Replace mobile dot indicators with thumbnails. Dev & Design. Mobile users are the majority audience and may not be discovering the gallery depth. This supports the image-dependent evaluation that hiking boot shoppers need.

  4. Surface shipping and return policy near the buy section. Content & Merchandising. At $189, the absence of cost clarity and return policy near the purchase decision is a likely contributor to the mobile add-to-cart gap. Quick CMS-level fix with outsized trust impact.

  5. Add fit guidance next to the size selector. Content & Merchandising. Multiple reviewers flag that the boot runs small. Surfacing this near the selector reduces sizing errors (and returns) and improves purchase confidence.

Confidence Notes

  • Page speed and Core Web Vitals: Cannot be evaluated from screenshots. If mobile engagement issues persist after content and layout changes, a performance audit is recommended.
  • Structured data: Cannot be evaluated from screenshots. Recommend verifying that Product structured data is implemented per Google Search Central guidelines, particularly for price, availability, and review aggregate.
  • Below-fold content completeness: The mobile screenshot captures most of the page but the reviews section is partially cut off. The review browsing UX (image traversal, filtering, sorting) could not be fully evaluated.
  • Brand voice alignment: The brand voice guide describes Great Outdoors Co.'s voice as "confident, specific, trail-tested." The current description leans more toward aspirational marketing language than the direct, spec-forward tone the guide describes. The highlights restructure in the first recommendation would naturally bring the copy closer to the brand voice by leading with concrete product attributes rather than brand narrative.

Ready to go

Download, then upload to Claude or ChatGPT. That's it.

GitHub