--- name: build-a-high-converting-product-page description: >- Structures a standard ecommerce product page - the destination for Shopping PLAs, PMax product traffic, and product-intent search - around seven sections in a deliberate order: gallery and identity, purchase terms beside the CTA, a dominant add-to-cart block, reviews, benefit-led details, cross-sell, and closing trust. Use it for a new product launch, a page with a weak add-to-cart rate, or before pointing product campaigns at a page. VigilDog verifies the Merchant Center link (gads_link_merchant_center), and monitors the result via gads_get_shopping_performance, gads_run_gaql_query, and ga4_run_report add-to-cart events; the page construction is human work. Not for stripped promo pages (build-a-high-converting-ecommerce-landing-page), not for lead-gen/SaaS (build-a-high-converting-landing-page), and if add-to-cart is healthy but purchases lag, go to optimize-cart-and-checkout-flow instead. --- # Build an Ecommerce Product Page ## Purpose Builds or rebuilds the workhorse page of an ecommerce funnel: the product page that Shopping ads, PMax, and product searches land on. The page keeps normal site navigation (these visitors may browse) but sequences its content so the add-to-cart decision is as easy as possible: identity first, terms next to the button, proof immediately available, detail on demand. ## When to run - Launching a new product that will receive paid traffic. - An existing product page shows a weak add-to-cart rate despite relevant traffic. - Preparing a destination before launching Shopping, PMax, or product-intent Search campaigns. ## When NOT to run - You need a navigation-free promo page for cold traffic → build-a-high-converting-ecommerce-landing-page. - The destination serves lead-gen or SaaS goals → build-a-high-converting-landing-page. - Add-to-cart is healthy but purchase completion is low - the leak is downstream → optimize-cart-and-checkout-flow. - Pricing, shipping policy, or guarantee are undecided - settle those business inputs first. ## Prerequisites - Complete product data: name, specs, variants, pricing, and discount structure. - Assets: at least 5 images (hero, angles, in-context, detail, scale) and ideally a short demo video; every variant needs its own hero image. - At least 5 customer reviews, or a plan to lean on store-level trust signals until reviews accumulate. - Decided purchase terms: shipping cost/threshold, delivery estimates, return window and process. - 3-6 complementary products identified for cross-sell. - GA4 ecommerce events (view_item, add_to_cart) implemented. ## Procedure 1. **Lock the purchase terms.** Write down price, comparison price and savings, shipping cost or free threshold, delivery estimate, and a one-sentence return-policy summary. These will render next to the CTA, so wording matters now, not later. 2. **Confirm the feed context.** If this page will serve Shopping/PMax, verify the Google Ads ↔ Merchant Center link with `gads_link_merchant_center` (preview first; any linking write is applied only after explicit user approval, and consult `gads_policy_guardrail` before the session's first Google Ads write). The page URL must match the feed's landing URL for the offer. 3. **HUMAN STEP (outside VigilDog):** build section 1 - product identity. Gallery ordered hero → context → detail → scale → video, with zoom on desktop and pinch on mobile; a descriptive title carrying the key attributes (never an internal SKU string); prominent current price with struck-through original and savings; variant selectors that swap the gallery image. 4. **HUMAN STEP (outside VigilDog):** build section 2 - purchase terms. Shipping cost and delivery date, free-shipping progress if a threshold exists, the return-policy sentence, and a stock indicator, all within sight of the add-to-cart button. 5. **HUMAN STEP (outside VigilDog):** build section 3 - the action block. Add-to-cart as the highest contrast, largest button on the page (full-width on mobile); express-pay options below it; visible feedback when an item is added; a sticky bottom CTA bar on mobile once the visitor scrolls past the main button. 6. **HUMAN STEP (outside VigilDog):** build section 4 - reviews. Star average and count linked near the title; individual reviews with text, verified badges, and customer photos; sorting and filtering. Under 5 reviews? Substitute store-level ratings and press/certification logos, and start a post-purchase review-request flow. 7. **HUMAN STEP (outside VigilDog):** build section 5 - details. Description rewritten benefits-first (what the spec means for the buyer, then the spec), a scannable spec table, 5-7 expandable FAQs sourced from support logs and review themes, and a short how-to if the product needs one. 8. **HUMAN STEP (outside VigilDog):** build sections 6-7 - cross-sell and trust close. Bought-together bundle with one-click add, related-products row, recently-viewed carousel; then expanded return policy, secure-checkout indicator, contact options, and any third-party certifications. 9. **HUMAN STEP (outside VigilDog):** validate on a real phone: full flow from gallery to add-to-cart, sticky bar works, images load, sub-3-second load, variant switching correct. 10. **Verify tracking.** Trigger a test add-to-cart and confirm the event lands using `ga4_run_report` (eventName dimension filtered to add_to_cart, realtime or next-day). Confirm purchase tracking separately before scaling spend. 11. **Launch and monitor.** Point product campaigns at the page. Weekly for the first two weeks: pull CVR/ROAS per product via `gads_get_shopping_performance`, page-level clicks/conversions via `gads_run_gaql_query` on the landing-page report, and add-to-cart rate, bounce, and time-on-page via `ga4_run_report`. 12. **Route by result** using the decision rules: weak add-to-cart → rework sections 1-3; high bounce → check ad/feed-to-page match (title, image, price consistency); good add-to-cart, weak purchase → optimize-cart-and-checkout-flow. ## Decision rules - **Section order is fixed:** identity → terms → action → proof → detail → cross-sell → trust. Detail before proof buries the reviews below walls of text and lowers add-to-cart. - **Gallery floor:** 5+ images; gallery occupies at least half of above-the-fold space; every variant has its own hero. - **Terms visibility:** price, shipping, and returns must be visible without scrolling on desktop and within one swipe on mobile. Surprise costs discovered later are the classic abandonment trigger. - **Review threshold:** 5+ visible reviews before relying on them as the proof layer; below that, borrow trust from the store level. - **Speed floor:** under 3 seconds on mobile. - **Diagnosis split:** low add-to-cart = this page's problem (sections 1-3); low purchase after healthy add-to-cart = downstream funnel problem (different skill). ## Common failure modes - **Spec-sheet-as-page.** A title, a table, and a buy button convert poorly; the benefit translation and proof layers are what move add-to-cart. - **Hiding shipping costs until checkout.** Visible terms next to the CTA convert better than cheerful surprises later; be transparent on the product page. - **One gallery image for all variants.** A visitor who picks "blue" and still sees the red product hesitates; wire variant-to-image switching. - **Desktop-only QA.** The sticky CTA, collapsible sections, and tap targets exist for mobile; test on a real device, not just a resized browser. - **Judging the page with broken events.** If add_to_cart never fires, every diagnosis is fiction; verify events before reading any metric. ## Related skills - **Before:** set-up-and-optimize-product-feed (feed quality determines what traffic arrives), set-up-google-ads-conversion-tracking. - **After:** optimize-cart-and-checkout-flow (downstream funnel), monitor-landing-page-performance (recurring watch), launch-standard-shopping-campaign / launch-pmax-feed-only-campaign (traffic). - **Siblings:** build-a-high-converting-ecommerce-landing-page (dedicated promo LP), build-a-high-converting-landing-page (lead-gen/SaaS).