How to create a Custom Skin for Shoppe Pro Ultimate

You can follow the steps below to create a custom skin with Shoppe Pro Ultimate Cart:
1) Create a new skin folder in content/skins/. It will look like content/skins/MyCustomSkin
2) Copy all files/folders from content/engine/design into that new folder. This will copy the Shoppe Pro Ultimate Cart "base skin"
3) If you would like to use existing pre-made skin as a base for your template, copy files from content/skins/ExistingSkin into content/skins/MyCustomSkin (overwrite files there)
4) You'll need to edit the skin.xml file-
To set the name of your skin you change the value of to one of you choosing. This value must match exactly the name of your custom templates folder. For this example skin, we'll change it to MyCustomSkin so the end result will look like this:
 <?xml version="1.0" encoding="UTF-8"?>
<title>My Custom Skin</title>
<image title="Catalog View">screenshot1.jpg</image>

After you have setup your skin.xml, save it, then save it into the root of your skin folder. For example ours would go into \content\skins\MyCustomSkin\skin.xml
5) Go to Shoppe Pro Ultimate Cart admin area and activate that new custom skin on the Activate New Skin page.
6) In content/engine/engine_config.php, add the following line:
define("DEVMODE", true);
Add the above line after the last define() you have there. It will force the engine to recompile the skin on each page refresh.
7) Edit files with manually or with Dreamweaver or comparable HTML editing software in content/skins/MyCustomSkin folder
8) When you have finished your changes it is STRONGLY RECOMMENDED to remove unchanged files. You can use tools like to compare folders.
You will need to compare content/engine/design and content/skins/MyCustomSkin and remove all unchanged files from content/skins/MyCustomSkin.
9) Remove define("DEVMODE", true); from content/engine/engine_config.php
  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

Cart Designer 101 - Part 2 - The Logic

To become a Cart Designer expert, it's best to understand how it works under the hood. If you...

Editing HTML Head

You will need to create a blank html file named element-custom-head.html using an appropriate...

(Ultimate) FlexiChic template customization instructions

To replace the template graphics: You will need to size your new graphics exactly as listed...

Cart Designer 101 - Part 1 - The Tools

Cart Designer is a tool which allows you to easily customize the look of your website without...

Adding / Editing Your Logo Using Cart Designer

Every Store needs a logo. Replace our default theme one with your own! Note: This section will...

Powered by WHMCompleteSolution