> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/page-templates/product-page.md).

# Product page

## Product page

The Product page template is designed to showcase your individual items in detail, providing all the necessary information, imagery, and purchasing controls for your customers to add items to their cart.

***

### How to access Product template

1. In the **Theme Editor (Customize)**, open the **template selector** (dropdown at the top).
2. Select **Products** → **Default product** (or any custom product template you've created).

***

### Page structure

| Area                | Description                                                                          |
| ------------------- | ------------------------------------------------------------------------------------ |
| **Product media**   | Showcases the product images or videos in galleries, sliders, or grids.              |
| **Product details** | The primary column containing product title, price, variants, and checkout controls. |

***

### Sections

#### Product information

The core section of the product template that holds both the media gallery and the interactive checkout blocks.

**Section settings**

**Invisible mode** When enabled, it strips out background colors and background paddings to allow the product section to blend seamlessly with the page body. **Default:** *Enabled*

**Container width** Adjust the overall max-width boundary of the product area. **Options:** *Inherit / Full width / Standard / Wide* **Default:** *Inherit*

**Inner content layout - Gap** Adjust the horizontal spacing separating the Product media area and the Product details area upon larger screens. **Options:** *Default / 4 / 8 ... 32 / Custom* **Default:** *Default*

{% hint style="info" %}
You can enable **Custom on mobile** to tighten this spacing when the layout stacks vertically on phones.
{% endhint %}

**Style & Background** Customize the section wrapper by enabling a **Custom background**. When picking a custom background, you can toggle between a Solid color or a Gradient via the **Background type**. **Default:** *None*

**Spacing** Enable the **Padding** toggle to input custom Top, Bottom, Left, and Right pixel paddings around the entire product section. Use **Custom on mobile** for precise scaling.

***

**Available blocks**

This private section does not accept unlimited custom blocks. Instead, it relies on two primary sub-containers:

| Container           | Description                                                                                                                                                    |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Product media**   | Controls how your product images zoom, stack, or slide.                                                                                                        |
| **Product details** | Controls the style of the box holding your specific form fields (title, price, cart buttons, etc.). You can nest standard product elements inside this column. |

***

**Container details**

**Product details**

The primary container for all vital text content and forms. You can add specific elements into this container such as **Title**, **Price**, **Variant picker**, **Buy buttons**, **Share**, and **Inventory status**.

**Style** Choose the overarching appearance of the details column. Classic relies on traditional margins, while Boxed houses all the content in a raised or colored card. **Options:** *Classic / Boxed* **Default:** *Boxed*

**Show divider** If your style is set to *Classic*, this setting enables subtle horizontal dividers between the nested elements to establish visual hierarchy. **Default:** *Disabled*

**Corner radius** If your style is set to *Boxed*, select the curve for the box's edges. By default, it inherits your global **Main corner**. **Options:** *Main corner / Small / Extra small / None / Custom* **Default:** *Main corner*

**Gap** Control the vertical spacing between each stacked element inside the details container. **Options:** *Default / Custom* **Default:** *Default*

**Custom mobile constraints** Just like standard Blocks, you can check **Custom on mobile** to configure independent Gap spacing, Background padding, and nested element spacing for small screens without affecting desktop view.

***

### Public sections

> **📌 Note:** You can also add any public (custom) section below the main product content using **Add section**. See the Custom Section manual for how custom sections work.

***

### Tips & best practices

{% hint style="info" %}
**Invisible Mode:** To achieve a modern, "floating" layout, keep the **Invisible mode** enabled on the main Product Information section setting, but use the **Boxed** style inside the nested *Product details* container!
{% endhint %}