Kryptronic Info Center

The Info Center has articles on everything you need to get your site up and running with Kryptronic software. Hundreds of articles are available which contain tips, tricks, software updates and release notes, and everything you ever wanted to know about eCommerce, but were afraid to ask...

Kryptronic

Training Wheels: Adding Banner Ads and Rotators

So, you’ve seen the new version of ClickCartPro / EuropaCart, you’ve made the plunge, purchased the software, run the importer and now you’re looking at the latest version of your new store.  Where are the cool slideshow banners and the cool little ads that the software touted?  Where’s the beef?  No problem.  If you just imported your store and didn’t leave the demo store in place, you’re likely not seeing the extra slideshows at this point.  No worries.

Or… if you did leave the demo store in place when you ran the importer, you might be seeing these, but you just can’t figure out how to STOP selling electric guitars and amps.  Again… no worries.  This tutorial will show you how to:

– Turn the banner ads on and off
– Assign your own slides and assign them to the correct location
– Create and import those slides
– Assign links to those slides

trainban-1

First, let’s deal with the big banner on the front page of your site.  It’s important to note that you can have a different banner slideshow on any html page on your site.  This powerful option allows you to program a specific ‘show’ for any page you choose.  Step One of this tutorial assumes the following:

– You want your slideshow to be on the front page, as in the ClickCartPro/EuropaCart 8 demo
– You want to use the default sizes of the banners you see in that demo

The demo you’ve seen looks like this:

trainban-2
We’ll also assume you’re currently working on your new store in a hidden sub-directory so that any changes we’re making during this tutorial will not be seen by your customers.  We’ll go into the Website | Webpages function and click on the ‘Update’ button beside the Splash page.

trainban-3

Each html page has a side menu that looks like this:

trainban-4

Note the Banner Advertisements entry at the bottom and click on it.  If it’s not already there, type in ‘SPLASH’.  Now look at the front page of your store and you should see the banner ads alive and well and selling guitars to your customers.  Note this procedure because you have this option on every single html page you create… this can be a powerful ally.  Next, we’re going to go into the Website directory and choose the Content and then ‘Banner Advertisements’ menu.

trainban-5

This area is where you can manage all of your banner advertisement slides.  You’ll notice both the Splash banners as well as the side banners.  You’ll also notice a Functions Menu, which allows you to search the entries or create a new one.  As this first segment is dealing with the banner on the Splash page, let’s select the first example and just peruse it a bit. Click on the ‘Update’ link beside DEMO-CONTENT-SPLASH-1

trainban-6
Like all edit areas of ClickCartPro/EuropaCart, you’ll have a series of menus and fields set up to customize each item you edit. You’ll also notice a series of choices along the left that contain this active menu as well as a ‘Placement’ and a ‘Link’ menu.

trainban-7
Let’s start with the ‘Banner Advertisement’ page. It will allow you to:

– Assign an ID and name to a banner (only used by ClickCartPro/EuropaCart internally to identify the slide)
– Set that particular slide to active (you can create hundreds of slides, but only activate the ones you want for a particular slideshow)
– Upload the artwork you’ve created for that image (click on Browse to find the new slide on your local hard disk and then upload it to the appropriate program file)

trainban-8
Now let’s click on the ‘Placement’ side menu.

trainban-9

This tiny menu allows you to:

– Assign the slide to a section (you really have 2 choices… Content Section, which means ‘an html page’ or Skin Widget, which means a smaller margin banner)
– Assign the slide to a group (remember, you can create a large number of groups, with each being assigned to a certain html page or you can create collections for seasonal Front Page advertisements… i.e., Christmas, Summer, etc.)
– Assign the slide an order in the slide show (like all things ClickCartPro/EuropaCart, the lower the number the earlier the slide shows)

Finally, we’ll find the Link side Menu. This deals with linking a particular slide to something when a user clicks on it. You basically choose the type of link and the location.

trainban-10
For the type of link, you can choose from the following:

– HTML Page
– Store Category
– Store Product
– External URL

If you choose an inner store link, simply put the identifier of whatever particular page you’ve chosen in this space, or with an external link, simply copy the entire URL to it.  Now that you know how the system works, let’s create a slide.

If you’re using the default size of the banners in the existing store, you’ll find that they are 665px × 250px.  If you have an agency doing graphics for you or simply want to use an art program to create your slides, this is the size you’re shooting for.

Not sure how to create a properly sized graphic?  How about just copying that demo store logo, by right clicking on it and copying it?  Then paste it into your art program and create a graphic to match it.

Important: This applies to the default sizes of the demo store skin.  If you are using a Custom skin on your site, you might have to adjust accordingly.  How do you know what size best fits your store?  Simply create one slide that resembles what you ‘think’ you need and try it… remember, we’re working in an offline sub-directory, so you can experiment a bit until you find a graphic size that perfectly fits your particular store.

trainban-11
Now let’s briefly cover the side menu slideshow ads.

trainban-12
Managing and creating these ads is almost identical to the larger banner ads except that they are always active in the left margin of your store.  Unlike the banner ads, which can be assigned to any particular html page, the side margin ads are either on or off.  They are only managed in the Banner Advertisement section of the Web Pages directory.  Let’s look at one so we can see the slim differences in management.  Again, go into the Banner Advertisements directory by click on the Web Pages/Banner Advertisements menu.

trainban-13

Find the item called ‘DEMO-SKINWIDGET-SIDEMENU1-1’ and click on ‘Update’.  This is exactly the same as your banner ad for the Splash page save for one tiny item.  Click on the side menu called Placement and then look at the Placement heading there.

trainban-14
You’ll see that you have 2 choices… Skin Widget or Content section.  Your Splash page ad lived in the Content section and was the assigned in each HTML page as we showed you. But these side ads are stored as Skin Widgets and are either on or off.

Again, just follow the procedure we outlined before to create your side slides and then assign them to whatever group you choose, set up links to either internal or external as per the previous demonstration using the management system and you can be creating ads and promoting products like never before in your store.  The only difference in creation would be size of the artwork.  In this case, the demo banner artwork is sized to 195px X 195px.

Kryptronic: Security. Stability. Reliability