Vimeo OTT currently offers a handful of site themes, all of which are customizable.
In this article
How do I choose or switch my site's theme?
Follow these steps to select a theme for your site:
- To choose a theme and edit it, you must have a subscription product with videos created, and your payout connected first.
- In the Vimeo OTT admin, navigate to Distribution > Platforms > Website settings.
- On this Website Settings page, you will see the currently selected theme. Click Switch Theme to be taken to the Themes page.
- Select the theme you like. A description of what each theme includes will display alongside the thumbnail. You can preview what it looks like by clicking Live preview.
- Click the Select Theme button to set it.
- You can then go on to edit the selected theme via the Edit Theme button.
If you choose one theme and make edits to it, and later decide to switch to another theme, any edits you previously made will be lost.
How do I customize my site's theme?
In order for any changes made in the theme editor to appear, the product must be published. Additionally, each item in your 'Getting started' list (found in the upper right corner of your admin) must also be completed.
After choosing your site’s theme, you can further customize it by using the theme editor. Navigate to Manage > Theme Editor.
Along the left side is a panel where you can edit various components of your site, while the rest of the window is a preview of your site.
You can click Exit to leave the theme editor at any time without saving your changes. Clicking Publish will push any changes you’ve made to your live site.
Below these options is Preview which will open a draft version of your site that includes any changes you’ve made prior to publishing. If you’ve made changes that you don’t like, clicking Revert will roll back your site to its previously published version.
Below these are various settings for different areas of your site. Click the down arrow on the right side of each to expand the respective panel (click it again to collapse the panel).
Many of the written settings (i.e. titles and descriptions) will have an Add translations menu below them. Click it and choose a language to add a translation for that option. Any user who selects the corresponding language using the language selector at the bottom of your site will see this text instead of the default English. Make sure you’ve enabled translations in your site settings in order for this to work.
Site settings
These settings are generally what people see when they search for your site on search engines such as Google.
- Site title - The title is seen on search engines and at the top of the browser window when someone visits your site.
- Site description - The description is seen when your site appears in search results.
- Facebook page - A Facebook page link can be included when your site appears in search results.
- Twitter username - A Twitter profile link can be included when your site appears in search results.
- Primary site color - Specify your brand’s color to use for buttons and player controls.
Global options
- Browser tab icon (square) - This is the icon that appears in the browser tab next to your site title.
-
Bookmark icon (square) - This is the icon that appears on mobile devices if someone bookmarks your site to their device’s home screen.
- ⚠️Note: The accepted file formats for both of the above icons are .jpeg, .png., and .gif; .ico files are currently not supported.
- Primary button colors - This is the color various buttons on your site will be, such as “Start your free trial” or “Start watching.”
- Nav background color - This refers to the color of the navigation bar going across the top of your site.
- Nav text color - The color of the text within your top navigation bar which links to other areas of your site (e.g. “Browse,” “Forums,” “Search”) as well as other links you may add (discussed below).
- Nav logo image - Upload an image of your logo to appear in the upper left corner of your site. We support PNG files with transparent backgrounds. The site will automatically resize the image to fit in the space provided; horizontal images work best.
- Nav background image - Instead of a color, you can upload an image to take the place of your main navigation menu. JPG, PNG, and GIF files are accepted. By default, we’ll format this image to fill the entire navigation area.
- Tile background image - If you prefer your Nav Background Image to tile repeatedly, choose this option.
- Show gifting link - Includes a link to gift a subscription directly on the home page.
- Add nav link - If you want to add custom URLs to your top navigation, such as an online store or your social media pages, click + Add and enter the Title (which appears in the navigation) and the full URL to link to it (including "http://" or "https://" depending on which protocol your site uses). You can add as many as you’d like but keep in mind that adding more than three items will start to make the menu appear cluttered.
-
*NEW* Customize Font - this allows you to select from a list of over 100 of the most popular Google fonts to apply across your site.
The remaining customization options in the theme editor will vary based on which theme you select. The themes each section is available in are specified in parentheses.
Site Banner
Here is where you will be able to create a custom banner that will be displayed across all pages of your site. You can use this to highlight major site updates, flag holiday promotions, and more!
In this section you can:
- Toggle the banner on and off
- Set a headline text and subtext
- Optionally set a URL that the entire banner will link out to
- Select specific colors for both the banner background and texts
💡Tip: The banner can be additionally styled using custom CSS. The classes for the banner elements are:
.custom-banner--container, .custom-banner--header, .custom-banner--subtext
Browse options (Bullion, Moonstone, Obsidian, Onyx, Topaz)
Here is where you can choose to show automatically created categories for your Movies and Series collections. You can toggle these on and off here as well as in your general website settings.
⚠️Note: For the Moonstone theme, the Content on the homepage is showcased under the Content tab, where only your collections are showcased.
Hero promotion (Bullion, Obsidian, Onyx, Topaz)
This will customize the top fold of your site and can include assets such as a background image, title, description, and pricing.
Hero options (Moonstone)
Similar to Hero Promotion for other themes, with more options for your homepage’s background and less text.
⚠️Note: This theme uses the thumbnail from your subscription product as the main image that appears on your home page. To change this, you'll need to change the thumbnail on your product.
More info (Onyx)
A description of the content you offer, with an optional email capture field.
Carousel tab 1, 2, 3 (Topaz)
The three (3) carousel tabs include promotional content for your site, such as what kind of content viewers will see. All tabs will include a button that links to your checkout page; carousel tab 3 will additionally give you the option to display devices (e.g. “Watch anywhere”). All allow you to customize the copy, background image, and color overlay.
Mailing list (Obsidian, Topaz)
Choose whether to display a mailing list signup and customize the text displayed.
Promotions (Obsidian)
Toggle on and off a promotional section of your homepage. This can include blurbs about what your product offers and why people should subscribe. You can add as many as you like.
Content sections 1, 2, 3, 4, 5 (Onyx)
Add up to five (5) promotional sections to your site’s homepage which can include an image, title, description, or button to a specific part of your site (e.g. “/browse”). This will create a sub-navigation for your visitors as they scroll down, which will include each section’s short title.
Schedule (Obsidian)
You can choose to display your content schedule, such as when new episodes will be released.
Content preview (Bullion, Obsidian)
Display some of your videos on your site’s homepage. You can then choose to display Video thumbnails, collection thumbnails, or custom images and links. Collection thumbnails will link to a preview page of the content within the collection and the site visitor will be able to watch the corresponding trailer, if available. Custom images will allow you to manually add a link to be associated with a certain image. Video thumbnails will not link anywhere.
Devices (Bullion, Obsidian, Onyx)
If you have branded apps, you may want to promote that your viewers can watch from any device; this area helps promote that with a custom title and description. You can then upload individual thumbnails for each device shown–TV, tablet, phone, laptop–if you are displaying this area. If you don’t upload a thumbnail, it will default to the hero background image on your site. (💡Tip: The Topaz theme includes this within the “Carousel tab 3” section)
Purchase products (Onyx, Topaz)
Your TVOD products, if you have any, will be in this section automatically. Customize the section’s title and colors, or choose to hide it.
Footer (Obsidian)
A closing header (e.g. “Subscribe now!”) and description line (e.g. “Ready to get started?”) at the bottom of your homepage.
Contact (Bullion)
An additional area to include contact information (e.g. “Have questions? Contact support@vhx.tv”) with the option to customize the section’s background color and add an image.
Footer links (Bullion, Moonstone, Obsidian, Onyx, Topaz)
Add custom links to anywhere on the web in addition to default links that appear in the very bottom of the page (Forums, Help, Terms, Privacy, Cookies, Sign Out).
⚠️Note: Be sure to use the full URL, including "http://" or "https://" depending on which protocol your site uses as prefixes on your links to ensure they appear. If you don't include the protocol the link won't work.
Custom styles (Bullion, Moonstone, Obsidian, Onyx, Topaz)
You can apply custom CSS to your site in the text box here.