# Main Product

## What It Does

The **Main product** section lets you customize the product display structure.<br>

***

### Settings

#### **Layout**

Controls the Layout. Choose from: Full width, Fit to width.

**Media**

#### **Media fit**

'Cover' maintains its aspect ratio and fills the width and height of the section. 'Contain' maintains its aspect ratio and increases or decreases the size of the image to fill the section. Choose from: Contain, Cover.

#### **Media ratio**&#x20;

Controls the Media ratio. Choose from: Square, Landscape.

#### **Media width (desktop)**&#x20;

Controls the width of this element.

#### **Order (desktop)**

Controls the Order (desktop). Choose from: Media on the left, Media on the right.

#### **Enable image zoom**&#x20;

When enabled, displays this element. Disable to hide it.

**Media Pagination**

#### **Layout**

Controls the Layout. Choose from: Popup, Columns.

#### **Maximum Number of columns per row**

Controls the number of columns.

#### **Thumbnail ratio**&#x20;

Controls the Thumbnail ratio. Choose from: Square, Landscape.

**Appearance**

#### **Input/button maximum width**

Controls the width of this element.

#### **Color scheme**

Applies a predefined color scheme to this element.

{% hint style="info" %}
Color schemes are sets of coordinated colors you define under **Theme settings > Colors**. Choosing a scheme applies its background, text, and accent colors.
{% endhint %}

**Spacing**

#### **Maximum padding top**

Adjusts the space above the content.

#### **Maximum padding bottom**

Adjusts the space below the content.

***

### Supported Blocks

#### Vendor

See the child document for full settings: [Vendor](/agnes/page-setup/product-page/main-product/vendor.md)

#### Product title

See the child document for full settings: [Product title](/agnes/page-setup/product-page/main-product/heading.md)

#### Price

See the child document for full settings: [Price](/agnes/page-setup/product-page/main-product/price.md)

#### Variant selector

See the child document for full settings: [Variant selector](/agnes/page-setup/product-page/main-product/variant-selector.md)

#### Quantity

See the child document for full settings: [Quantity](/agnes/page-setup/product-page/main-product/quantity.md)

#### Inventory

See the child document for full settings: [Inventory](/agnes/page-setup/product-page/main-product/inventory.md)

#### Description

See the child document for full settings: [Description](/agnes/page-setup/product-page/main-product/description.md)

#### Buy buttons

See the child document for full settings: [Buy buttons](/agnes/page-setup/product-page/main-product/buttons.md)

#### Social share

See the child document for full settings: [Social share](/agnes/page-setup/product-page/main-product/share.md)

#### SKU

See the child document for full settings: [SKU](/agnes/page-setup/product-page/main-product/sku.md)

#### Text

See the child document for full settings: [Text](/agnes/page-setup/product-page/main-product/text.md)

#### Border

See the child document for full settings: [Border](/agnes/page-setup/product-page/main-product/border.md)

#### Custom liquid

See the child document for full settings: [Custom liquid](/agnes/page-setup/product-page/main-product/liquid.md)

#### Accordion

See the child document for full settings: [Accordion](/agnes/page-setup/product-page/main-product/accordion.md)

#### Complementary products

See the child document for full settings: [Complementary products](/agnes/page-setup/product-page/main-product/complementary-products.md)

#### Product badge

See the child document for full settings: [Product badge](/agnes/page-setup/product-page/main-product/badge.md)

**Block Limit**

You can add up to **3** of this block type.

#### Product compare checkbox

See the child document for full settings: [Product compare checkbox](/agnes/page-setup/product-page/main-product/product_compare.md)

***


---

# 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://moodboard-creations.gitbook.io/agnes/page-setup/product-page/main-product.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.