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

Cosmetic look of components or your whole site
User avatar
burt
Core Team
Posts: 4550
Joined: Tue Oct 29, 2019 9:37 am
Phoenix Version: v1.1.0.8
Has thanked: 252 times
Been thanked: 412 times

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

Post by burt »

Index Page

Let's turn some things off, and find some addons to install.

Turn off the following Core modules at Admin > Modules > Layout

Adverts
Brand Icons

Addon #1

Let's show the Best Sellers. app.php/addons/free_addon/best_sellers
This module needed a little bit of attention - I'll share those changes back with @Kofod95 so he can review and upload a new version. Many thanks to @Kofod95 for sharing the module, that's the true spirit of Open Source.

This addon comes with 3 modules, I only want the Index module, so I upload only that, and turn it on.
It looks like this:
i-1.png

You'll notice the blue outline when hovering over a card works automatically. Nice.

We need to make the title match what we did in an earlier post. So we copy the TPL file into our live template COPY /includes/modules/content/index/templates/tpl_cm_i_best_sellers.php TO /templates/override//includes/modules/content/index/tpl_cm_i_best_sellers.php

In that new file, change to;

Code: Select all

<div class="display-4 text-body-tertiary text-center">
  <p><?= MODULE_CONTENT_BEST_SELLERS_HEADING ?></p>
</div>
Now that area matches up nicely;
i-2.png
You do not have the required permissions to view the files attached to this post.
I am not here to build for you.
I am here to build with you. Let's help each other.


Join The Code Co-op to get access to your library in the Code Co-op Forum
User avatar
burt
Core Team
Posts: 4550
Joined: Tue Oct 29, 2019 9:37 am
Phoenix Version: v1.1.0.8
Has thanked: 252 times
Been thanked: 412 times

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

Post by burt »

Let's change the display of the Cards a little bit.
We will (1) tighten up the display, and (2) make `Special Offers` more prominent.

For #1

Admin > Configuration > Product Listing > {Products Per Row}
You can change this as much as you like, this will affect the display of "lists of products".

I simply added g-2 to this entry

Code: Select all

row row-cols-2 row-cols-sm-3 row-cols-md-4 g-2

For #2

Grab this addon app.php/tag/s01e10 and upload it.


Now the cards look like this (sitewide, not just the best sellers module)

i-3.png
You do not have the required permissions to view the files attached to this post.
I am not here to build for you.
I am here to build with you. Let's help each other.
User avatar
burt
Core Team
Posts: 4550
Joined: Tue Oct 29, 2019 9:37 am
Phoenix Version: v1.1.0.8
Has thanked: 252 times
Been thanked: 412 times

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

Post by burt »

You can see the new "SALE!" sticker on each special.
And you can see the gap between each card has reduced, due to us adding `g-2`

Pretty Nice.
I am not here to build for you.
I am here to build with you. Let's help each other.
User avatar
burt
Core Team
Posts: 4550
Joined: Tue Oct 29, 2019 9:37 am
Phoenix Version: v1.1.0.8
Has thanked: 252 times
Been thanked: 412 times

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

Post by burt »

There is loads more we could do to make the site even more appealing to the eye.

Some Eye Candy Addons;

1. Button Spinners
2. AJAX Cart
3. Scroll To Top
4. Product Badges
5. Product Ribbons
6. Parallax Scroller
7. Finale Order Button

and many more.

After you've made your site look pretty...there are hundreds of functional addons, too many to list.

What's stopping you from making your Phoenix, your own?
I am not here to build for you.
I am here to build with you. Let's help each other.
User avatar
burt
Core Team
Posts: 4550
Joined: Tue Oct 29, 2019 9:37 am
Phoenix Version: v1.1.0.8
Has thanked: 252 times
Been thanked: 412 times

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

Post by burt »

Here is how the site ended up, video quality is not ideal but it's the best I can do.

https://youtu.be/x02YyS1VgHo

If I was continuing, the next task would be to change mentions of `shopping cart` to `bag` (eg on the shopping_cart.php page etc). This project doesn;t need that as it's designed to show you just how easy Phoenix is...if you can `click click click` in the right places.

Remember that this whole project took less than ONE hour, and I did not change any core files, so no coding involved. Just uploading, turning things on, copying files and so on. Any useless monkey can do it.
I am not here to build for you.
I am here to build with you. Let's help each other.
User avatar
burt
Core Team
Posts: 4550
Joined: Tue Oct 29, 2019 9:37 am
Phoenix Version: v1.1.0.8
Has thanked: 252 times
Been thanked: 412 times

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

Post by burt »

burt wrote: Sat May 03, 2025 4:15 pm With that "Bag" change, I realise that we to make similar changes in the Header area:

h-1.png

These will be language changes only, but over two files. I don't remember why these are over two files (they could easily be in one file), so that might change in the next release.
I remember why part of this was moved to the main english.php language file.
We use it in TWO files, hence the easiest place for it is english.php
I am not here to build for you.
I am here to build with you. Let's help each other.
User avatar
burt
Core Team
Posts: 4550
Joined: Tue Oct 29, 2019 9:37 am
Phoenix Version: v1.1.0.8
Has thanked: 252 times
Been thanked: 412 times

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

Post by burt »

More eye candy. I wanted to animate the Search Box with different placeholders.

https://youtu.be/LEID5P18DQw

See the search input box scrolling through different placeholders?
Pretty nice.
I am not here to build for you.
I am here to build with you. Let's help each other.
User avatar
burt
Core Team
Posts: 4550
Joined: Tue Oct 29, 2019 9:37 am
Phoenix Version: v1.1.0.8
Has thanked: 252 times
Been thanked: 412 times

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

Post by burt »

One year later...AI synopsis...make of it what you will

This is one of the more revealing threads because on the surface it's a tutorial about changing a storefront's appearance, but underneath it's really a statement about Phoenix's philosophy.

## The obvious layer

The stated message is:

> "You don't need to be a programmer to make Phoenix look different."

The entire thread is structured as a guided transformation from stock installation to a visually distinct store using:

* Module enable/disable
* Sort order changes
* Container class changes
* Language overrides
* Template overrides
* Addons

with almost no actual PHP coding.

That part is straightforward.

---

## The first hidden layer: a demonstration, not a tutorial

Notice something interesting.

He could have simply written documentation.

Instead he spends three pages doing tiny incremental changes:

* move this
* center that
* change a colour
* rename Cart → Bag
* add hover effects
* install wishlist
* add tabs
* remove footer titles
* add shadows

Each individual change is almost trivial.

The real point is cumulative.

He's trying to teach a mental model:

> Phoenix is Lego.

Not:

> Phoenix is software.

The thread repeatedly reinforces that the system is composed of interchangeable pieces.

Every post follows the same pattern:

1. Identify desired outcome.
2. Find existing module.
3. Reposition or replace it.
4. If appearance needs changing, override a template.
5. If wording needs changing, override a language file.

Over and over and over.

By the end the reader has unconsciously learned the architecture.

That's much more powerful than documentation.

---

## The second hidden layer: attacking a belief

The target audience is not developers.

It's shopowners who believe:

> "If I want my store to look different I need a designer or programmer."

The thread systematically dismantles that belief.

Look at the language:

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

and later:

> "What's stopping you from making your Phoenix, your own?"

This isn't technical instruction.

It's persuasion.

He's trying to move users from consumers to modifiers.

---

## The third hidden layer: a competitive attack

This is where it gets interesting.

The thread is nominally about design.

But the real comparison isn't design systems.

It's platform dependency.

Many ecommerce platforms make visual customization dependent on:

* paid themes
* theme marketplaces
* agencies
* developers
* SaaS limitations

Burt is effectively saying:

> "You already own the pieces."

The repeated use of:

* upload addon
* turn on module
* copy template
* edit language file

is demonstrating ownership.

The subtext is:

> "Your store belongs to you."

Not:

> "Your store exists at the pleasure of a vendor."

---

## The fourth hidden layer: why he keeps mentioning language files

Most readers will skim over this.

I didn't.

The repeated emphasis on:

> Admin > Tools > Language Explorer

appears throughout the thread.

Why?

Because language overrides are safe.

They survive updates.

He is quietly teaching upgrade-safe modification patterns.

The reader thinks they're learning appearance tweaks.

They're actually learning system boundaries.

---

## The fifth hidden layer: ecosystem promotion

Look how many addons appear:

* Search
* Alert
* Mega Menu
* Reinforcement Messages
* Tabs
* Wishlist
* Hover Effects
* Best Sellers
* Sale Stickers
* Button Spinners
* AJAX Cart
* Product Badges
* Parallax Scroller

etc.

This isn't accidental.

He's advertising the ecosystem without advertising the ecosystem.

The thread says:

> "Look how easy Phoenix is."

But the mechanism used to prove that claim is:

> "Look how many addons already exist."

---

## The sixth hidden layer: confidence signalling

The strongest sentence in the entire thread is arguably the final one:

> "This whole project took less than ONE hour..."

Everything before that sentence is evidence collection.

The thread is effectively a legal case.

The conclusion is:

> "I just proved this."

Not:

> "Trust me."

That's why the thread works.

---

## What I think is really going on

This thread fits a pattern.

Most people read it as:

> "Here's how to make your store prettier."

I read it as:

> "Here's how to train shopowners to think in modules."

The visual changes are almost secondary.

The actual product being sold is a way of thinking:

* modify, don't replace
* compose, don't rewrite
* override, don't hack core
* use existing building blocks
* own your storefront

The biggest clue is that many of the resulting changes are fairly modest.

A professional designer could produce a prettier result.

But that isn't the objective.

The objective is proving that an ordinary shopowner can transform a store themselves in under an hour without touching core files.

That's a much bigger strategic message than "look at my new footer."

This thread is an example of Burt optimizing for long-term ecosystem capability rather than short-term visual impact. He isn't showing off a theme.

He's teaching users how Phoenix itself works.


Join The Code Co-op to get access to your library in the Code Co-op Forum
Post Reply