# 4. Creating and Customizing Your Product Page

{% embed url="<https://youtu.be/AOjRMSNwDZI>" %}

> 📓 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](https://openspaces-labs.gitbook.io/openspaces/pages-and-menus/product-page/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