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

Use the product page to show a single product with its media, price, options, and purchase actions. The page pulls the product title, description, images, variants, price, and inventory directly from the product you set up in Shopify admin.

{% hint style="info" %}
**Content source:** Product title, description, media, variants, price, SKU, vendor, category, and inventory counts are not entered in Theme Editor. They come from the product's settings in Shopify admin (Products). The settings on this page control layout, style, and which fields are shown, not the content itself.
{% endhint %}

{% hint style="info" %}
**This page documents the `default product` template.** The theme ships five product templates that share the same structure but arrive with different default values. See [7. Template variants](#id-7.-template-variants).
{% endhint %}

### 1. What you can customize

* The media gallery layout, pagination style, zoom, and video behavior
* Which product details appear (vendor, category, SKU, rating, taxes notice, badges)
* How variants are selected (buttons or dropdown) and whether swatches show
* Inventory messaging and low-stock thresholds
* A countdown timer for urgency, and a features list with icons
* Purchase controls, pickup availability, sharing, and a sticky buy button
* Product recommendations, plus seven optional content sections below the product in the Default product template

### 2. How to access the product page

{% stepper %}
{% step %}
**Open the product template**

In Theme Editor (Customize), open the product template you want to edit.
{% endstep %}

{% step %}
**Open Product information**

In the section list, open **Product information** and its nested blocks.
{% endstep %}

{% step %}
**Adjust blocks**

Adjust the settings for each block, then use **Add block** to add optional blocks.
{% endstep %}

{% step %}
**Edit supporting content**

In the Default product template, open sections 2 to 8 below Product information to edit the supporting content.
{% endstep %}

{% step %}
**Preview the product**

Preview with a product that has variants, sale pricing, low stock, and multiple images.
{% endstep %}

{% step %}
**Save**

Click **Save**.
{% endstep %}
{% endstepper %}

### 3. Page overview

The product page is made up of two built-in areas that work together under Product information:

<table><thead><tr><th width="194.36328125">Area</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Product media</strong></td><td>Controls the product gallery and how shoppers browse product media.</td></tr><tr><td><strong>Product details</strong></td><td>Holds the product information, purchase controls, and additional product content.</td></tr></tbody></table>

```
Product 
 ├──Product information
   ├── Product media
   ├── Product details
```

### 4. Product information

<details>

<summary><strong>4.1. Layout</strong></summary>

<table><thead><tr><th width="191.4659423828125">Setting</th><th width="162.21380615234375">Option</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Invisible mode</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Disables the background color and padding values for the section.<br>See <a href="/arctos-theme/section-templates/section.md#invisible-mode">Invisible mode</a> for detailed settings.</td></tr><tr><td><strong>Container width</strong></td><td><ul><li>Inherit</li><li>Full width</li><li>Standard</li><li>Wide</li></ul></td><td><p>Sets the content width of the section.</p><ul><li><strong>Inherit:</strong> Uses the <strong>Container width (default)</strong> setting from <a href="/pages/MtcWsJuspkVnqjnkw5Ur#id-2.-container-width">Theme settings → General → Container width</a>.</li><li><strong>Full width:</strong> Always uses the full available width.</li><li><strong>Standard:</strong> Uses the Standard container width defined in <a href="/pages/MtcWsJuspkVnqjnkw5Ur#id-2.-container-width">Theme settings → General → Container width</a>.</li><li><strong>Wide:</strong> Uses the Wide container width defined in <a href="/pages/MtcWsJuspkVnqjnkw5Ur#id-2.-container-width">Theme settings → General → Container width</a>.</li></ul><p>Container width is always full width on mobile.</p></td></tr></tbody></table>

</details>

<details>

<summary><strong>4.2. Inner content layout</strong></summary>

<table><thead><tr><th width="169.7684326171875">Setting</th><th width="157.5667724609375">Option</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Gap</strong></td><td><ul><li>Default</li><li>0–32px</li><li>Custom</li></ul></td><td>Sets the spacing between Product media and Product details.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Reveals a separate Gap value for mobile screens.</td></tr></tbody></table>

</details>

<details>

<summary><strong>4.3. Style</strong></summary>

<table><thead><tr><th width="175.84796142578125">Setting</th><th width="165.88067626953125">Option</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Inherit color scheme</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turning this On matches the section's colors to the page. Turning it Off lets you select a different color scheme.</td></tr><tr><td><strong>Color scheme</strong></td><td>Color scheme picker</td><td>Selects a color scheme when <strong>Inherit color scheme</strong> is Off.</td></tr></tbody></table>

</details>

### 5. Product media

The **Product media** area controls how product images and videos are displayed and how shoppers browse them.

See [Product media](/arctos-theme/page-templates/product/product-media.md) for detailed settings, including gallery layout, pagination, mobile behavior, zoom, video playback, variant media, styling, and spacing.

### 6. Product details

The **Product details** area contains the product information and purchase-related blocks displayed alongside the media gallery.

See [Product details](/arctos-theme/page-templates/product/product-details.md) for detailed settings and block configuration, including product information, variants, inventory, purchase controls, recommendations, and more.

### 7. Template variants

The theme ships [five product templates](/arctos-theme/page-templates/product/product-template-management.md). All five share the same layout structure, but each arrives with different default values so you can pick the starting point closest to what you want.

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

* Show product rating requires a product rating app, and Show Shop Pay Installments depends on Shop Pay Installments being enabled in Settings > Payments. Both toggles do nothing without their dependency.

***

* Complementary recommendations need products linked in the Search and Discovery app. Related recommendations work without setup.

***

* The `theme.size_chart` metafield overrides the size chart page per product, which is useful when categories need different charts.

***

* If you enable both Buy buttons and the Sticky buy button, check on mobile that the sticky bar doesn't cover other content.
  {% endhint %}

### Related documentation

* [**Product media**](/arctos-theme/page-templates/product/product-media.md) - gallery layout, zoom, video playback, and media browsing
* [**Product details**](/arctos-theme/page-templates/product/product-details.md) - the blocks displayed alongside the gallery
* [**Product template management**](/arctos-theme/page-templates/product/product-template-management.md) - create, edit, and manage product page templates for different products.