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

# Video

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

The **Video** section allows you to showcase a promotional or brand video with customizable content overlay. You can use a **Shopify-hosted video** or embed a video from an external URL such as YouTube or Vimeo.

The section supports autoplay, looping, playback controls, cover images, responsive content positioning, color schemes, and customizable text and button blocks.

{% hint style="info" %}
**Recommendation Size**\
Video image banner size: 1600x700
{% endhint %}

### How to Add Video Section

{% hint style="success" %}
**Steps**

1. From your Shopify Admin, go to **Online Store → Themes**.
2. Click **Customize** on your Cello theme.
3. Open the page where you want to add the Video section.
4. Click **Add section**.
5. Select **Video**.
6. Select a **Shopify-hosted video** or add a video URL.
7. Add a **Cover image** if required.
8. Configure video playback settings such as autoplay, loop, and controls.
9. Add content blocks such as **Text**, **Heading**, and **Buttons**.
10. Configure the content position and alignment.
11. Adjust the mobile display settings.
12. Set the section spacing and color scheme.
13. Click **Save** to publish the changes.
    {% endhint %}

<table><thead><tr><th width="216">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Make section full width</td><td>Displays the video across the full available width of the page.</td></tr><tr><td>Heading</td><td>Add a heading for the video section.</td></tr><tr><td>Heading size</td><td><p>Choose the heading size:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Play video on loop</td><td>Continuously repeats the video after it finishes. When the video finishes playing, it will automatically restart.</td></tr><tr><td>Show play button</td><td>Displays a play button that allows customers to manually start the video. For visual guide show <a href="#show-play-button"><mark style="color:blue;">screenshot</mark></a></td></tr><tr><td>Auto play video</td><td>Automatically starts the video when it becomes visible.</td></tr><tr><td>Enable control</td><td>Displays video playback controls such as play, pause, and volume. For visual guide show <a href="#enable-control"><mark style="color:blue;">screenshot</mark></a></td></tr><tr><td>Shopify hosted video</td><td><p><strong>Video</strong></p><p>Select a video uploaded and hosted directly through Shopify.<br>Use only the MP4 video here.<br><br><strong>Or embed video from URL</strong><br>Add a YouTube or Vimeo video URL when a Shopify-hosted video is not selected.<br><br><strong>Cover image</strong><br>Add an image displayed as the video cover/placeholder. </p><p>For visual guide show <a href="#cover-image"><mark style="color:blue;">screenshot</mark></a><br><br><strong>Video alt text</strong><br>Add an accessible description of the video for customers using screen readers.</p></td></tr><tr><td>Style</td><td><p><strong>Show container on desktop</strong><br>Displays the video content inside a separate container on desktop. </p><p></p><p><strong>Desktop content position</strong></p><p>Controls the vertical position of the content overlay.</p><ul><li>Top Left</li><li>Top Center</li><li>Top Right</li><li>Middle Left</li><li>Middle Center</li><li>Middle Right</li><li>Bottom Left</li><li>Bottom Center</li><li>Bottom Right</li></ul><p>For visual guide show <a href="#desktop-content-position"><mark style="color:blue;">screenshot</mark></a></p><p></p><p><strong>Content alignment</strong><br>Customization of content alignment  is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Show content on mobile</td><td><p>Enable this settings to show video content in mobile device. </p><p></p><p>For visual guide show <a href="#show-content-on-mobile"><mark style="color:blue;">screenshot</mark></a></p></td></tr><tr><td>Color scheme</td><td><p>In this section, you can change the background and foreground color of a section using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul></td></tr></tbody></table>

<div data-with-frame="true"><figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FHln2mLbqUnWBQN25BZXh%2Fvideo.png?alt=media&amp;token=0a8d0dad-652f-4ee2-8c73-bf1233c1ffb5" alt=""><figcaption></figcaption></figure></div>

## Section Settings Screenshot

#### Show play button

{% hint style="danger" %}
**Note:** '**Show play button**' only visible when '**Auto play video**' is set to '**Disabled**'.
{% endhint %}

<div data-with-frame="true"><figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2F5pzcPEUyHk8tyfAeNBjG%2FShow%20play%20button.png?alt=media&amp;token=3992b5b9-4ab8-4068-8d41-18bfbab8a8b9" alt=""><figcaption><p><strong>Show play button</strong></p></figcaption></figure></div>

#### Enable control

<div data-with-frame="true"><figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2F2uqWmp8MMnkSrAv4P233%2FEnable%20control.png?alt=media&amp;token=11cc1f55-1480-4ac0-8655-166e3c8bd682" alt=""><figcaption><p><strong>Enable control</strong></p></figcaption></figure></div>

#### Cover image

<div data-with-frame="true"><figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FGFHNniOKIChBHnn4Bior%2FCover%20image.png?alt=media&amp;token=c61a6409-88d9-43ad-8bf6-d9da87089b57" alt=""><figcaption><p><strong>Cover image</strong></p></figcaption></figure></div>

#### Desktop content position

<div data-with-frame="true"><figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FyINMBSj8Lcs5JfRowl9P%2FDesktop%20content%20position%20-%20top%20left.png?alt=media&amp;token=fb07e3d5-831e-48fe-af94-a30dc4036144" alt=""><figcaption><p><strong>Desktop content position — Top Left</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FgNV6EpIxLq6HHrPaknNW%2FDesktop%20content%20position%20-%20top%20center.png?alt=media&amp;token=84ca120f-1722-44b5-9c49-c4faa998b6cb" alt=""><figcaption><p><strong>Desktop content position — Top Center</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FmuBDeSrXGqErfXw8unwB%2FDesktop%20content%20position%20-%20top%20right.png?alt=media&amp;token=c3a5a3f5-39c4-4c86-bdf4-03d480d44187" alt=""><figcaption><p><strong>Desktop content position — Top Right</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FEfa1CPldOlRYeWrN8nrF%2FDesktop%20content%20position%20-%20middle%20left.png?alt=media&amp;token=a285815a-b22e-488b-b635-18b826ad40b1" alt=""><figcaption><p><strong>Desktop content position — Middle left</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2F751LyGTwK8xcqONG5I9b%2FDesktop%20content%20position%20-%20middle%20center.png?alt=media&amp;token=6c6b868d-07ef-4d69-9539-bc8904df1a6a" alt=""><figcaption><p><strong>Desktop content position — Middle center</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2Fe5n9SPrQhbCdV65F2owb%2FDesktop%20content%20position%20-%20middle%20right.png?alt=media&amp;token=e494f7f4-05c3-42e0-acb8-fc7afb981d16" alt=""><figcaption><p><strong>Desktop content position — Middle right</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FtLhL23RJld5RcSYjWQX3%2FDesktop%20content%20position%20-%20Bottom%20left.png?alt=media&amp;token=a937062c-1120-4ae2-947e-39892bbdb1d4" alt=""><figcaption><p><strong>Desktop content position — Bottom left</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FR89Ge1Pg0LSpQwvsp2t2%2FDesktop%20content%20position%20-%20Bottom%20center.png?alt=media&amp;token=bb404314-547e-4468-9189-ec50262ad0e9" alt=""><figcaption><p><strong>Desktop content position — Bottom Center</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FmlaUohhf20pIAxqeqLGX%2FDesktop%20content%20position%20-%20bottom%20right.png?alt=media&amp;token=82eba14b-4174-43a4-a4e3-8d7e72364f0c" alt=""><figcaption><p><strong>Desktop content position — Bottom right</strong></p></figcaption></figure></div>

#### Show content on mobile

<div data-with-frame="true"><figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FSgALkk2V6keytMRWuP6P%2FShow%20content%20on%20mobile%20-%20enabled.png?alt=media&amp;token=1c465f49-117a-42a1-8bf6-1218f162591f" alt=""><figcaption><p><strong>Show content on mobile — Enabled</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FnxAXFFUQRzgcNUWnXfiC%2FShow%20content%20on%20mobile%20-%20disabled.png?alt=media&amp;token=bccf6e6a-1b92-425f-9d6e-85dae49d8e0d" alt=""><figcaption><p><strong>Show content on mobile — Disabled</strong></p></figcaption></figure></div>

## Add block

The Video section supports multiple content blocks, allowing you to build a complete promotional message over the video.

Available blocks shown in the theme:

* **Text**
* **Heading**
* **Text**
* **Buttons**

To add blocks to the Video section, click on the 'Add block'.&#x20;

<table><thead><tr><th width="216">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td><p>The <strong>Heading</strong> block displays the primary message over the video.</p><p></p><p><strong>Heading</strong><br>Enter the main promotional heading.<br><br><strong>Heading size</strong></p><p>Customization of the "Heading size" in the Video section is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Text</td><td><p><strong>Description</strong><br>The <strong>Text</strong> block adds a short supporting message to the video content.</p><p></p><p><strong>Example:</strong></p><p><code>Turn Up the Moment</code>.<br><br><strong>Description style</strong></p><p>Choose the style of the text content.</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr><tr><td>Buttons</td><td><p>The <strong>Buttons</strong> block adds a call-to-action button to the video.</p><p></p><p><strong>Button label</strong><br>Enter the text displayed on the button.</p><p>Leave the label blank if you don't want to display the button.</p><p><br><strong>Button link</strong><br>Select the destination customers should visit when clicking the button.</p><p></p><p>You can link to products, collections, pages, or other supported destinations.<br><br><strong>Open This Link in a New Window</strong></p><p>Enable this option to open the linked page in a new browser tab.<br><br><strong>Button style</strong></p><p>Choose the visual style of the button, such as:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr></tbody></table>

<div data-with-frame="true"><figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FlGXphgJ4Td4uUCjmvdcn%2Fvideo-block.png?alt=media&amp;token=cca6cc53-4a70-47a0-8857-4f0b30c769e7" alt=""><figcaption></figcaption></figure></div>

## Best Practices

* Use a **short, high-quality video** that communicates the message quickly.
* Keep the main heading **short and impactful**.
* Use a **clear CTA** such as *Shop Now*, *Explore More*, or *Learn More*.
* Add a **cover image** for better visual presentation before playback.
* Avoid placing important text over busy areas of the video.
* Use **autoplay and loop** for short background-style promotional videos.
* Enable video controls when customers need to control playback.
* Keep mobile content concise and easy to read.
* Always provide meaningful **video alt text** for accessibility.
* Optimize video files to avoid unnecessary loading and performance impact.