Ecommerce Templates > General Help > Using Expression Web

Using Expression Web with Ecommerce Templates

Once you have downloaded your zip file you'll need to double click on it and extract the contents of the download to where you want to work from on your hard drive.

Then open Expression Web and go to File > Open Site and browse to where you unzipped the download to.

Then click on "Open"

You should see a list of files and folders that make up your store.

extras - this is where the original png files and blank gifs can be found

fpdb - (ASP version only) this folder contains your Access database

images - the default images used in the design

prodimages - the product images used on the product pages

templates - this contains the dwt file which will be used to make global updates to the design of the store

vsadmin - this contains all the admin files and when uploaded to your server, will be the location of your store control panel.

Global changes to the design can be made through the dwt file. This can be found in the Templates folder. Global elements are typically the header section, menu, news and footer. When you open the dwt file by double clicking on it you may see a box appear like this

Even if this box doesn't appear you should go to Site > Site Settings and in the tab labeled General, make sure you have checked the box labeled Manage the Web site using hidden metadata files.

Once you have checked the box and clicked "OK" at the bottom of the window you may get another box like the one below. Click on yes.

You can now start making changes through the dwt file. Open the dwt file and make a small change. On saving the file you should receive a prompt like this

Select "Yes" and the change you made will now be applied to all the files that are attached to the template. You can now go on and make all the global design changes you need to.

If your pages don't update, move the dwt file out of the /templates/ directory and agree to update paths when prompted. Now make a change to the dwt file and the pages should be updated. Upload the changed files to the server, the dwt file doesn't need to be uploaded as it is just a design tool.

You will also need to make some design changes on a page by page basis. When you open the page you should see code that is editable with a white background and the code that is governed by the dwt and is not editable page by page has a yellow background.

In design view the editable region is outlined in orange with the name of the editable region in a tab at the top.

How to get started in Expression Web

• This video will walk you through the steps of opening the PHP version of Ecommerce Templates in Expression Web.

Now that you can see how the general design changes can be made, this is how you would proceed.

• Get your general design done locally, more or less the look you need for the site - don't worry about the products and links for the moment. The ecommerce templates come with .png files in the images/extras folder, so changing colors, titles and company name etc is simple - Adobe have a 30 day free trial available for Fireworks if you don't already have a copy.
• You don't need to make any design changes to the files in the vsadmin folder as you'll be the only one using those pages for adding product information, shipping stuff, categories, credit card processors etc.
• Now you can upload all your site to your server - you can do this through Expression Web itself or using a specialist FTP program.
• This is where the fun starts - you'll probably want to get some categories and products on your store so you'll have to log into the admin section - chances are that first of all you'll need to change the path to your database in the file vsadmin/db_conn_open.asp or vsadmin/db_conn_open.php - here's a quick way of checking to get the path correct for the ASP ecommerce plus templates and here for the PHP version.
• Now that's done log into your online admin control panel at www.yourdomain.com/vsadmin/login.asp or www.yourdomain.com/vsadmin/login.php - and the first thing to do is change the default username and password so no-one else can get in.
• Take a look around the various options, the ecommerce templates come with some sample products, categories and descriptions and although they will need to be deleted, they should give you a good idea of how the system works.
• That's about it, you can now start setting up your shopping cart and site in general - check out the user manual and if you run into any difficulties, take a look at the support forums.

For help with uploading your store files via FTP, have a look at our Filezilla tutorial.