Knowledgebase

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 Shoppe Pro Ultimate 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, lets look at the files involved.

The Files.

Inside each of those folders above, will exist the same files and folders... Well, sort of... we'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:

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:

Uck... It's not meant to be beautiful however. It's only meant to be the bone structure for the theme you build.

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 bones 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.

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 it's place. A theme designer can release their custom theme to anyone, and when people make changes it 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.