Claude/ChatGPT Prompt to Build a High-Converting Product Page

What this prompt does

This prompt generates a full product detail page architecture, not just a layout sketch. It takes your store type, product category, price point, and current conversion rate as inputs, then produces all eight sections a high-intent buyer needs to make a decision: image gallery, buy box, trust signals, tabbed details, reviews, and two cross-sell patterns. Every structural decision in the template is deliberate — the gallery-left / info-right split, the sticky mobile CTA, the constraint against hiding price or making Add to Cart secondary.

The framework parameter is what makes it actionable. You get working code for the buy box with variant switching and sticky mobile behavior, not a wireframe description. The anti-pattern list is embedded directly in the prompt, which means the model is explicitly instructed to avoid the most common conversion killers — autoplay video, tiny images, pop-ups over the product, CTA de-emphasis — rather than discovering them as an afterthought.

The template is built around a sub-10-second decision window, which is realistic for product pages. Trust signals (reviews summary, shipping, return policy, payment badges) appear above the fold by explicit instruction, not as an afterthought in the footer.

When to use it

• You are building a new product page from scratch and want a complete component checklist before writing a line of code.
• Your current conversion rate is known and you want to use it as context so the model can calibrate which trust and urgency elements to emphasize.
• You are working in a specific framework (Alpine.js, React, Livewire, Vue) and need the buy box interaction logic scaffolded correctly.
• You are auditing an existing page and want a reference architecture to compare against.
• You need to brief a designer or developer with a concrete spec, not a vague "make it convert better" request.
• You are launching a sale and need the compare-at price and urgency elements wired into the variant selector output.

Example output

For store_type: outdoor gear, product_type: hiking boots, avg_price: $149, current_cvr: 1.8%, image_count: 8, framework: Alpine.js:

<!-- Buy Box — Alpine.js with sticky mobile CTA -->
<div x-data="{ size: null, qty: 1, stickyVisible: false }"
     @scroll.window="stickyVisible = window.scrollY > 400">

  <!-- Variant selector: visual swatches -->
  <div class="size-grid">
    <template x-for="s in ['8','9','10','11','12']">
      <button :class="{ 'ring-2 ring-brand': size === s }"
              @click="size = s" x-text="s"></button>
    </template>
  </div>

  <!-- Primary CTA -->
  <button class="bg-brand text-white w-full py-4 text-lg font-bold"
          :disabled="!size">Add to Cart — $149</button>

  <!-- Sticky mobile CTA -->
  <div x-show="stickyVisible"
       class="fixed bottom-0 inset-x-0 bg-white border-t p-3 md:hidden">
    <button class="bg-brand text-white w-full py-3">Add to Cart</button>
  </div>
</div>

The reviews section renders a star-distribution bar with photo reviews sorted by recency, and the "Frequently bought together" section outputs a bundle component with placeholder SKU slots you populate with your actual related products.

Pro tips

• Pass avg_price and current_cvr with real numbers, not placeholders. The model uses them as context to weight emphasis — a $149 hiking boot at 1.8% CVR will prompt it to foreground return policy and payment badges more than a $12 impulse item would. The template does not hardcode this logic, but the model responds to meaningful inputs differently than it does to dummy values like "$X" or "N%".
• Set current_cvr honestly. Including your actual rate gives the model a concrete brief: a low-CVR page signals that trust is the likely friction point; a healthy-CVR page opens up more room to optimize for AOV via the cross-sell sections. The quality of the output brief scales with the specificity of your inputs.
• Use framework: Livewire if your stack is Laravel. The variant switcher and quantity selector output will use wire:model bindings rather than JavaScript event listeners, which slots directly into existing Livewire components without a build step.
• Run the image gallery section separately if you have a custom image pipeline. If you use Spatie Media Library, Cloudinary, or Imgix, re-prompt with just section 1 and your image transformation API so the gallery code matches your actual URL structure rather than generic <img src> tags.
• Pair with a real reviews dataset before stakeholder review. The reviews section output is structurally correct but uses placeholder data. Feed it 5–10 actual reviews with star ratings and verified badges so the photo review grid renders with real content when you are showing it to a client or development team.