WordPress Demonstration Page

In this demo for a fictitious store named “Qwartz”, I will explain how I constructed this site and the features it contains. Real products were imported from AliExpress suppliers of China and inserted into WooCommerce which provides (disabled) e-commerce capabilities.

It contains affiliate links from Amazon, a travel affiliate , as well as affiliate links to other vendors. I will try to retain the feel of a real store while I explain the rest of the site.

Template

This theme is based largely off the excellent ThemeFreesia MagBook theme [no affiliation]. The original theme is meant as the design of an online magazine, but I saw it as a great base for an online mall.

Original

My Version

While MagBook includes many WordPress widgets, it does not include what I specifically wanted – a “hero” image at the top of the page. I added a new widget area to the theme’s underlying PHP and can now add any full-width widget.

I also added a gradient wave vector which partially covers some of the elements to give the theme a flowing vibe.

Unfortunately, the documentation for the theme is sorely lacking. It took me a while to learn and document just which portions of the theme were affected by which options in the theme’s customizer.

I also had to figure out what the widgets looked like and how I could customize them for my needs. This site actually doesn’t use any of the stock widgets, except the widgets embedded into the “home page” page template .

Category and Product Headers

The store contains about ten product categories, such as; Home Decor, Electronics, and Bags & Totes. For each category, and one for an individual product, I designed a custom header. Regardless of which header I choose, it will display with the same wave effect without me having to manually apply the effect to the graphic.

Controlling Content

While products are classified as such in WooCommerce, affiliate links disguised as categories and links to specific vendors each have their own post. Depending on the WordPress post category assigned to the item, the item will be displayed in a different section or spinner.

Theme Customizations

Most of the other changes occur through the addition of custom HTML blocks and CSS styling. Effects such as lightening and gradients of the category blocks, font styles, and page responsiveness are all changed in this fashion.

Please do not hesitate to contact me at ComputerCarl.com with any comments or questions.