Ultimo Shop Documentation - Joomla 5

This guide shows you how to install and set up the Ultimo Shop VirtueMart template on Joomla 5 with VirtueMart 4.

Current release: Ultimo Shop 5.4.10, released 4 November 2026 · built against Joomla 5.4.10 and VirtueMart 4.8.6 (the quickstart ships both) · PHP 8.3 or later · What changed in each release

Buy Ultimo Shop · €44

Template Usage

Before using or installing this template please read the Terms of Service, which you agreed to when you bought the template.

Template Support

We provide support for using and setting up the template you downloaded from this website.

If you need help with the template

1. Install the quickstart package. It gives you an exact copy of the Ultimo Shop demo, and it is the easiest way to see how the demo is set up.
2. Read the knowledge base.
3. Log in and open a support ticket.

If you need help with Joomla or VirtueMart

1. Joomla documentation: docs.joomla.org
2. Joomla forum: forum.joomla.org
3. VirtueMart documentation: docs.virtuemart.net
4. VirtueMart forum: forum.virtuemart.net

Template Package Contents

Everything is in My Downloads once you have bought the template. Use the files in the Joomla5 folder.

1. Quickstart: ultimoshop-quickstart-J5.4.10.zip in Joomla5 / quickstart. A complete Joomla 5.4.10 site with VirtueMart 4.8.6, the template and the demo content.
2. Template: pkg_ultimoshop-5.4.10.zip in Joomla5 / TemplateFiles. Install this on a site that already has Joomla and VirtueMart.
3. Adobe Photoshop files in the Photoshop Files folder.

The Joomla3 folder holds the old version of the template for Joomla 3. You do not need it for a Joomla 5 site.

Which Should I Install, The Quickstart Or The Template

Starting a new shop? Use the quickstart. It installs Joomla, VirtueMart, the template and the demo content in one go, so your site starts out looking like the demo and you replace the content with your own. See how to install the Quickstart.

Adding the template to a shop you already have? Install only the template, as shown below. Your content stays as it is, and you set up the modules yourself using this guide. You need Joomla 5.4 from joomla.org and VirtueMart 4.8 from virtuemart.net, on PHP 8.3 or later.

Installing The Joomla Template

1. Log in to the Joomla administrator area of your website.
2. Open System and, under Install, select Extensions.
3. On the Upload Package File tab, drag in the template zip file, or select Or browse for file and choose it.
4. Use pkg_ultimoshop-5.4.10.zip from the Joomla5 / TemplateFiles folder. Joomla installs it as soon as the upload finishes.

How Do I Set The Template As The Default Joomla Template

1. Open System and, under Templates, select Site Template Styles.
2. Tick the check box next to the Ultimo Shop style.
3. Select the Default button in the toolbar.

How Do I Set Up The VirtueMart Template Settings

The demo uses these settings:

1. Open Components, VirtueMart, then Configuration.
2. Select the Templates tab.
3. In the Template and Layouts box, set Select the default template for your Shop and Category Template to Use joomla default. VirtueMart then uses your default Joomla template, Ultimo Shop, for the shop pages.
4. Save the changes.

Template Module Positions

The picture below shows where each module position sits on the page. Module positions with nothing published in them collapse, so the page closes up around them.

• Top bar: position-1 (small menu), loginform (My Account and Register links), welcome, quick-menu, position-0 (search), cart
• Under the header: builtin-slideshow or slideshow, welcome-box, position-2 (breadcrumbs)
• Across the page, above the content: top-1 to top-6, top-7 to top-12, top-long, position-4
• Left column: top-left-1, top-left-2, position-7, bottom-left-1, bottom-left-2
• Centre column: top-a to top-d, your page content, bottom-a to bottom-d
• Right column: top-right-1, top-right-2, position-6, bottom-right-1, bottom-right-2
• Below the content: tabs-1, position-3 (testimonials), bottom-long, bottom-1 to bottom-6, bottom-7 to bottom-12
• Footer: footer, footer-left, footer-right
• Side pop-up boxes: header-left, header-right
• Phones only: cs-secondary (the second phone menu)

How Do I Access The Template Settings

1. Open System and, under Templates, select Site Template Styles.
2. Select the name of your template style to open it.

The settings are on these tabs. Hover over a setting to see what it does.

• Favicon: the small icon in the browser tab
• Site Name & Slogan: your logo and slogan
• Fonts: text size and fonts
• Community Links: social icons in the footer
• EU Cookie Law Window: the cookie notice
• Drop Down Menus: drop-downs and the mega menu
• Header & Footer Custom Code: code for analytics and similar tools
• Built-in Slideshow: the home page slideshow
• Product Slider, Testimonials Slider and Manufacturers Slider: how each slider behaves
• Product Images: the product image zoom
• Side Pop Up Box: the boxes at the edge of the screen
• Theme: colour themes, your own colours and background images

How Do I Add My Logo And Slogan

1. Open System and, under Templates, select Site Template Styles.
2. Select the name of your template style to open it.
3. Select the Site Name & Slogan tab.
4. To use text, type your name in Site Name and your slogan in the slogan field. The demo uses Ultimo <span class="custom-color1">Shop</span> to colour the second word.
5. To use an image, set Site Name as Image to on and choose your logo. The slogan has the same options.
6. Use the position fields to move the logo and slogan, and Top Handler Height and Top Handler Width to resize the area that holds them.
7. Select Save & Close.

How Do I Change The Colours

1. Open System and, under Templates, select Site Template Styles.
2. Select the name of your template style to open it.
3. Select the Theme tab.
4. To use a ready-made look, set Built-in Theme to on and pick one of the six in Choose Theme.
5. To choose your own colours, set Built-in Theme to off. Click any colour field to open the colour picker. There are 114 colour settings.
6. The same tab has background images for the page, the top-long area, the testimonials box, the welcome box and the login window.
7. Select Save & Close.

How Do I Set Up The Favicon

1. Open System and, under Templates, select Site Template Styles.
2. Select the name of your template style to open it.
3. Select the Favicon tab and choose an image.
4. If it is not square, use the Favicon Crop Tool on the same tab: load the image, drag the square over the part you want, then create the favicon.
5. Select Save. The template creates the icon sizes that visitors' devices need.

How Do I Set Up The Fonts

1. Open System and, under Templates, select Site Template Styles.
2. Select the name of your template style to open it.
3. Select the Fonts tab.
4. Choose a Default Font Family and the text size. Use Select Character Set if your language needs extra characters.
5. To use another Google Font, turn on Use additional Google Fonts and type the font name exactly as Google Fonts shows it, for example Roboto Condensed.
6. In the settings field below it, enter the weights and character set, for example 300,400,700:latin,greek.
7. In Tags/CSS Classes affected, list where to use it, for example h1, h2, h3, span.product-price.
8. To use only your font settings, turn on Override default settings, then save.

How Do I Set Up The Menus

Ultimo Shop has two menus on desktop: a small menu in the top bar and the mega menu beside your logo.

The small top menu is a Menu module:

1. Open Content, Site Modules, and open or create the Menu module.
2. In Position, choose position-1.
3. Set Sub-menu Items to Show.
4. On the Advanced tab, set Menu Tag ID to nav and Menu Class to -nav, then save.

To add a ribbon to a menu item in this menu, open the item in Menus and type NEW, HOT or FEATURED in its Note field.

The mega menu beside the logo comes from the template settings, not a module:

1. Open Menus, Manage, and add a new menu. The demo calls it Mega Menu. Add your items to it, first level only.
2. In the template settings, select the Drop Down Menus tab.
3. Turn on ON/OFF Built-in Mega Menu and choose your menu in Select a menu for Mega Menu.
4. Use Mobile Open Menu Button Label to set the wording on the phone menu button, then save.

How Do I Set Up The Slideshow

Each slide is a Custom module in the builtin-slideshow position.

1. Prepare a .jpg image for each slide. The demo images are in the quickstart's images folder (slide-1.jpg, slide-2.jpg, slide-3.jpg) if you want to check the size.
2. Open Content, Site Modules, select New, then Custom.
3. Enter a title. It is only for your reference and does not appear on the slide.
4. In the editor, add the caption shown over the image. To add a button, use the markup below in the editor's source view.
5. In Position, choose builtin-slideshow.
6. On the Options tab, choose your slide in Select a Background Image.
7. On the Menu Assignment tab, assign it to the home page, then save.
8. Repeat for each slide. The module ordering sets the slide order.
9. In the template settings, open the Built-in Slideshow tab and make sure Turn Slideshow ON/OFF is on.

<h6>Fashionable mobile ready template</h6>
<h1 class="custom-color2">The best choice for your shop</h1>
<p><a class="button" href="#"><i class="fa fa-shopping-cart"></i> Order now!</a></p>

The same tab controls the effects, timing and height, as well as the caption position and width. A slideshow extension from another developer goes in the slideshow position instead. On a page where builtin-slideshow has a module, the slideshow position does not show.

How Do I Set Up The Welcome Box

The welcome box overlaps the bottom of the demo's slideshow.

1. Open Content and select Site Modules.
2. Select New, then Custom.
3. Enter a title and add your text or image in the editor.
4. In Position, choose welcome-box.
5. On the Menu Assignment tab, choose the pages it should appear on. Use On all pages if it should show everywhere.
6. Select Save & Close.

To place it on the right as the demo does, set Module Class on the Advanced tab to moveright, with a space in front. Its background image is on the Theme tab of the template settings.

How Do I Set Up The Featured Banner Area

The large "Autumn Collection" area on the demo is a Custom module in top-long. Its background image is on the Theme tab of the template settings.

1. Open Content and select Site Modules.
2. Select New, then Custom.
3. Enter a title and add your text or image in the editor.
4. In Position, choose top-long.
5. On the Menu Assignment tab, choose the pages it should appear on. Use On all pages if it should show everywhere.
6. Select Save & Close.

This is the demo's markup, added in the editor's source view:

<div class="span6">
<h1><strong>Ultimo</strong> Fashion Theme<br /><span class="custom-color2">See New Autumn Fashion Trends</span></h1>
<p>Your text here.</p>
<p><a class="button" href="#">Order now!</a> <a class="button button-color-2" href="#">Learn more</a></p>
</div>

How Do I Set Up The Sliding Products Modules

1. Open Content, Site Modules, select New, then VirtueMart Products.
2. In Display, choose the products to show. Set Number of displayed products (the demo uses 12) and Products per row (the demo uses 4).
3. Set Display Style to List based ul-li.
4. In Position, choose where it goes. The demo uses top-1.
5. Set Layout to single. This layout is what makes it slide.
6. On the Advanced tab, set Module Class to _products. To centre the title and navigation, use _products centered.
7. Assign it to your pages and save.

In the template settings, the Product Slider tab sets how many items show at each screen size, plus auto play, speed and navigation.

How Do I Set Up The Product Tabs

Every module published to tabs-1 becomes a tab, and its title becomes the tab label. The demo has three VirtueMart Products modules, New Collection, Featured Products and Customers Choice, each set up as above with the _products class.

Set Title on each module to Hide, as the tab already shows it.

How Do I Set Up The Testimonials

Each testimonial is a Custom module in position-3, and the box slides between them.

1. Open Content and select Site Modules.
2. Select New, then Custom.
3. Enter a title and add your text or image in the editor.
4. In Position, choose position-3.
5. On the Menu Assignment tab, choose the pages it should appear on. Use On all pages if it should show everywhere.
6. Select Save & Close.

In the template settings, the Testimonials Slider tab has the two lines of heading text (Testimonials Box Label 1 and 2) and the slider settings. The background image is on the Theme tab.

How Do I Set Up The Partners And Brands Slider

1. Add your manufacturers and their logos in VirtueMart first.
2. Open Content, Site Modules, select New, then VirtueMart Manufacturers.
3. Set VirtueMart Manufacturer to Thumb image and Display Style to List based ul-li.
4. In Position, choose bottom-long.
5. On the Advanced tab, set Module Class to _products centered, then assign and save.

The Manufacturers Slider tab in the template settings controls how many logos show and how they move.

How Do I Set Up The Side Pop Up Boxes

These are the tabs on the edge of the screen that slide open when clicked. Publish a Custom module to header-left or header-right. The title of the first module in the position becomes the label on the tab.

The Side Pop Up Box tab in the template settings sets each box's position, size, label width and animation speed, and whether it shows on phones.

How Do I Set Up The EU Cookie Law Window

1. Open System and, under Templates, select Site Template Styles.
2. Select the name of your template style to open it.
3. Select the EU Cookie Law Window tab and turn it on or off.
4. Set the window position, title and content.
5. Set the agree link label, and the learn more label, link and target window.
6. Choose the colours and opacity, then save.

This window is a notice with an agree link. It does not stop other scripts from setting cookies, so check whether that is enough for your shop and your visitors.

How Do I Hide The Content Area On The Home Page

The demo's home page shows only modules. It does this with a second template style:

1. In Site Template Styles, tick your style and select Duplicate. Open the copy and give it a name such as "hide content on front page".
2. On the Header & Footer Custom Code tab, add this to Insert code into template header:

<style type="text/css">
#content-handler{display:none;}
</style>

3. On the Menu Assignment tab, assign the style to your Home menu item only, then save.

How Do I Change How A Module Looks

Set these on the module's Advanced tab, in the Module Class field.

• _products for VirtueMart product and manufacturer modules
• _menu for menus
• _banner for a banner with a background image, as used in the demo's right column
• _empty for a plain module with no box, as used in the footer columns
• _style1, _style2 and _style3 for alternative box styles

To add spacing, add padding-5 or padding-10 after a space, for example _style1 padding-5.

To show or hide a module on certain devices, add one of these with a space in front: hidden-phone, visible-phone, hidden-tablet, visible-tablet, hidden-desktop, visible-desktop.

To add a button in a Custom module, add this in the editor's source view: <a class="button" href="#">Read More</a>

How Do I Set Up The Login And Register Links

1. Open Content, Site Modules, and open the Login module.
2. In Position, choose loginform and save.

The module title becomes the link text in the top bar, and the login form opens in a pop-up window. The Register link appears when user registration is allowed in Joomla's Users options.

How Do I Set Up The Cart, Search And Currency

• Cart: a VirtueMart Shopping Cart module in cart
• Search: a VirtueMart Search Product module in position-0. It opens from the magnifying glass icon.
• Currency: a VirtueMart Currency Selector module in quick-menu

How Do I Set Up The Footer

The demo footer uses bottom-1 to bottom-4: two Menu modules and two Custom modules, each with the Module Class _empty.

Your copyright text is a Custom module in footer-left, and the payment logos are a Custom module in footer-right.

How Do I Set Up The Social Icons

1. Open System and, under Templates, select Site Template Styles.
2. Select the name of your template style to open it.
3. Select the Community Links tab.
4. For each network you use, enter your full profile address and turn on its Show setting. The list includes X, Facebook, Instagram, Threads, Bluesky, Mastodon, LinkedIn, YouTube, TikTok, Vimeo, Pinterest, Discord and RSS.
5. For anything else, use the five custom icon slots: enter the full address, choose from the 90 icons in Select Icon, and turn the slot on. Then save.

How Do I Set Up The Product Image Zoom

1. Open System and, under Templates, select Site Template Styles.
2. Select the name of your template style to open it.
3. Select the Product Images tab.
4. Turn on ON/OFF Zoom Images Script.
5. Choose the zoom type (lens or inner), the lens shape and size, and save.

With the setting off, product pages use VirtueMart's standard image display.

How Does The Template Work On Phones

The template adapts to phones without any set-up. The header gets a row of buttons that open the menus, login, search and cart, using the modules you have already published.

The second menu button opens whatever you publish to cs-secondary. The demo puts its Main Menu there as a Menu module with the Module Class _menu. This position shows only on phones.

How Do I Add Google Analytics Or Other Code

1. Open System and, under Templates, select Site Template Styles.
2. Select the name of your template style to open it.
3. Select the Header & Footer Custom Code tab.
4. Paste the code into Insert code into template header or Insert code into template footer, as your provider instructs, and save.