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.

Product page template in the theme customizer

1. 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:

Product Section 1 (Showcase) settings and 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

Product Section 2 (Thumbnail) layout alternative

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

Product image gallery settings and customization options

---

🧩 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: [email protected]

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