To become a Cart Designer expert, it's best to understand how it works under the hood. If you need them, here's Part 1 - The Tools and Part 3 - The Lesson.
The Hierarchy
The files that make up your PinnacleCart site come from multiple places. Well one place, if you want to get technical. If you were to right-click and view any image on your website, or view the page source, you will see that all of your theme files are located in the path, content/cache/skins/SkinName/ (SkinName being a placeholder for the actual skin you have enabled).
The cache/skin folder is the content delivery folder. It's also re-compiled all the time, either by activating Cart Designer or by having DEVMODE turned on. Because of this, YOU SHOULD NEVER MAKE CHANGES IN THE CACHE FOLDER. Any changes here would only be temporary. As soon as the skin re-compiles, the change is gone.
So how does the cache/skins folder recompile? Truly speaking, it uses some complicated logic that's tricky to explain. But at the most basic level, it is combining the following folders into one:
content/engine/design/
content/skins/SkinName/
content/skins/_custom/skin/
So it takes the bottom structure, content/engine/design/ (which contains every single file used in the theme), adds on top of it any files located in the skin (content/skins/SkinName/), then finally adds any files that were edited via Cart Designer (content/skins/_custom/skin/).
It can be confusing, but maybe visualizing will help clarify.
We will get into each of these file paths in a bit, but first, let's look at the files involved.
The Files
Inside each of those folders above, will exist the same files and folders. I'll explain in a bit why _custom and SkinName don't necessarily include all files and folders.
The folders are as follows:
javascript - contains the theme JavaScript.
images - contains the theme images.
styles - contains the theme CSS.
templates - contains the theme HTML.
Each of these can be broken down in greater details below:
| javascript/ | contains all JS not on the checkout page |
| javascript/opc | contains JS featured on the checkout page |
| templates/email | contains HTML related to emails |
| templates/layouts | contains HTML related to the different zones of the site (header, footer, left, right, etc) |
| templates/pages | contains HTML related to specific pages of the site (login, category, product, text pages, home page, etc) |
| templates/panel | contains the HTML used in your widgets |
| templates/wrappers | contains the HTML elements on your site (HTML head and body content) |
This is the overall structure of a theme. Now we will examine each section of the theme pyramid and how they all combine to make your site.
The Engine Files
Your very basic theme is found in content/engine/design/. It can be considered the Master Theme. The theme for which all other themes are based on. It also happens to be very basic and ugly. It doesn't even use responsive design. Here's a pic of it below:
It's not meant to be beautiful as it only serves as the bone structure for the theme you build.
Note: The content/engine/design folder also contains a themes directory that is not used by skins or _custom. This contains the default css for all themes.
The content/engine/design directory contains all of the basic HTML/CSS/JS and Images needed to make your site work. It doesn't contain design, though. This is where the theme you've selected and _custom come in. The theme adds in the guts, muscles, and skin to your bone structure. Cart Designer adds in the features that make your site unique.
The Theme Files
Throughout this article, we've referenced SkinName multiple times. In case it wasn't obvious, this is just a stand-in name for whatever theme you've chosen. For example, you may have DressCode, Petsco, XtremeExpedition, etc. The theme you select will determine what files exist in the theme folder.
Our Design Documentation explains in detail how to make your own theme. A mistake a lot of theme creators make is copying every file from content/engine/design into their theme. While this works, it is a bad practice. It not only makes troubleshooting code more difficult, it can also affect how upgrades work. If an engine theme file is updated, and a theme includes the same file, the update will not take effect.
So you will notice that the theme folder will only contain a fraction of the files and folders that engine/design does. This is because it should only contain the files that differ from content/engine/design. For example, my theme ElegantVibe has a custom home section. This is the only file in templates/pages/site/ for ElegantVibe that differs from engine/design. So, this is the only file that will exist in that path. See the screenshot for clarification:
When the site compiles, home.html is taken from skins/ElegantVibe and pushed into content/cache/skins/ElegantVibe. This is because files in the skin have precedence over files in the engine.
Note: A number of skins have an extra folder called fixtures. This contains the test product data available when you enable a skin.
The SkinName folder gives you a site that is worthy of showing to people. But it's not your site yet. That's where Cart Designer and _custom come in.
The Cart Designer Files
The final set of files. Whenever you make a change in Cart Designer, the file you edited is not changed. Instead, a brand new file is created inside content/skins/_custom/skin/. When you compile into the cache/skins/SkinName/ directory, the _custom files are the final ones stacked on top of everything else.
This prevents engine and theme files from being broken. If a mistake is made in Cart Designer, the file created in _custom can be removed. When the skin is compiled the original is moved back into its place. A theme designer can release their custom theme to anyone, and when people make changes to it in Cart Designer, their theme will not be affected. See I've Made a Mistake in Cart Designer. How do I fix it?.
When you Edit Visual Properties, the CSS is placed into skins/_custom/skin/styles/design-mode.css. It can also be found in skins/_custom/css.
When you add CSS into Edit custom css, the code is placed into skins/_custom/skin/styles/custom.css. The CSS found in these files will take precedence over all other CSS, with custom.css taking the top precedence.
When an HTML file is edited, it is laid on top of every other. So again, for example, I have ElegantVibe enabled, access Cart Designer, and edit home.html. I now have three home.html files:
content/engine/design/templates/pages/site/home.html
content/skins/ElegantVibe/templates/pages/site/home.html
content/skins/_custom/skin/templates/pages/site/home.html
The file used in content/cache/skins/ElegantVibe/templates/pages/site/home.html will be the home.html from _custom.
Note: Unlike theme folders, the _custom folder does contain all folders by default. However, it will only include the files which are edited via Cart Designer. You can also copy files from the engine or theme folders, edit them and place them directly into _custom.
Links to Related Articles
Cart Designer 101 Part 1 - The Tools
Cart Designer 101 Part 3 - The Lesson
If you didn't get your question answered, please contact the Pinnacle Cart Support Team. To submit a ticket, go to the My Account drop-down menu at the top right of the admin area and select Support.
