---
title: "Themes: your site's visual identity"
description: "Set the logo, favicon, colors, fonts and buttons applied across your whole site for a consistent visual identity."
url: https://docs.vivlab.com/en/sections/themes-brands
---

# Themes

The **Themes** section gathers all the visual elements that define your site's identity: logo, favicon, color palette, typography, button shapes and social sharing image templates. The settings defined here automatically apply across your entire site ([showcase pages](https://docs.vivlab.com/en/sections/pages.md), [product pages](https://docs.vivlab.com/en/sections/products.md), [blog articles](https://docs.vivlab.com/en/sections/blogs-articles.md), emails and [invoices](https://docs.vivlab.com/en/sections/invoices.md)) to ensure a consistent identity everywhere.

Come here when you set up your visual identity at launch, when you refresh your brand guidelines, or simply to adjust a specific color or font.

The dashboard is shown in French, with English captions.

<DocsVideo
  video-id="walkthrough-themes-brands"
  src="https://docs.vivlab.com/videos/themes-brands/themes-brands.mp4"
  poster="/videos/themes-brands/poster.webp"
  captions="/videos/themes-brands"
  label="Tutorial: change button shape"
  locale="en"
  :duration="16"
/>

::: details Read the video steps

1. <VideoTimecode video-id="walkthrough-themes-brands" :seconds="0" label="Play at" /> — In “Shapes & colors”, open “Button shapes”.
2. <VideoTimecode video-id="walkthrough-themes-brands" :seconds="4" label="Play at" /> — Choose “Fully rounded”.
3. <VideoTimecode video-id="walkthrough-themes-brands" :seconds="7" label="Play at" /> — Check the button preview, then save.
4. <VideoTimecode video-id="walkthrough-themes-brands" :seconds="11" label="Play at" /> — The rounded shape is saved in the theme.

:::

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

## Logo

Your logo is used in the navigation bar, the footer, transactional emails and the header of your [invoices](https://docs.vivlab.com/en/sections/invoices.md). Setting it here avoids having to duplicate it in every module.

Upload your file in the dedicated frame. Prefer a vector or high-resolution file with a transparent background so it looks clear wherever it is used.

## Favicon

The favicon is the small icon shown in the browser tab next to the page title. It strengthens recognition of your brand when several tabs are open and also appears in the visitor's bookmarks.

Upload a square image in .png, with dimensions of at least 100 × 100 pixels for good legibility.

## Site behavior

This section gathers the settings that change your site's general behavior on the visitor side.

Enable **Disable right-click on your site** to block the context menu on every page of your site. This protects your content (text, images) from quick copy-paste and download via right-click. When the option is active, a confirmation message appears in the section.

## Colors & fonts

This section gathers your brand's color palette and the fonts used by your site.

The **Color palette** block stores your brand's main colors. They are offered as shortcuts in every color picker of the visual editor, so you don't have to retype the hex codes every time you edit a page or article. Click on a swatch to edit the color, add a new color by clicking on the empty swatch, or delete a color that's no longer needed via the corresponding icon.

The **Google fonts** block sets the font for four elements: **Heading** (H1), **Subheading** (H2), **Paragraph** and **Button**. Click the font name to open the library: search the available fonts or import your own file with **Upload a font**. A preview under each element shows your selection.

<DocsScreenshot name="themes-brands-font" alt="Searching for Playfair in the font library." :width="201" :height="288" />

## Shapes & colors

This section defines the default button shape and the accent color used everywhere on your site (call-to-action buttons, links, highlighted elements). Centralizing this choice ensures a consistent rendering from one page to the next.

Choose the **Button shapes** from the list (Square, Slightly rounded or Fully rounded), then set the **Accent color**. Prefer a vivid or dark color that contrasts with white for good visibility. A **Button example** preview right next to it lets you check the result before saving.

<DocsScreenshot name="themes-brands-shape" alt="The three button shapes with a rounded-button preview." :width="521" :height="204" />

## Social preview

This section picks the image template used when a link to your site is shared on social networks or in a messaging app. The font and logo of these images come from your brand theme.

Four page types each have their own setting: **Home page & standard pages**, **Product pages** (the product photo is included in the image), **Categories** (category name and a sample of products) and **Blog posts** (the article cover image is used as background). Three templates are offered for each type as thumbnails: click the one you prefer. The picker next to each type changes which page, product, category or article is used in the thumbnails.