Configure what's under the hood of your website.

The Favicon, custom code, web services and some advanced settings can be added in the Settings panel of YOOtheme Pro. Most of these setting need to be configured only once. There is also an About section with the Changelog of YOOtheme Pro.


Add the regular browser Favicon and the Apple touch icon to the website.

Option Description
Favicon The Favicon appears in the browser tab and your bookmarks as soon as you bookmark a website. The recommended size for the favicon.png is 96x96 pixels.
Touch Icon The Apple touch icon appears as soon as a website gets bookmarked on an iOS or Android device or if it is added to the home screen. The recommended size for the apple-touch-icon.png is 180x180 pixels.

Show a banner to inform your visitors of cookies used by your website.

Option Description
Cookie Banner Choose between a simple notification that cookies are loaded or require a mandatory consent before loading cookies.
Type Choose between an attached bar or a notification.
Position Choose the position of the cookie banner.
Style Choose the style of the cookie banner.
Content Enter the cookie consent message.
Consent Button Style Choose the consent button style.
Consent Button Text Enter the consent button text.
Reject Button Style Choose the reject button style.
Reject Button Text Choose the reject button text.
Cookie Scripts Add custom JavaScript which sets cookies. It will be first loaded after consent is given. The <script> tag is not needed.

Custom Code

Add custom JavaScript and CSS/LESS to the website.

Option Description
Script Add custom JavaScript to your site. The <script> tag is not needed.
CSS/LESS Add custom CSS or LESS to your site. All LESS theme variables and mixins are available. The <style> tag is not needed.

Important Please be careful with incorrect LESS code. Syntax errors may cause the Style Customizer to stop working.


Enter the API key for your website.

Enter API key


Configure some advanced settings.

Option Description
Child Theme Select a child theme. Note that different template files will be loaded, and theme settings will be updated respectively. For more information, read the chapter on Child Themes.
Media Folder This folder stores images that you download when using layouts from the YOOtheme Pro library. It's located inside the Joomla /images folder.
Search Component Select the search module that you want to use when search is enabled in the Header settings.
Bootstrap Bootstrap is only required when default Joomla template files are loaded, for example for the Joomla frontend editing.
Lazy Loading Speed up page loading times and decrease traffic by only loading images and map elements as they enter the viewport.
Next-Gen Images Serve optimized images in WebP format with better compression and quality than JPEG and PNG for Chrome and Opera.
jQuery Enable the Load jQuery option to write custom code based on the jQuery JavaScript library.
Syntax Highlighting Enable automatic syntax highlighting for any code block on your website. Use GitHub for light and Monokai for dark backgrounds.
Cache Clear cached images and assets. Images that need to be resized are stored in the theme's cache folder. After re-uploading an image with the same name, you'll have to clear the cache.
Theme Settings Export all theme settings and import them into another installation. This doesn't include content from the layout, style and element libraries or the template builder.

Lazy Loading

Enable the lazy loading option to significantly speed up page loading times and decrease traffic.

Only images which are initially in the viewport are loaded. Other images are lazy loaded as they enter the viewport when scrolling. This not only applies to image elements, but also to CSS background images. An empty placeholder image is generated instantly to prevent content jumping while images are being loaded or not yet in the viewport.

Additionally, the map element in the page builder is also lazy loaded.

Next-Gen Images

Enable the next-gen images option to serve optimized images in WebP format with better compression and quality than JPEG and PNG image formats. Images will load much faster and consume less cellular data. Chrome, Firefox, Edge and Opera support WebP images. For other browsers YOOtheme Pro still serves the original JPEG and PNG images.

Note that third-party caching plugins or the Nginx Reverse Proxy require further configuration to make this option work.

External Services

Provide API keys to integrate web services into your website.

Option Description
Google Maps Enter your Google Maps API key to use Google Maps instead of OpenStreetMap. It also enables additional options to style the colors of your maps.
Google Analytics Enter your Google Analytics ID to enable tracking. IP anonymization may reduce tracking accuracy.
Mailchimp API Token Enter your Mailchimp API key to use it with the Newsletter element.
Campaign Monitor API Token Enter your Campaign Monitor API key to use it with the Newsletter element.

System Check

This panel displays critical issues, improvements and recommendations for YOOtheme Pro. Refer to this panel in case of any issues with YOOtheme Pro.

System check


This panel shows the YOOtheme Pro version currently used on this site. A What's New modal and a changelog are also provided. Refer to this section after an update to see what has changed and what is new.

YOOtheme Pro Documentation