Fly Shades Progress: Top Site and Main Shop Designed

The following web sites are already up but with dummy data. They are already functional and Fly Shades can start entering data.

  • The top site, which is the gateway to all online shops of Fly Shades, comprises the following sections: hero image, featured product, branches, statistics, brief company profile, customer care form, and partners if any. In lieu of partners, an array of products can be showcased.
  • The main store, which is equivalent to the head office shop contains products in the warehouse but also keeps track of products transferred to the branches. The head office online shop can be duplicated, minus the data, to set up the branch online shops.

Aside from being the gateway or entry to the online shops, the Fly Shades top site will be used to feature a product or announce an event. This is a practical way of announcing an event for a multi-branch online shops for the reason that you only have to do it once; instead of posting the event on every online site.

In the meantime, the list of branches is simply a list without the links to the online shops of the branches. Once the branches online shops are up, the links will be provided.

FlyShades Progress: WordPress CMS Installed on Main Site

At last, FlyShades subscribed to a web host for one year with a registered domain name flyshades.net. Upon receiving the cPanel specs, I immediately installed WordPress so I can begin setting up its website.

The multi-site eCommerce is organised as follows.

The root directory houses the main site. This serves as the gateway to the main online store and all its branches. This also serves as the landing page of flyshades.net.

The landing page may feature a product or announce an event with call-to-action (CTA) button, such as SHOP NOW that directs the user to the main store. A user’s option is to direct the users to the list of branches if they want to pick up the ordered item at a branch nearest; or buy physically at the store.

A visual page builder called Elementor was installed to design the home page.

Hierarchy

On the Web server, the sites are organized as follows.

The root directory houses the top site that serves as gateway to all online shops ⎯ main and branches. On its separate subdirectories are the main store (or head office/warehouse) online site and the different online shops of the branches. The site on the root directory serves as the landing page of flyshades.net; which means, if you go to flyshades.net, this is the website that you will see first. 

The top site is not an eCommerce site; it is just a gateway. There are no products to sell on the top site. The online shops are housed in separate subdirectories.

The address of the online shops would be something like this:

  • flyshades.net/main/
  • flyshades.net/branch-1/
  • flyshades.net/branch-2/
  • flyshades.net/branch-n/
  • • • •

where /main/ is where the main online shop is that will be used by the head office to monitor and control all sales and inventory movements. The main store can also sell online.

The /branch-1/ to /branch-n/ are the online shops of the specific branches.

You can view the FlyShades main home page at flyshades.net.

Fly Shades Timeline

Arcel Residences Official Website

Screenshot of Arcel Residences website

Arcel Residences’s website allows you to book their rooms online for night stays to short-term leases.

Colour Scheme

The site’s colours are primarily red and blue, which are based on its logo. A 3rd colour is aqua.

Color Name Hex RGB    
Primary Scarlet #E93001 rgb(235,49,1) hsl(12,99%,46%) cmyk(0%,79%,100%,8%)
Secondary Navy blue #010075 rgb(1,10,117) hsl(241,100%,46%) cmyk(100%,91%,6%,54%)
Accent Aqua island #9CDDD0 rgb(156,221,208) hsl(168,49%,74%) cmyk(29%,0%,6%,13%)
           

WordPress Template

The design of the site was built from HotelOne template — a simple and elegant design. I like its animated effect on its front page because it catches attention. This was made possible by integrating it with Elementor plugin, a WordPress wyswyg page builder.

To achieve elegance, you have to choose the right colour. For the reason that I had to base the site’s colour scheme from Arcel’s logo, I had to sacrifice that elegant feel.

One of the changes I did, aside from its original colour, was the button, which I changed from rectangular to oblong. Equipped with Elementor, I designed the other pages on my own.

Plugins

Aside from the Elementor plugin, which already comes with Font Awesome and Google Fonts, an important plugin that I had to add was Advanced Booking Calendar. The free version of his plugin does not include booking discounts and payment gateway integration. Also, it is limited only to 15 rooms.