Change the Look of Phoenix - can you click here and there?

[burt]

By adding, editing and removing modules the look of PhoenixCart can be changed really easily.

Follow this discussion over the next few days to learn how.

We will aim to change the "home page" (index.php) and the product page (product_info.php), as well as some site wide features such as the header area and the footer area...

99% of PhoenixCart shopowners will use the out of the box look as-is (maybe with some change of words here and there).

If you can change how your shop looks, even slightly, you will stand out.

[burt]

Starting with the Navigation Bar and Horizontal Menu.

1. I don't need Euro as I only want to sell in USD.
2. I want a different search with no popup.
3. I want to remove Special Offers text and have the icon on the right of the navbar near the user icon, and maybe change it a red "hot" colour.
4. I want to remove the Horizontal Menu, and instead have it as part of the Navbar
5. I want something above the navigation bar as a by-line or advertising

Here's how that area looks as installed "out of the box";

ootb-navbar.jpg

[burt]

For #1

- Uninstall Euro at Admin > Localization > Currencies
- Uninstall the Currencies Navbar Module at Admin > Modules > Navbar

For #2

- Find and Upload a Search addon ( I used app.php/addons/supporters_code/s04e07_navbar_search )
- Uninstall the default search at Admin > Modules > Navbar
- Install the new search at Admin > Modules > Navbar

For #3

- copy the relevant language file to the live template using the language explorer at Admin > Tools > Language Explorer
- amend the new file appropriately in a Text Editor
- configure the special navbar from left to right at Admin > Modules > Navbar

For #4

- turn off the horizontal menu at Admin > Modules > Content
- Find and Upload an addon, eg Mega Menu ( viewtopic.php?f=28&t=2843 ) and turn it on at Admin > Modules > Navbar

For #5

- Find and Upload an addon, eg Alert ( I used app.php/addons/supporters_code/s04e04_alert_message )
- Install the Alert at Admin > Modules > Content
- copy the relevant language file to the live template using the language explorer at Admin > Tools > Language Explorer
- amend the new file appropriately in a Text Editor

Now the header area looks like this:

lkjh1.jpg

When the "Shop All" link is clicked, the Mega menu appears and the header area then looks like this:

lkjh2.jpg

[burt]

Next, let's change the Footer area. Out of the Box it looks like this:

lkjh-footer.jpg

1. Remove the "Customer Services" box. Similar exists in the Navbar > Account dropdown menu.
2. Remove the "About Us" box. I don't need/want that in this design.
3. Put something else in the Footer area. Not sure what, will find relevant addon(s).
4. Add in some more logo's with the visa/paypal and maybe add some colour there?

Bookmark this thread as I'll be doing these things soon.

[burt]

For #1

- turn off the `Profile Links` module at Admin > Modules > Content

For #2

- turn off the `Text Block` module at Admin > Modules > Content

For #3

- Find and Upload an addon, eg this `Reinforcement messages` module ( app.php/tag/s03e07 )
- Install it at Admin > Modules > Content

For #4

Out of the Box

lkjh-f1.jpg

I want to add in Social Bookmarks, with links.
HOWEVER...I want to keep the paypal and visa as well.

This is slightly difficult, but not impossible. Icons can be changed in the module, but it is not possible to make the icons link (eg a facebook icon linking to your facebook social).

When the module was coded many moons ago, we gave the ability for shopowners to override the module `icon` settings in the language file, I bet hardly any shopowners explored this

Therefore

- copy the relevant language file to the live template using the language explorer at Admin > Tools > Language Explorer
- amend the new file appropriately in a Text Editor to add in some coloured icons

Which gives this result:

lkjh-f2.jpg

These colours are not the exact brand colours, I just used the bootstrap color codes, these colours are close enough for this exercise...


Not too shabby!

MORE TOMORROW!

[burt]

The full footer area now looks like this:

footer.png

I want to slightly change the appearance of the three footer module - this is done by changing the TPL (template file) of each.

a1. COPY /includes/modules/content/footer/templates/tpl_cm_footer_information_links.php TO /templates/override/includes/modules/content/footer/tpl_cm_footer_information_links.php

a2. Amend this new file appropriately in your favourite text editor

I removed the `title` and made the font of the list a bit more modern

b1. COPY /includes/modules/content/footer/templates/tpl_cm_footer_contact_us.php TO /templates/override/includes/modules/content/footer/tpl_cm_footer_contact_us.php

b2. Amend this new file appropriately in your favourite text editor

I removed the `title` and made the font of the list a bit more modern and put the email/phone on the same line. I also removed the green contact us button

b3. COPY /includes/modules/content/footer/templates/tpl_cm_footer_messages.php TO /templates/override/includes/modules/content/footer/tpl_cm_footer_messages.php

b3. Amend this new file appropriately in your favourite text editor

I removed the top border

[burt]

These changes result in the Footer looking like this:

footer1.png

We might look at making a tool to allow shopowner to easily move TPL files into the designated template, a bit like how the language_exporer tool works. That would be a good addition to Phoenix.

[burt]

Shall we do something in the Product Info page?

Out of the Box:

pi-1.png

I'm not sure what to do here, so let's just have a play around by editing some modules, maybe finding other modules to install, changing TPL files if we need to and so on.

Follow this thread for those changes, coming soon!

[burt]

Product Page #1

Let's centre the Product Name and make the font size bigger.

1a. Admin > Modules > Content > {product_info Name} > Edit

Change Content Container to `col-12 text-center`

1b. As changing the size is appearance...

COPY /includes/modules/content/product_info/templates/tpl_cm_pi_name.php TO /templates/override/includes/modules/content/product_info/tpl_cm_pi_name.php

Amend this new file appropriately in your favourite text editor, to make title bigger I used https://getbootstrap.com/docs/5.3/conte ... y-headings

I simply changed `display-4` to `display-1`

Product Page #2

Similar for Price, but we want it to be smaller, a muted text and centered.

2a. Admin > Modules > Content > {product_info Price} > Edit

Change Content Container to `col-12 text-center`

2b. As changing the size is appearance...

COPY /includes/modules/content/product_info/templates/tpl_cm_pi_price.php TO /templates/override/includes/modules/content/product_info/tpl_cm_pi_price.php

Amend this new file appropriately in your favourite text editor, to make title smaller I used https://getbootstrap.com/docs/5.3/conte ... y-headings and for color I went for secondary (ie, muted), see https://getbootstrap.com/docs/5.3/utili ... rs/#colors

I simply changed `display-4 text-start text-sm-end` to `display-6 text-body-secondary`

Which results in:

pi-2.png

[burt]

Product Page #3

pi-3.png

Shall we try the Tabs system?

app.php/addons/supporters_code/s02e11_tab_system

Download the addon, upload to the shop. Then

3a. Turn on the Tabs Content module at Admin > Modules > Content

3b. Turn on the Description Tab at Admin > Modules > Product Tabs

3c. Turn on the Reviews Tab at Admin > Modules > Product Tabs

Now we have those Tabs turned on, we no longer need the usual Description or Reviews, so let's turn them off.

3d. Turn off the "What our Customers say" module at Admin > Modules > Content

3e. Turn off the "Description" module at Admin > Modules > Content

Results in

pi-4.png

Not so very much different, but we saved on some real estate and made our shop look a bit different to normal.