> For the complete documentation index, see [llms.txt](https://vshop.gitbook.io/vshop/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vshop.gitbook.io/vshop/theme-sections/video.md).

# Video

The Video Section allows you to embed promotional or storytelling videos directly on your storefront — perfect for brand introductions, product showcases, or campaign highlights.

To customize the Video in our theme please follow the steps:

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Video**
3. **Save**
   {% endhint %}

**General**

* **Layout** – Choose the section layout style (e.g., *Default*).
* **Color scheme** – Apply your theme’s color palette for consistent styling.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FQvRL4PBQoVvbNl7mtrKl%2Fimage.png?alt=media&amp;token=cc3a5107-c274-4b2f-854e-25fa5a251a8b" alt=""><figcaption></figcaption></figure>

***

**Video**

* **Upload local video** – Add a self-hosted video file.
* **Video URL** – Embed a YouTube or Vimeo video by entering its URL.

  > If both local and URL videos are added, the local video will be prioritized.
* **Cover image** – Set a thumbnail image (recommended size: *1920 × 680px*).
* **Show image thumb** – Toggle ON to display a video thumbnail before playback.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FKiqAd1T2eRdibVIgkBJp%2Fimage.png?alt=media&amp;token=5d255a61-af07-4766-aa88-7e72310aeab3" alt=""><figcaption></figcaption></figure>

***

**Overlay Settings**

Enhance readability when text is displayed over the video.

* **Show overlay** – Toggle ON to add a dark transparent layer on top of the video.
* **Overlay color** – Choose the overlay color (default: black `#000000`).
* **Overlay opacity** – Adjust transparency level (e.g., *40%*).

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2F0czYdjfdg6eedAw1GVl5%2Fimage.png?alt=media&amp;token=514f89be-ad11-449f-bef3-10a5d685b525" alt=""><figcaption></figcaption></figure>

***

**Video Height Settings**

Control the section height across devices.

* **Type height** – Choose between *Auto* or *Custom height*.
* **Section height (desktop/tablet/mobile)** – Set custom video height for each device (e.g., Desktop: *670px*, Tablet: *600px*, Mobile: *415px*).

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FqCS6JIioHeEBswsTQfoQ%2Fimage.png?alt=media&amp;token=878d8f9d-7385-4274-ab24-aed52b6120c7" alt=""><figcaption></figcaption></figure>

***

**Content**

Add promotional or informative text overlaying the video.

* **Heading** – Main title displayed on the video.
* **Subtext** – Short supporting text.
* **Description** – Longer message or call-to-action.
* **Button label** – Add a CTA button (e.g., *Shop now*).
* **Link** – Define the button link destination.
* **Button open link in** – Choose to open in *Current tab* or *New tab*.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FyNOE2frBNn2K5yzLre4P%2Fimage.png?alt=media&amp;token=e903cd86-35dd-42e2-807f-a18bd19282f1" alt=""><figcaption></figcaption></figure>

***

**Adjustments for Content Settings**

* **Content position** – Define where the text appears (e.g., *Center center*).
* **Max width content** – Limit text width for readability.
* **Font size / weight** – Customize title, subtitle, and description typography for visual hierarchy.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FotBHKA1tS70VCMtGJjPg%2Fimage.png?alt=media&amp;token=04ed5ed5-3a7b-4eed-a152-9e2666777349" alt=""><figcaption></figcaption></figure>

***

**Section Padding**

Adjust space around the video for balanced layout.

* **Top padding** – Space above the video (default: *36px*).
* **Bottom padding** – Space below the video (default: *36px*).
* **Remove default space between sections** – Toggle ON to eliminate default gaps between sections.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FiestqvgUM8iAzHwxunsI%2Fimage.png?alt=media&amp;token=600d3f35-568d-4fa7-97af-050d5cd20162" alt=""><figcaption></figcaption></figure>

***

💡 **Tip:**\
Use short, high-quality clips (10–30s) to maintain engagement. Add an overlay when text overlaps bright areas of your video for better readability.