Build an Online Store with Joomla and Wegy Template

We have already reviewed Wegy – a multipurpose template for Joomla crafted by TemplateMonster. Earlier we were focusing on its capabilities as a business template for corporate websites and landing pages.

 Joomla online store

But since the last update Wegy is equipped with full-featured eCommerce functionality. It comes with a wide range of pre-designed pages for online sellers (Shop home page, Single product, Listing, Shipping & Delivery pages, and so on); it supports product image cloud zoom, multiple currencies, and many other eCommerce-oriented features.  With VirtueMart as its eCommerce solution Wegy is simple, flexible and effective in terms of selling online.

Today we will help you with customizing your Wegy-based online store, so you could set up your eCommerce business in almost no time. Here is what’s on our list:

  • How to install Wegy;
  • How to implement your own logo;
  • How to change the template’s color scheme;
  • How to make VirtueMart your front page;
  • How to customize static text blocks;
  • How to work with menus;
  • How to set up sliders.

Let’s start then.

Installation of Wegy Template

There are two ways of installing Wegy. You can either install everything at once, or just the template. In this guide we will use imply installation via uploading the content of fullpackage.zip.

  1. Unzip the fullpackage.zip, which contains Joomla, Wegy and all the extensions, and upload it to the root folder of your hosting account.
  2. Go to your website, and you will see the installation message.

If you use PHP older than 5.4, there is a high probability of Magic Quotes being enabled. It is a common issue, so even if you don’t know what Magic Quotes are, don’t hesitate to get in touch with your hosting provider, and ask to disable them. It is necessary to switch them off in order to install Joomla.

  1. Proceed through the standard Joomla installation process. ! Export sample data on the third step to get access to the premade pages, articles and VirtueMart products. It is way easier to modify them than to create everything from scratch !
  2. Don’t forget to delete the installation folder.

Congratulations, the installation is over! Now you can browse your website or login to the Joomla Control Panel to customize your template.

Live Demo / More info

Initial customization

Let’s start with the basics. To personalize your Wegy store you will need to replace its logos, static text blocks such as contact data and “About us”, and, perhaps, change the website’s color scheme.

Implementing your own logo

Sign in to the Control Panel and go to Templates > theme3092 – Shop.

  1. Go to the ‘Layout’ tab and find the ‘Logo settings’ item;

  2. Upload your new logo image;

  3. Click ‘Insert’;

  4. And save the changes.

Implementing your own logo in Wegy

Choose your own logo

Insert custom logo

Note that the file name should contain only alphanumeric characters – no spaces allowed.

Changing the meta information

  1. Go to VirtueMart > Shop in your Control Panel;

  2. Here you can change your shop name, vendor name, shop description, terms of service, legal information, and various meta information: keywords, description, and many more.

Change the shop meta information

Setting up contact info

There are 2 positions that need to be customized in the first place – ‘sup-top’ (a narrow panel over the header) and ‘copyright’ (the footer). To browse and modify modules that belong to these positions do the next:

  1. Go to Extensions > Modules;

  2. Find ‘Select position’ on the sidebar. Select ‘sup-top’. Now you need to edit the modules ‘Location’ and ‘info’. Just click on them, replace the information with your own and click ‘Save’.

Setting up contact info

6 Edit location information

Same thing is with the footer.

  1. In Extensions > Modules > Filter > Select position choose ‘copyright’;

  2. Find all the modules with the ‘Custom HTML’ type, and edit them in the WYSIWYG editor. When editing the ‘About’ module replace the original Wegy logo with your own – and it will appear in the footer.

7 Change the footer

Customizing features

There are three blocks with your company features named ‘Free Shipping’, ‘Support’, and ‘Order Return’. If you are logged in as admin, you can change them right from the frontend. Just click the tiny icon above the module – and you will be redirected to the WYSIWYG editor.

Customizing features

Editing a color scheme

  1. Go to Users > User Manager > Add New User and fill all the forms necessary to create a new user;

  2. Assign it to the ‘Super users’ group in the second tab, and save;

  3. Sign in as this newly created user in the pullout menu on the front-end;

  4. You will see a Style Switcher panel on the left. Choose one of 4 styles and press ‘Save’.

Editing a color scheme

Create new super user account

Switch the color

Wegy utilizes LESS pre-processor to enhance its CSS code. Thanks to variables introduced in LESS you can change the color scheme of your entire website with one click. To edit these schemes you have to dig in the CSS files of the template, though.

Live Demo / More info

Menus

It’s time to take care of your store’s navigation. Many elements of this template belong to menus - even social media buttons in the footer.

You can rearrange menu positions and their hierarchy in a simple drag-and-drop way.

  1. Go to Control Panel > Menus > Main Menu > Add New Menu Item;

  2. Give it a name and specify its type. As an example, let’s place a link to the Kunena Forum board here. Pick Kunena Forum > Category List.

  3. Save the menu. It should appear on your homepage.

Add new menu item

Select Kunena Category List

New Menu Item

New menu result

***

  1. To manage your social media buttons open Control Panel > Menus > Social media;

  2. Open any menu item and paste the URL of the respective social media account. Save the menu.

Social media menus

16 Change Twitter menu

Link to social profile

Now icons in the footer link to your social profiles.

Live Demo / More info

Mega menu

The mega menu functionality of Wegy is powered by Ice Mega Menu plugin. When you edit or create any menu item, you can go to the ‘IceMegaMenu’ tab and set the number of columns. If it’s more than 1, it will turn into a mega menu. Yes, it’s that simple. All you need to do is to arrange columns properly, and define their widths in percentages. Properly. Like this:

IceMegaMenu Parameters

Wegy’s sample data includes two readymade mega menus that you can practice on. In our example we added the ‘Accessories’ column, and changed the banner and its position.

Accessories shop example

Setting your store as homepage

If you want to build a store-first website, you will probably want to set the shop as your website’s homepage. Here is how it can be done:

  1. Go to Menus > Main Menu > Add New Menu Item  in your Control Panel;
  2. Give it a unique name. Next to the Menu Item Type click the Select button. Click VirtueMart from the list, then click Front page;
  3. Click ‘Save’.

  4. Now go to Menus > Main Menu, find your new menu, and click the star next to it.

Add store menu item homepage

Choose frontpage menu item type

Set the menu item as home

Now check the front page of your website (e.g. http://wegystore.com/). If you’ve done everything correctly, you will see your store’s homepage.

Sliders

The slider under the header uses your articles as slides. For a better result you need to use large images with high resolution, which will still look good when stretched across the page.

  1. Go to Extensions > Modules in the Control panel;
  2. Find the Sequence Slider Shop module;
  3. In the first tab choose an article category to be displayed or unpublish the module if you don’t need a slider.

Create new module for sliders

Find the sequence slider

Slider parameters

Wrapping up

There are many more ways to enhance your Joomla store with Wegy; we mentioned only the most important ones. For deep customization check the Documentation folder from your Wegy package.

Get Wegy here:

Live Demo / More info

One more thing...

Do you have friends or a Facebook group who you think would find this useful? Share this with them and then let me know what they think.

Want to supercharge your website?

  Our website loads FAST ... just 1.29 seconds. We're hosted on FAST InMotion servers We want YOUR website to be fast too, so we've gotten you an exclusive deal - 47% OFF for DART Creations friends + FREE domain! Check it out NOW!

Translate

who are we?

DART Creations is run by David Attard - working in and around the web design niche for more than 12 years, we provide actionable tips for people who work with and on websites. We also run DronesBuy.net - a website for drone hobbyists

David attard

Follow us on Social

         

 

 

 

Popular Content

Joomla extensions to take your website to the NEXT level

Is your Joomla website reaching its full potential? We install many of these extensions on almost ALL of our Joomla sites - why don't you check them out our list of Joomla Extensions and see whether you can take your site to the next level?

Where are we hosted?

This site is proudly powered by FAST VPS InMotion Servers and given an insane speed thanks to MaxCDN!

Web Hosting MaxCDN - Speed up your website

 

InMotion Hosting Review - Recommended Web Hosting servers for business, Joomla, WordPress and ecommerce websites.

InMotion Hosting Review

Advertise on DART-Creations.com

DART Creations is interested in developing partnerships with mutual benefit. If you like the stuff we publish and would like to develop a relationship, we'd be happy to hear from you. Go on - drop us a line - we'd love to hear from you :-)

The Outstanding HunGRYJPEG Bundles

AWESOMENESS! Bundles of premium font + graphic packs at more than 96% OFF!  Get this bundle for just $29 - This month ONLY!

The Hungry JPEG Awesome font bundles

New! DIVI 3.0 WordPress TeMPLATE + PageBuilder - 10% OFF Limited Launch offer

You'll surely create a perfect website with Divi 3.0!

Divi 3