CV3 Templates Quick Start

Creating a new store in CV3 is easy. Just click “Create Store” in the left nav, give your store a name and leave the default choices in place (two-column layout, include sample data). Click the “Add Store” button at the bottom of the form.

Congratulations! You have a fully functional e-commerce storefront. Just click on your new store’s name to visit it’s dashboard, then click the “Staging” link just to the right of the CV3 logo at the top of the page. A new window (or tab) will open up and you can shop in your store.

You’ve got everything: site search, category listings, newsletter sign-up, product pages, shopping cart… even a member section. There’s just one problem. It doesn’t match your brand.

In fact, it’s a bit gray and down right ugly.

The default templates may not be much to look at, but they’re the perfect foundation for learning about CV3. They include more sample code than you’ll ever need to look at, because it’s rare that a store implements all the features in the default template set. In fact, you may start deleting more things than you add, but that’s okay… deleting is easier.

So let’s start getting our hands dirty and get this store ready for customers.

STYLING WITH CSS

Editing your Cascading Style Sheets (CSS) is the fastest way to start styling your store. If you’re not familiar with CSS, you can Google for tutorials or check out the CSS Zen Garden to see how just working with style sheets can radically change the look of a site.

CV3 offers direct access to all the styles that make up your store. Open up the Design section in the left navigation (click on the blue “pillbox” named Design), then click on Template Library.

The templates in your library are grouped together by type, and the first group is called CSS Stylesheets. Click on this name or the plus sign to open up the group, then click on styles.css or the edit button to the right of it.

There’s your CSS! You can make any changes you want, or you can copy/paste additional styles from external editors. You can click the Save button at the top or bottom of the page to save your progress, and click Save and Quitwhen you’re done and want to return to the main page for your Template Library.

Here are a few tips for working with your CSS:

UPLOADING ADDITIONAL CSS FILES

Most sites like the simplicity and convenience of having one stylesheet – it keeps everything together in one place. But sometimes you need to include more than one, or you may be working with a stylesheet framework so you need multiple files. Here’s how you do it.

First you upload the CSS. In the CV3 left navigation click on File Library under the Design section and then click the Upload File link at the top of the page. Click the Browse button to find the CSS file on your harddrive and then click Upload.

Second, you’ll need to link to your new stylesheet. Return to your Template Library and expand the Site Design Templates group, which should be the third group in the library. Scroll through the list and find the template called “Meta Tag Information (_meta.tpl)” and click on the name or the edit button to the right of it.

Dig through this file to find this line:

<link rel=”stylesheet” type=”text/css” href=”{#stylesheet#}”>
Add a link to the spreadsheet you just uploaded right above this line:
<link rel=”stylesheet” type=”text/css” href=”/downloads/blueprint_screen.css”> <link rel=”stylesheet” type=”text/css” href=”{#stylesheet#}”>
Make sure you change the name of the css file to the name of the file you uploaded. You can do this with multiple stylesheets, and you may wind up with something like this:
<link rel=”stylesheet” type=”text/css” href=”/downloads/blueprint_screen.css”> <link rel=”stylesheet” type=”text/css” href=”/downloads/blueprint_fancy-type_screen.css”> <link rel=”stylesheet” type=”text/css” href=”{#stylesheet#}”>

{* IE online styles *} <!–[if IE]> <link rel=”stylesheet” type=”text/css” href=”/downloads/blueprint_ie.css”> <![endif]–>

Now don’t take all this as a suggestion to use stylesheet frameworks. Most likely there are better ways to implement your design. But it does illustrate how to include multiple stylesheets and browser-specific stylesheets.

So during that process you probably saw a coule of things that scared you. First you saw tons of templates with strange names. Then you opened up a template and saw tons of strange code that didn’t look quite like HTML.

Relax. It’s not so bad. And when your boss is asking you for more whitespace around the new home page promo, you’re going to be glad you have this kind of access to your templates :)

So let’s overcome the first fear.

DECONSTRUCTING CV3 TEMPLATES

The pages on your CV3 store are built by assembling all of these templates together. Depending on the page you’re on, it may use one, two, twelve or twenty of these templates to assemble the page the user sees. This is going to get technical, so stay with me.

The default template set does this because we’ve factored out the code that is used over and over again into component files that can be included where ever they are needed. Some people refer to this technique as DRY – Don’t Repeat Yourself.

A good example is the _meta.tpl template we looked at earlier. As you can guess from the name and the fact that you include stylesheets in it, this file creates the part of the page between the <head> tags, most people call it the header information or the meta information.

This stuff is included on every page of your site. So we seperated the code into this small, convenient template. When you want to change the way your meta information works, you change it here and it updates on every page of your site.

Want to change the way the shop-by-price search looks? It’s in the left column of your default storefront. Just edit “shopbyprice_menu.tpl”. This file only has 15 lines, because all it does is control the display of one small piece of your page.

Once you’re familiar with CV3 Templates, you’ll find yourself searching for a specific template and making a quick change easily, without worrying about accidentally affecting other areas of your site, or forgetting to update something in all the places it appears.

TEMPLATES INSIDE TEMPLATES

Since templates can include other templates, and those can include even more templates, it can be frustrating to find the exact template you want to change. So let’s make a change to the home page to illustrate how you can easily find the template you need.

Let’s say you want to make a change to the Shop By Price area on the left of the home page, but you have no idea what that template is called or what group it’s in.

On the main page of your template library click Expand All at the top of the page. This will open up all the template groups and show every single template file on your site. Use the Find command in your browser to search for the text “home” or “index”… you’ll quickly find the index.tpl file under the Catalog Display group. Open it up.

You can probably read the source code and tell what files it includes, but there’s an easier way. At the top of the page there’s a link called “Edit pages this template includes”. Click this link and you’ll see all the “sub-templates” that this template uses. You can click on each one, but at first glance we can probably assume that the stuff in the left navigation is in “_top.tpl”, since in web design left navigation is usually created before the main area of the page, and by process of elimination (two of those templates are promos and the last is the bottom of the page).

So click on “_top.tpl” and the page reloads with that template. Again we could look at the source code, but let’s stick with our template navigation at the top of the page. Now we have two links, “Edit pages calling this template” and “Edit pages this template includes”. This will take some getting used to, but these links are sort of like “up” and “down” links, moving you through the template heiarchy.

“Edit pages calling this template” will show you “parent” templates, and in this case there are a lot, but the “index.tpl” file we just came from is included in the list, so we can move back “up” to that template if we want.

“Edit pages this template includes” takes us further “down” the chain, helping us drill down to a specific point on a page. In our case, this is what we want to do, so click this link to expand this section. We see three files and an obvious choice for our next jump – “left_nav.tpl”. We know from viewing our staging site that that’s exactly where we want to make our change.

So clicking on “left_nav.tpl” takes us to another short snippet of code that displays the left navigation. If we want to reorder the way things appear in the left nav, we’d do it here. But we want to actually change something more specific, so let’s again click on “Edit pages this template includes” and we see what we want: shopbyprice_menu.tpl. Go ahead and click on it.

Change the text “SHOP BY PRICE” to “Price Shopping” and click Save. Refresh your staging site (it is open in another tab by now, right? If not click Staging in the top bar to the right of the CV3 logo). You should see your change immediately. If not, check to make sure your browser is not caching web pages locally.

All looks good, so click Save and Quit. Whew! A familiar site, the main page of a template library!

Navigating up and down the template hierarchy in this manner is a great way to explore the CV3 template system and discover how things work. As you get more and more familiar with things you’ll start moving to your file directly. And when you’re a master, you’ll create your own template groups, move the files into the groups you want and establish your own system.

So before we go, we need to tackle that other fear… the strange code inside those templates that doesn’t quite look like PHP or HTML.

LOOPS, VARIABLES AND THE REST OF THE SMART(Y) STUFF

We’ve edited CSS and HTML, but what if we want to change something more dynamic. What if we want to adjust the way a product title is displayed, or the way a category page loops through all the products it contains? In these cases, we can’t just edit the HTML because CV3 is pulling stuff out of your database and displaying it dynamically.

To do this sort of thing you need to work with a language called Smarty. Smarty is an open-source templating language based on PHP, and it has it’s own website with tons of information and a great quick start of it’s own. But here’s the quick scoop.

CV3 templates (.tpl files) are just Smarty templates. When reviewing the Smarty documentation, you don’t have to worry about the PHP stuff, we take care of that for you. All you have to worry about is the .tpl stuff.

Here are a few examples of how you use Smarty with CV3:

To display a product name:

{$product.prod_name}
To capitalize that product name automatically:
{$product.prod_name|capitalize}
To call another template file in a template:
{include file=”category_sort.tpl}
The Smarty documentation covers a lot more. My suggestion is to read the crash course and the come back to CV3 and start looking at product and category templates to start to see how Smarty is used. The CV3 templates can get complex, usually because they look for default values for things if there are no custom values for them, but just scan them and the variables and loops you need will start to jump out at you, and you can ignore the rest.

Once you start really digging into CV3’s Smarty implementation, you’re going to wonder about what data structures are available to you in each template. You can figure out the basics by reviewing the default templates and how they call a product title, or how a featured product rotation is coded on the store’s home page. But when you’re rolling, it’s better to just see a list of everything you have at your disposal. That’s when you need the following command:

{array_debug}
This command can be placed anywhere, in any template, and it will show you all the variables and arrays available to you. Try putting it at the top of your home page. It will print a link: “Debug All” and when you click this link a panel will open showing you all your data structures.

A better way to use array_debug is to give it a specific array or variable to print. It keeps the output smaller and shows you just what you want to see. Here are some examples:

Assigning a variable and immediately printing it to the screen:

{assign var=”subCats” value=$categories.$cid.sub_cats} {array_debug var=”subCats”}
Displaying an array:
{array_debug var=$products} {array_debug var=”products”}

{array_debug var=$categories.$cid.sub_cats}

Don’t worry if you don’t get this to start with… it’s complicated, magical stuff. But it gives you unprecidented power over the way your site not only looks but how it actually works. Using array_debug isn’t going to break anything, just give it a whirl and you’ll start to learn exactly how you want to use it.

CONCLUSION

With great power come great responsibility. The CV3 template system let’s you change anything (literally anything) on your site, so they can be daunting. Designers who launch multiple stores will get faster over time, and learn all kinds of things that will help produce stores faster. And once you create one store, you can use it as your starting template for your second store. In fact, some CV3 users create a special template set that isn’t used in a live store but instead provides a “base” to start from when creating new stores, a base they like better than our default template set.