Key takeaways
- In the Theme Editor, drag blocks within the Main product section to reorder them.
- You can add sections below the main product area for content like reviews, FAQs, or related products.
- Create custom product page templates for specific products or collections.
- For layouts that go beyond what the Theme Editor offers, use Fudge.
A well-laid-out product page puts the right information in front of buyers at the right moment in their decision-making process. Moving a guarantee block, changing where the description sits, or building an entirely custom layout can make a real difference to conversions.
Why you can trust us
We’ve worked on product page optimisation with hundreds of Shopify brands. We also built Fudge — an AI storefront editor with a 5.0 rating on the Shopify App Store.
How to reorder blocks on the Shopify product page
Step 1. Go to Online Store > Themes > Customize.
Step 2. Navigate to any product page using the page selector at the top.
Step 3. In the left sidebar, find the Main product section and click it to expand the block list.
Step 4. You’ll see blocks listed in order: typically Title, Price, Variant picker, Quantity selector, Add to cart, Description. Drag the handles next to each block to reorder them.
Step 5. Save.
Common reorderings that improve conversion:
- Move social proof (review summary or star rating) up, closer to the title
- Move guarantee text directly below the add-to-cart button
- Move the description lower if you want the ATC button visible without scrolling
- Move a size guide or fit information block directly above the variant picker
Adding new blocks to the product page
Step 1. In the Theme Editor, navigate to a product page.
Step 2. In the left sidebar, inside the Main product section, click Add block.
Step 3. Choose from your theme’s block types. Common options: Text, Rich text, Collapsible row, Image, Rating, Custom HTML.
Step 4. Configure the block content and position it by dragging.
Step 5. Save.
Adding sections below the main product area
Beyond the product panel itself, you can add full-width sections below it.
Step 1. Scroll down past the Main product section in the left sidebar.
Step 2. Click Add section (usually at the bottom of the section list).
Step 3. Choose a section type - common additions below product pages: Product reviews, Related products, Recently viewed, Rich text, FAQ/accordion.
Step 4. Position and configure.
Step 5. Save.
Creating a custom product page template
If you want a different layout for specific products - a long-form sales page for your hero product, a minimal layout for simple products - you can create custom templates.
Step 1. Go to Online Store > Themes > Actions > Edit code.
Step 2. In the templates/ folder, find product.json.
Step 3. Click the three-dot menu next to it and select Add a copy. Name it product.hero.json or similar.
Step 4. Go to the Theme Editor. Navigate to a product page. In the bottom left, you’ll see a Template dropdown - select your new template.
Step 5. Customise this template separately from the default. Changes to product.hero.json only affect products using that template.
Step 6. In the Shopify Admin, open a product > scroll to the Theme templates section > assign the custom template.
Common product page layout patterns
Standard e-commerce layout: Images (left) / Title, price, variants, ATC, guarantee, description (right)
Long-form sales page layout: Full-width hero image, product story, feature blocks, testimonials, ATC, FAQs
Minimal/clean layout: Large image, title, price, ATC only - everything else collapsed or removed
Tabbed layout: Main info visible, description / care / ingredients / specs in tabs below
Going beyond the Theme Editor with Fudge
The Theme Editor limits you to your theme’s section library. If you want a layout that isn’t achievable through drag-and-drop, Fudge can build it.
Example prompts:
-
“Create a custom product page template for our hero product - full-width sticky hero image, scrollable info panel on the right, key features section below, testimonials grid, and sticky ATC button.”
-
“Restructure our product page so the description appears in a tabbed section with three tabs: Overview, Ingredients, Care Instructions.”
Fudge generates the Liquid code as a draft in your theme. You review before publishing.
