3.2 Install and Configure the Astroid Template

A template controls the appearance of your website. The template you use for your online store is therefore nearly as important as the Joomla foundation and the Phoca Cart Shopping Cart. Just as Joomla is currently the best business website foundation and Phoca Cart is the best shopping cart component, Astroid is currently the best online store template.

Five Key Benefits of the Astroid Template
Astroid has five key benefits over other Joomla template frameworks.

#1 Astroid is extremely flexible and expandable
A flexible template is a key part of any growing online store. A new store might start out with only a couple of products in a single category. But over time, you might add more than one thousand products in a dozen different categories. The Astroid template has the ability to expand the number of rows and columns used on each web page as the number of products and categories of products offered by the business grows.

#2 Astroid comes with a customizable Mega Menu
A mega menu is a Drop Down menu that can add rows and columns to the drop down menu to display several categories and sub-categories of products. While other templates may come with a mega menu builder, Astroid comes with the easiest to use Mega Menu builder. Here is an example of an Astroid Mega Menu drop down:

01

 #3 Compatibility with our Phoca Cart shopping cart
Compatibility means that the Astroid template comes with a custom CSS file to match the CSS classes used by Phoca Cart on its Home, Category, Product and Checkout pages. By using the same Astoid template on the rest of our website pages, we can achieve a professional looking consistent appearance throughout all of the pages on our business website.

#4 The Astroid Template is very easy to use
The Astroid template can be configured in a matter of minutes simply by clicking on buttons. The appearance of each row can also be adjusted simply by clicking on buttons.

#5 The Astroid Template is Free
The benefit is being free is not only that it is free initially. The biggest benefit is that there is no need to pay annual frees to get yearly upgrades. This saves you both time and money.

 

Problems with the Default Joomla 3 Templates
By default, Joomla comes with two templates. These are called Protostar and Beez3. You can see these two templates by logging into the Joomla Control Panel and clicking on Extensions, Templates, Styles. Protostar comes with only three rows and three columns for a total of only 9 boxes of content (which Joomla calls Module positions). Beez3 comes with 6 rows and a total of 18 module positions. Sadly, neither default template comes with an easy “Click Here” way to add more rows or columns.

Note: You can view the module positions for any template by clicking on Templates, Options and changing Preview Module Positions from Disable to Enabled. Then click Save and Close. Then click on the Preview option for the template you want to look at.

What we want for a growing online store is a minimum of 7 rows with 3 columns each above the main content area, 3 rows with 3 columns each in the main content area and 7 rows with 3 columns each below the main content area. This is a total of 17 rows with 51 module positions. This will allow us to precisely control the appearance of at least 51 products on the Home page. In addition, a growing online store needs the ability to add more rows and columns as the number of products offered on the store website grows.

Many online stores offer products in more than 10 categories with more than 100 products in each category! We may not want thousands of products on the Home page. But we do want control over the appearance of each category and product offered by our online store. In addition to not having enough modules positions, neither of the two default templates comes with a Mega Menu and neither includes custom classes for the Phoca Cart Home, Category, Product or Checkout pages.

We will therefore review how to install the Astroid Framework and Template.

Download the Astroid Framework and Template package
To download the Astroid Framework and the Astroid One Template, go to this page:

https://www.joomdev.com/my-downloads/astroid-template-framework

x15

Then create a free account and log in. Then click on the Download button for the Astroid Framework and Template. Then transfer this template and Framework from your File Manager Downloads folder to your Website Extensions folder. Then extract it.

Install Astroid Using your own Local Host Server
To install the Astroid Template Framework on your local host server, copy the extracted folder into your website tmp folder. Also delete the Phoca Cart component folder which is no longer needed now that it has been installed. Then open a terminal and change ownership with:

sudo chown -Rv www-data:www-data /var/www/html/Joomla2/tmp/Astroid-Framework-master

Then close the terminal and install this template framework with

Install from Folder, Check and Install.

x16

Click on Extensions, Templates, Styles. You will see two astroid templates installed with the two default templates:

x17

Click on Extensions, Templates, Styles. You will see two Astroid templates installed with the two default templates.

Install Astroid Using a Web Server
From the Administrator Control Panel, and without unzipping the package, go to the Extensions, Manage, Install screen. Then click on the Upload Package File tab. Then click on Browse for File. Find the Astroid Template package Zipped folder in the Extensions folder in your Website folder on your Home computer. Then click on Upload to install the template and framework to your website.

Look at your Categories, Category, Product and Checkout pages with the Default Protostar Template

02

Here is the Category page:

03

Here is the Product Page

04

Here is the Checkout page

05

 

Make Astroid Template One your default template
To view your template options, log into your Joomla Control Panel and click on Extensions, Templates, Styles. In order for our Astroid template to display on our website, we need to make it the default template. To do this, select the Astroid One template. Then click on the Gold Star to make it the default template. Now view the Categories, Category, Product and Checkout pages when using the Astroid Template.

Here is the Categories page:

06

Here is the Category page:

07

Here is the Product page:

08

 

The Cart menu item is not appearing with the Astroid template???

Astroid template only displays the Main Menu – not the shop menu.

This is because the Shop Menu Module was originally placed in the Protostar template Module Position 1. Change this module to the Astroid Header position for now. Here is the Checkout page:

09

There is not yet a substantial difference between the Astroid template and the default Protostar template. However, if we visit the Phoca Cart Astroid Demo Site, you will see that all four page layouts on the Demo site look much better than the page layouts on our site. For example, here is the Demo Site checkout page

10

Clearly we have more work to do to make our website look like the Demo Site. The first thing we can do is go to our Phoca Cart component and click on Options. Then under the Display tab, scroll to the bottom of the page to Theme Options. Make the following changes: Theme to  Bootstrap 4, Icon Type to Font Awesome 5
Load Specific CSS to Astroid, Load Bootstrap to No
Load Chosen to No

11

This does not appear to make a major difference. In the next section, we will outline other ways to make our site look like the Demo site.

 

Replace the Astroid Logo with your own Custom Header

When you first install Astroid and make it the default template, the header image we used with Protostar disappears and is replaced by the Astroid logo:

14

 

To change the display back to a full width top header and a full width menu below the header, go to Extensions, Templates, Styles and click on the Astroid One Template to edit it.

Then click on the Header section in the side menu.

Module Position: Leave as Astroid Header.
Header Mode: Leave as Horizontal.

Horizontal Menu Mode: Change from Right to Center.

Header Block 1 Change to Blank.

Site Menu Leave as Main Menu.

Logo Type Change from Image to Text.

Logo Text Change from Astroid to a single period.

Tag Line. Delete text and leave empty.

Sticky header turn off

Off canvas menu turn off.

Then click Save, Clear Cache and Preview:

15

Then click close. Then Save and Close. Then click Extensions, Modules, Header. Change the module position from Protoostar Position 0 to Astroid Template One astroid-header. Then click Save and Close and view site:

16

 

 

Change the font family and font size in the Template Edit Typography section

Change the Menu font family to Arimo and the font size to 18 and the line height from 1.7 to 1.3:

12

Here is the drop down font family change:

13

While we are at the Typography section, we should also change the H1, H2 and H3 to Arimo 28px Font Weight 500

What’s Next?

In the next section, we will review how to change the appearance of our website using custom CSS.