> 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.md).

# Product

Customize your product page layout — media gallery, product details, spacing, and the building blocks customers interact with before purchasing.

<figure><img src="https://193928255-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9PfGmHWEt81G4XNeDZqZ%2Fuploads%2FGV8aXQfDT4I3zmAkZGm1%2FProduct.webp?alt=media&amp;token=29bfa587-95fb-4509-bcbc-915e278572c4" alt=""><figcaption></figcaption></figure>

The Product page is where customers make their final decision to buy. It displays your product's images and videos alongside the pricing, variant selection, and the Add to Cart button. Every element on this page plays a direct role in driving — or losing — a sale.

The Product page is built around a single core section — **Product information** — which holds two fixed sub-areas: the **Product media** panel (images and videos) and the **Product details** panel (title, price, variants, cart button).

***

### What you can customize

* **Section container** — control the overall width and background of the product page
* **Gap** — adjust the spacing between the image panel and the details panel
* **Product media** — configure the gallery layout, image zoom, thumbnails, and video behavior
* **Product details** — choose between a boxed or inline style for the purchase area
* **Custom background** — apply a color or gradient behind the product section
* **Padding and spacing** — fine-tune internal spacing for desktop and mobile

***

### How to access this template

1. In the **Theme Editor (Customize)**, click the **template selector** (dropdown at the top).
2. Select **Products** → **Default product** (or a custom product template).
3. The page editor will show the **Product information** section.

{% hint style="info" icon="note-sticky" %}
**Note:** Every product on your store uses this template by default. To create a different layout for a specific product, create a new product template in the Theme Editor and assign it to that product in Shopify Admin.
{% endhint %}

***

### Page overview

| Area                | What customers see                                     | Why it matters                                                                                     |
| ------------------- | ------------------------------------------------------ | -------------------------------------------------------------------------------------------------- |
| **Product Media**   | Your product images, video, and zoom capability        | Customers buy what they can see clearly — high-quality, zoomable images directly impact conversion |
| **Product Details** | Title, price, variant picker, description, Add to Cart | The decision zone — every element here is part of the path to purchase                             |

***

### Section settings

These settings control the overall Product information section — how wide it is, how it looks, and how its two panels relate to each other.

#### Container

**Invisible mode**

When enabled, removes the section's background color and padding so the product page sits cleanly on your page background. The product layout blends naturally with any sections above and below it.

When disabled, the section gets its own background as defined by the style settings below.

{% hint style="success" icon="lightbulb" %}
**Tip:** Keep Invisible mode on for most stores. It creates a clean, modern feel where the product layout flows naturally with your page. Disable it only if you want a visually distinct background behind the product area.
{% endhint %}

***

**Container width**

Controls the maximum width of the entire product section.

| Option         | Description                                                                    |
| -------------- | ------------------------------------------------------------------------------ |
| **Inherit**    | Uses your theme's default container width. Best for most stores.               |
| **Full width** | Stretches the product section edge to edge.                                    |
| **Standard**   | Constrains the layout to your theme's standard width (\~1440px).               |
| **Wide**       | Uses a wider-than-standard container. Good for products with detailed imagery. |

{% hint style="info" icon="note-sticky" %}
**Note:** On mobile, the container is always full width regardless of this setting — product images and details stack vertically for comfortable scrolling.
{% endhint %}

***

#### Inner content layout

**Gap**

Controls the horizontal spacing between the **Product media** panel on the left and the **Product details** panel on the right.

**Options:** *Default / 4 / 8 / 12 / 16 / 20 / 24 / 28 / 32 / Custom*

Enable **Custom on mobile** to set a different gap for mobile, where panels stack vertically.

{% hint style="success" icon="lightbulb" %}
**Tip:** Increase the gap when you have large, high-resolution product images. More space between the media and details panels gives your imagery room to breathe and prevents the right panel from feeling crowded.
{% endhint %}

***

#### Style & Background

**Color scheme**

Choose whether the product section uses your theme's default color scheme or an independent one.

* **Inherit color scheme** (*Enabled*) — uses your theme's default colors.
* **Inherit color scheme** (*Disabled*) — unlocks a **Color scheme** selector for an independent palette.

***

**Custom background**

Enable to add a custom color or gradient behind the product section. Only available when **Invisible mode** is disabled.

When enabled, choose the background type:

| Option               | Description                                                                |
| -------------------- | -------------------------------------------------------------------------- |
| **None**             | No custom background — the section background comes from the color scheme. |
| **Color / Solid**    | A single flat color behind the product section.                            |
| **Color / Gradient** | A two-color gradient behind the product section.                           |

{% hint style="success" icon="lightbulb" %}
**Tip:** A subtle off-white or light grey background (e.g., `#f9f9f9`) can visually separate the product section from surrounding content without using a strong color.
{% endhint %}

***

#### Spacing

**Custom padding**

Enable to add custom spacing around the product section for both desktop and mobile. When disabled, your theme's default spacing is used.

**Top / Bottom / Left / Right** — Padding from 0 to 200px (desktop), 0 to 100px (mobile).

***

### Product Media (image panel)

The Product media panel displays your product's images and videos. Click the **Product media** block within the Product information section to access these settings.

| Setting                   | What it controls                                                                                                |
| ------------------------- | --------------------------------------------------------------------------------------------------------------- |
| **Layout type**           | *Carousel* — a single large image with navigation arrows. *Grid* — multiple images displayed in a tiled layout. |
| **Aspect ratio**          | Forces all images to a consistent shape: *1:1 (square)*, *4:5 (portrait)*, *16:9 (landscape)*, or *Original*.   |
| **Thumbnails**            | A row of small clickable preview images below the main image.                                                   |
| **Image zoom**            | Hover-to-zoom on desktop and pinch-to-zoom on mobile — lets customers inspect product details closely.          |
| **Video autoplay / loop** | For stores featuring product video — controls whether videos play automatically and loop continuously.          |
| **Color scheme**          | Override the media panel's background independently from the rest of the product section.                       |

{% hint style="success" %}
**Tip:**

* Enable **Image zoom** on both desktop and mobile. Customers want to inspect textures, stitching, size details, and material quality before purchasing — zoomable images reduce uncertainty and increase confidence.

***

* Use the *Grid* layout when you have 3–6 images per product. Customers can scan all images at a glance without clicking. Switch to *Carousel* when you have more than 6 images to avoid a cluttered layout.
  {% endhint %}

***

### Product Details (information panel)

The Product details panel contains all purchase-related information: title, price, variant picker, description, and the Add to Cart button. Click the **Product details** block within the Product information section to access these settings.

**Style**

Controls the visual presentation of the details panel.

| Option      | Description                                                                                                                        |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| **Classic** | Content sits in an open, borderless layout with optional dividers between elements. Clean and minimal.                             |
| **Boxed**   | All content is enclosed in a raised card with a background color and borders. Creates strong visual emphasis on the purchase area. |

***

**Show divider (Classic only)**

Adds a thin horizontal line between each element inside the details panel — title, price, variants, description, buttons. Creates clear visual separation without using a boxed container.

***

**Corner radius (Boxed only)**

Controls how rounded the boxed details panel's corners appear.

| Option          | Description                                                                                                    |
| --------------- | -------------------------------------------------------------------------------------------------------------- |
| **Main corner** | Uses your theme's global corner radius setting. Keeps the product page consistent with the rest of your store. |
| **Small**       | Slightly rounded corners.                                                                                      |
| **Extra small** | Barely rounded — close to a straight edge.                                                                     |
| **None**        | Perfectly sharp right-angle corners.                                                                           |
| **Custom**      | Enter a specific pixel value for precise control.                                                              |

***

**Gap**

Controls the vertical spacing between stacked elements within the details panel — the distance between the title and price, price and variant picker, and so on.

**Options:** *Default / Custom*

Enable **Custom on mobile** to independently control element spacing on phones.

***

### Public sections

You can add any Custom Section below the main product content using **Add section**. This is useful for cross-sell rows, testimonials, brand story sections, and more.

{% hint style="info" icon="note-sticky" %}
**Note:** See the Custom Section guide to learn how to add and configure custom sections below your product template.
{% endhint %}

***

### How to use it effectively

#### The conversion-focused product page

An optimized product page keeps the customer's attention on the purchase decision:

1. Enable **Invisible mode** on the section so the product layout flows with your page.
2. Set **Product media** to *Grid* layout for stores with multiple images per product.
3. Enable **Image zoom** on both desktop and mobile.
4. Set **Product details** to *Boxed* style — the card draws the eye to your Add to Cart button.
5. Set **Container width** to *Standard* or *Wide* for a spacious two-column layout.

#### The minimal, editorial product page

1. Disable **Invisible mode** and set a custom light background color (e.g., `#f5f3f0`).
2. Set **Product media** to *Carousel* layout.
3. Set **Product details** to *Classic* style with **Show divider** enabled.
4. Choose *None* for corner radius — sharp edges feel more editorial.
5. Increase the **Gap** between panels to give the imagery more visual space.

***

### Tips & best practices

{% hint style="success" %}
**Tip:**&#x20;

* Your product images are your most powerful selling tool. Use professional photography that shows the product from multiple angles, on a model (for apparel), or in context (for home goods). No amount of layout customization compensates for poor product images.
  {% endhint %}