skills.rest
tomtoto757
tomtoto757COMMUNITY
Explore all skills by this author →
GitHub

product-page-design

Design product detail pages with image galleries, variant selectors, and social proof components.

3|1|Updated Mar 21, 2026
Search Tags:#structured data#conversion#Shopify#product page#ecommerce#image gallery#variant selector
One-click install
npx skills add https://github.com/tomtoto757/ecomm-ai-team --skill product-page-design-tomtoto757
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: product-page-design
Source: https://github.com/tomtoto757/ecomm-ai-team/tree/main/skills/storefront-shopping-experience/finsilabs/storefront-ui/product-page-design
Command: npx skills add https://github.com/tomtoto757/ecomm-ai-team --skill product-page-design-tomtoto757

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a product detail page that converts requires coordinating many components — image galleries with zoom, variant selectors with availability tracking, sticky add-to-cart bars, reviews, and SEO structured data — and each ecommerce platform handles these differently. This Skill provides platform-specific configuration steps and production-ready code patterns so you don't have to figure out the layout, accessibility, and performance details from scratch. ## Core Features & Use Cases - Platform-Specific Guidance: Step-by-step configuration for Shopify (Dawn theme, Judge.me reviews), WooCommerce (Astra/Flatsome, variation swatches), BigCommerce (Cornerstone), and custom/headless builds. - Ready-to-Use Components: CSS grid layouts, accessible variant selectors using fieldset/radio patterns, IntersectionObserver-based sticky add-to-cart bars, and JSON-LD Product structured data for SEO. - Conversion & Performance Practices: Real-inventory stock indicators, compare-at price strikethrough, lazy-loaded reviews, responsive srcset images, and CLS prevention. - Use Case: A fashion retailer rebuilding their PDP in React can use the included ProductGallery, VariantSelector, and StickyAddToCart patterns to ship an accessible, mobile-optimized page with keyboard navigation and touch zoom support. ## Quick Start Use the product-page-design skill to build a responsive product detail page for my Shopify store with a zoomable image gallery, color and size variant selectors, and a sticky add-to-cart bar on mobile.

Frequently Asked Questions about product-page-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a product detail page with variant selectors in React?▼

Build a variant selector using semantic fieldset, legend, and radio input elements that track availability across option combinations. Disable out-of-stock variants rather than hiding them, and use history.replaceState to update the URL with the selected variant ID so configurations are shareable.

How to add a sticky add-to-cart bar on mobile product pages?▼

Use IntersectionObserver to watch the main add-to-cart button and show a fixed bottom bar only when that button scrolls out of view. Hide the bar on desktop via a min-width media query, and disable its button when the selected variant is out of stock.

What is the best way to add reviews to a Shopify product page?▼

Install Judge.me Product Reviews for a free tier with unlimited and photo reviews, or Loox for photo and video reviews starting at $9.99 per month. Both inject star ratings below the product title and a full reviews section without theme code changes.

Does this product page guidance work with WooCommerce and BigCommerce?▼

Yes, the Skill covers WooCommerce through themes like Astra, Flatsome, and Kadence plus the Variation Swatches plugin, and BigCommerce through the Cornerstone theme's Theme Editor with its built-in review system. Custom headless builds get framework-agnostic CSS and React patterns.

How do I add Product structured data for Google Shopping SEO?▼

Build a JSON-LD object server-side with @type Product including name, image array, description, sku, brand, and an offers block using schema.org availability URIs. Only include aggregateRating when review count is greater than zero to avoid invalid rich results.

Why does my product gallery cause layout shift and slow LCP?▼

Layout shift happens when images lack explicit width and height attributes or an aspect-ratio container. Fix LCP by preloading the hero image with a link rel=preload tag, using loading=eager only on the first image, and serving responsive WebP or AVIF images via srcset.

Related Skills

Explore More Software Engineering Skills→
tomtoto757tomtoto757
3

product-data-modeling

Design product catalog schemas with variants, attributes, metafields, and relationships for ecommerce platforms.

Community
Intermediate
stefan-georgistefan-georgi
13

cart-abandonment-flow

Generate a 3-5 email cart abandonment sequence with urgency escalation.

Community
Advanced
openyakopenyak
704

accessibility-review

Audit designs or pages for WCAG 2.1 AA accessibility compliance.

Official
Intermediate
webdevarifwebdevarif

neuro-theme-engine

Builds section-based theme systems with live preview, CSS variables, and React component registries.

Community
Advanced