> 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/product-template.md).

# Product template

## Product Template

The Product Template controls how every product page on your store looks and functions. It manages the layout between your product images (on the left) and your product information — price, variant options, and the Add to Cart button (on the right).

The Product Template is automatically applied to every product page on your store.

***

### What you can customize

* **Media layout** — control how images and videos appear on the left side (grid, carousel, featured)
* **Image zoom** — enable zoom on desktop and mobile for detailed product inspection
* **Product details style** — choose between a boxed or inline details panel
* **Color scheme** — match the product page to your brand palette
* **Gap and spacing** — control the spacing between the media panel and the details panel

***

### How to access this template

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

> **💡 Tip:** Every product page on your store uses this template. To change the layout for one specific product, use Shopify's per-product template assignments in the product editor.

***

### Product page overview

| Area                | What customers see                                   | Why it matters                                    |
| ------------------- | ---------------------------------------------------- | ------------------------------------------------- |
| **Product Media**   | Image gallery, thumbnails, video, and zoom           | Customers buy what they can see clearly           |
| **Product Details** | Title, price, variants, description, and Add to Cart | The decision zone — everything needed to purchase |

***

### Container settings

**Invisible mode**

When enabled, removes the section's background and padding so the product layout sits cleanly on your page background — creating a seamless, unobtrusive look.

**Default:** *Enabled*

> **💡 Tip:** Invisible mode is enabled by default because the product page naturally flows with adjacent sections like banners or cross-sells. Keep it on unless you want the product page to have its own distinct background color.

**Container width**

Controls the maximum width of the product layout.

**Options:** *Inherit / Full width / Standard / Wide*

**Default:** *Inherit*

> **📌 Note:** On mobile, the container is always full width regardless of this setting — product images and details stack vertically for optimal touch interaction.

***

### Inner content layout

Controls the spacing between the media panel and the details panel on desktop.

**Gap**

Controls the spacing between the left media panel and the right details panel.

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

**Default:** *Default*

**Custom Gap** — When Gap is set to *Custom*: enter a value from 0–200px.

**Default:** *4px*

**Custom on mobile**

Enable different gap values for mobile devices.

**Default:** *Disabled*

**Mobile Gap** — Gap options for mobile.

**Default:** *Default*

**Mobile Custom Gap** — Custom gap value for mobile, from 0–200px.

**Default:** *4px*

> **💡 Tip:** Increase the gap between media and details when you have large, high-resolution product images. A wider gap gives the imagery more breathing room and prevents the details panel from feeling crowded.

***

### Style settings

**Inherit color scheme**

When enabled, the product page uses your theme's default color scheme.

**Default:** *Enabled*

**Color scheme**

When **Inherit color scheme** is disabled, pick a color scheme for the product page background and text.

**Default:** *Scheme 1*

**Custom background**

Enable to add a solid color or gradient background behind the product section.

**Default:** *Disabled*

**Background** — When Custom background is enabled: *None / Color*

**Color style** — When Background is *Color*: *Solid* or *Gradient*

**Color code** — The actual color values.

**Default:** *Solid — #ffffff*

> **💡 Tip:** Use a subtle off-white background (e.g., `#f9f9f9`) to create visual separation between the product page and sections above and below it. This is especially effective on stores with light-colored page backgrounds.

***

### Spacing settings

**Padding**

Enable to add custom padding values around the product section.

**Default:** *Disabled*

**Top / Bottom / Left / Right** — Padding from 0–200px.

**Default:** *0px*

**Custom on mobile** — Enable different padding values for mobile.

**Default:** *Disabled*

**Mobile Top / Bottom / Left / Right** — Padding from 0–100px.

**Default:** *0px*

***

### Product Media (left panel)

The left panel displays your product's images and videos. It is controlled by a fixed block — the settings below are accessible by clicking the **Product media** block within the Product information section.

Key media settings include:

* **Layout type** — *Carousel* or *Grid*
* **Aspect ratio** — controls image proportions (e.g., 1:1, 4:5, 16:9)
* **Thumbnails** — show thumbnail strip below the main image
* **Image zoom** — enable hover-to-zoom on desktop and pinch-to-zoom on mobile
* **Video autoplay / loop** — for stores that feature product video content
* **Color scheme** — override the media panel background independently

***

### Product Details (right panel)

The right panel displays your product's purchase information. It is controlled by a fixed block — the settings below are accessible by clicking the **Product details** block within the Product information section.

Key details settings include:

* **Style** — *Boxed* (with rounded corners) or *Inline* (full-width)
* **Show divider** — a thin line separating details from media
* **Corner radius** — how rounded the boxed details panel appears
* **Gap** — spacing between elements within the details panel

***

### Tips & best practices

> **💡 Tip:** Enable **Image zoom** on both desktop and mobile. Products with clear, zoomable images convert better — customers want to inspect details like fabric texture, stitching, and material quality before purchasing.

> **💡 Tip:** Set your **Product media** layout to *Grid* 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.

> **💡 Tip:** Use the **Boxed** style for **Product Details** when your store has a light background. The rounded corners and subtle shadow create a card effect that draws the eye to the purchase area. Use **Inline** for a cleaner, more minimal look on darker backgrounds.

> **⚠️ Warning:** Don't set a strong background color on the Product Template if you also use custom backgrounds on adjacent sections. Competing background colors create visual noise and pull attention away from the product itself.

***

### Common questions

**Q: How do I change the order of elements in the product details panel?**

A: The product details panel is built from a fixed layout. To reorder elements like title, price, and variants, use the **Product Details** block settings. Full reordering of individual elements within the details panel requires theme code changes.

**Q: Can I add blocks to the product page?**

A: The Product Template uses fixed internal blocks (Product Media and Product Details). You can add Custom Sections to any product page using Shopify's section-on-page feature — go to the product editor in Shopify Admin and add sections manually.

**Q: How do I add a video to a product page?**

A: Upload a video to your product in **Shopify Admin** → **Products** → select a product → **Media**. The video will automatically appear in the product image gallery alongside your photos.

**Q: Can I hide the product description from the details panel and show it elsewhere?**

A: Yes — in the Product Details block settings, you can toggle the visibility of the product description and other elements independently. Move the description to a Custom Section below the product page if you want it in a different layout.

***

### Related pages

* Global Theme Settings — configure product card styles, prices, and variant picker behavior
* Custom Section guide — add custom sections above or below the product template
* Collection Template — configure your collection listing pages
* Cart Template — what customers see after adding products to their cart