---
title: "Product theme: the presentation template"
description: "Choose the template used to display your product pages; a single edit updates the presentation of your entire catalog."
url: https://docs.vivlab.com/en/sections/themes-products
---

# Product theme

This page controls the appearance of the **product page**, that is the template used to display each individual [product](https://docs.vivlab.com/en/sections/products.md). This template is shared by your entire catalog: a single edit updates the presentation of all your products. The **Preview** on the right updates as you make changes. Switch between **Desktop** and **Mobile** to check both versions.

Come here when you want to align the product page with your [visual identity](https://docs.vivlab.com/en/sections/themes-brands.md), change the ready-made template, or customize the add-to-cart button by product type (physical product, digital product, subscription, event).

Your changes are saved in one go with **Save** at the top of the page, or discarded with **Cancel**.

The dashboard is shown in French, with English captions.

<DocsVideo
  video-id="walkthrough-themes-products"
  src="https://docs.vivlab.com/videos/themes-products/themes-products.mp4"
  poster="/videos/themes-products/poster.webp"
  captions="/videos/themes-products"
  label="Tutorial: choose and save a product theme"
  locale="en"
  :duration="17.8"
/>

::: details Read the video steps

1. <VideoTimecode video-id="walkthrough-themes-products" :seconds="0" label="Play at" /> — Preview the theme with an active product and its photo.
2. <VideoTimecode video-id="walkthrough-themes-products" :seconds="2.5" label="Play at" /> — Open the theme selector.
3. <VideoTimecode video-id="walkthrough-themes-products" :seconds="3.9" label="Play at" /> — Select the Mara theme.
4. <VideoTimecode video-id="walkthrough-themes-products" :seconds="5.6" label="Play at" /> — The Mara theme is selected.
5. <VideoTimecode video-id="walkthrough-themes-products" :seconds="7.4" label="Play at" /> — Try the Musca theme.
6. <VideoTimecode video-id="walkthrough-themes-products" :seconds="9.6" label="Play at" /> — Save the selected theme.
7. <VideoTimecode video-id="walkthrough-themes-products" :seconds="11.8" label="Play at" /> — The theme is saved. Reload the page to load its preview.
8. <VideoTimecode video-id="walkthrough-themes-products" :seconds="14.6" label="Play at" /> — After reloading, Musca remains selected and its preview is displayed.

:::

## Preview product

This section picks the product used for the preview and sets the global options of the page theme: predefined template, out-of-stock label and background and text colors.

Pick a **Sample product** to show the page preview: only active products are offered and the first one is preselected when the page opens. Without any product in your catalog, the preview shows "No product to display".

Pick a **Theme** to apply a coherent template (layout of images, title, variants and description): besides the default theme, nine named themes are available (Mara, Musca, Bale, Lyra, Rosa, Pico, Orion, Nova and Carbon).

Fill in **Out of stock**, the label shown when the product is no longer available (for instance "Being restocked"). Set the **Background** and the **Text color** to ensure a readable contrast with your visuals.

## Button labels

The add-to-cart button doesn't say the same thing depending on what is sold: "Add to cart" works for a physical product, but "Download" or "Subscribe" speak louder for a digital product or a subscription. This section lets you adapt the text by product type.

Enter the text shown for each of the four types: **Physical product**, **Digital product**, **Subscription** and **Event**. The right wording reassures the visitor by confirming the nature of the purchase before they click.

<DocsScreenshot name="themes-products-buttons" alt="Button labels adapted to physical products, downloads, subscriptions and events." :width="316" :height="438" />