How do I create a custom skin or template?

CubeCart uses the powerful Smarty 3 template engine which allows static HTML code to deliver dynamic content. This is great as it means that you do not need any PHP developer experience. So long as you have basic HTML & CSS experience it is possible to achieve almost any design and layout imagineable. If you don't have HTML & CSS experience it might be an idea to find a freelancer from a comunity like upwork.com, seek a design agency or you can have a look at http://www.w3schools.com for some great free tutorials if you feel up to the challenge yourself.  

The foundation skin is named so after the framework it has been developed from. It is a responsive skin which means that is has been optimised to have a good user experience on a number of different screen sizes ("viewports"). Full documentation can be found at the "Foundation Framework" website. It is important to test your work on a mobile phone, tablet and desktop computer to make sure it works well for all visitors.

Stage 1 - Creating a copy of the default "Foundation" skin

It is important to make a copy of the Foundation skin before we start making customiations. This way your layout changes won't be lost when upgrading your store in the future as no code will get overwritten.

The Foundation skin is intentinally simplistic in look and feel and it is a great starting place for a custom design.

 

First we need to duplicate the skins/foundation folder and rename it. You can do this via the file manager of your web hosting account or you can download it all via FTP and upload it again to a new folder. In this example we will name the new folder "acme".

Browse to the skins/acme folder and locate the config.xml file. Open this with a text editor of some kind. e.g. Windows Notepad or Textedit on a Mac.

We need to make the following changes shown below in red: (These values are flexible and can have almost any value apart from the "name" which must exactly reflect the new skin folder name.  

...
[e-mail]
skin
acme]]>
Acme]]>
1.0
5.0.0
6.*.*
Your Company Name
http://www.example.com

... 

The image section can be ignored for now, however once your design starts coming together you may wish to specify different sizes for the images displayed in various areas of your design. If you do wish to change these please see the reference below: 

reference - This referers to where in the skin the image is shown.
maximum - This is the maximum width or height of the image which the master image will automatically be resized to
quality - This referes to the compression of the image (if applicable). Normally 80 is recommended for all round quality vs optimisation.
default - This is the image to show as a placeholder if there is no image spoecified.  

Save the changes and upload this file back to the server overwriting the old one. Now we just need to set this as the default skin for the store. To do this login to the admin side of your store and go to "Settings" >> "Store Settings" and click the "Layout" tab. Under "Default front-end skin" select "Acme" and click "Save".

If you want to check please load the front and of your store and view the page source using your browser to make sure the paths show "acme". 

Stage 2 - Finding your way around

To change the look and feel you'll need to edit the HTML code. All HTML files are located in the skins/acme/templates folder. You will see a number of different filenames designed to make it easy to find your way around. These are;

main.php - The main global template file
content.xxx.php - Content that loads into the main section of the main global template file.
box.xxx.php - This is normally a "box" or small area that loads around the content.
element.xxx.php - This can be for any other element not listed above.

Below is a screenshot of the homepage with some of these file names located.

 

The above image shows where just some of the template files are loaded into the page. These can be rearranged by moving the location of the macro in the main.php file. Please checkout the Basic Syntax section of the Smarty documentation.

All the skins images are located in the skins/acme/images folder and CSS stylesheets can be found in the skins/acme/styles folder.