4. Creating and Customizing Your Product Page

The product page is made up of a Product Section and individual blocks underneath. You can reorder, remove, or customize each one.

For Plain Jane and Interactive

Watch the video

📓 Note: There is a new Product Section Showcase layout available that is not covered in this video. For setup instructions and details, visit: Product Section Showcase

What You'll Learn

  • How to customize the product page layout in Plain Jane v3 and Interactive v2
  • All block types and styling options inside the product section
  • How to use the Scroll Layout (archived version) product section
  • Where to adjust gallery size, button styles, accordions, and more

📓 Note: The Scroll Layout (formerly called Archived Layout) is an older alternative to the default product section. It’s still available for use but lacks block-based customization.

🛠️ Accessing the Product Page in the Theme Editor

  1. Go to Online Store > Themes > Customize.
  2. Use the dropdown menu at the top center to select Products > Default Product.
  3. To preview a different product, click Change in the preview bar and select a different item.

🧱 Core Product Section Blocks

The product page is made up of a Product Section and individual blocks underneath. You can reorder, remove, or customize each one.

Common Blocks:

  • On Sale Label: Custom color, padding, and spacing
  • Header: Controls product title display
  • SKU: Optional, shows SKU if available
  • Price: Show with or without currency symbol
  • Description: Supports word limit and "Read more" link
  • Gallery: Controlled via parent Product Section settings
  • Buttons: Add-to-cart and variant selectors
  • Accordions: Use for size charts, return policies, FAQs, etc.

💡 Tip: To add a block, click the Product Section, then Add Block.

🎛️ Product Section Layout Settings

Click the top-level Product Section to access these layout options:

  • Image Position: Left or Right
  • Fade Animation: Controls how the product fades into view
  • Gallery Columns: From 1 to 6 (only available if gallery is on left)
  • Image Sizing (Desktop & Mobile): Use sliders to adjust

⚠️ Some settings (like columns) are only available when the gallery is on the left.

🧩 Additional Block Settings

On Sale Label

  • Change label background and text color
  • Adjust spacing around the badge

Price Display

  • Toggle currency symbol
  • Adjust font size for luxury/minimal styles

Description Block

  • Set color, margins, and word limit
  • Enables "Read more" expansion link

Buttons and Variants

  • Enable/disable Next Product button
  • Customize corner radius, margins, spacing

Accordions

  • Add multiple: e.g., Size Chart, Returns/Exchanges
  • Customize titles and margin spacing

🗂️ Scroll Layout Product Section (Archived)

The Scroll Layout is an archived version of the product section that displays a full vertical gallery.

How to Use:

  1. Click Add Section > Product Section Scroll
  2. Hide the current product section to avoid duplicates
  3. Customize using the right-hand settings panel (this version does not use blocks)

Key Differences:

  • Vertical scroll gallery with all images stacked
  • Great for mobile and long-form product storytelling
  • No block support — all settings are configured in the section panel
  • Fewer customization features (e.g., no rounded corners)

💡 Tip: Use this if you prefer the old scroll experience from earlier theme versions.

➕ Adding Extra Sections to the Product Page

You can add other Shopify theme sections to the product page just like any other page:

  • Image Stream
  • Email Signup
  • Slideshow
  • Collection List

Rearrange and customize these to match your brand style.

Need Help?