4. Creating and Customizing Your Product Page

For Plain Jane and Interactive

📓 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?

  • 💬 For Tech Shpport Join Us On Discord: https://discord.gg/hcc2GvgZc6

  • 📧 Email us at: support@openspaces.design

  • 💻 Live chat with us: Available Monday–Friday, 10AM–6PM EST, directly on our website

Previous3. Creating and Customizing Your Collections PageNext5. Setting Up Password Pages and Email Waitlist

Last updated