# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openspaces.design/readme-1/getting-started/4.-creating-and-customizing-your-product-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.