Custom Vantage Web™
How to freshen up your homepage
by Becky Skelley
Introduction
For the last two months, we’ve walked you through updating and working with your store’s content. Now that spring is here, let’s talk about freshening up your homepage. Your homepage is the first impression that your customers have of your website, so it’s worth revamping it every once in a while to make the content friendly and inviting to your customers. Part of that process involves altering your store content.
Some may confuse freshening up your website by altering the store content with changing its look and feel. The difference between the look and feel of your site and your store content is significant. The look and feel of your site consists of the colors used in the background, borders, font colors, font sizes and the header and footer of your site’s theme. The store content is the actual information presented to your customer in the format of text, links and product information. Let’s begin the process of altering your store content by reviewing the Content tab, the location of all homepage content changes.
Steps to Follow
To begin freshening up your website’s homepage, we must sign into the admin area of your Stamp Shop Web site. Once you are logged in, click the Content tab. When you click on the Content tab, you will first see all of your homepage content, displayed in three columns (see Picture 1).
Column 1 is the one to the far left of your homepage, where your website’s Categories usually reside. Column 2 is located in the middle of your homepage, while Column 3 is located on the far right of your homepage. At the very top of each column, you’ll note a New button and a drop down menu. These allow you to add the drop down menu elements to each column.
To do so, simply choose the column to which you would like to add an element. Then click the drop down menu to select the element. Once the element is highlighted, click the New button to add it to the appropriate column.
Let’s review the different elements you may add to your homepage (see Picture 2):
Category Grid—this element displays your categories in a grid format. The images used are set inside the individual Category, using the Icon image. We highly recommend adding a Category Grid to your homepage within Column 2. We do not recommend placing this element in any other column, due to its varying size.
To add a Category Grid to your website’s homepage, click the drop down menu at the top of Column 2. Highlight it and then click the New button (see Picture 3).
You will then see the Edit homepage Block page (see Picture 4).
At the top, you’ll see Block Type Category Grid with the Grid Columns box. Here you may type the number of columns for the grid (or how wide you like it). We recommend two to five columns wide. Below this area, you’ll see the word Items with a New button next to it. Click the New button to add your categories one at a time.
Once you click the New button, you’ll see the Edit homepage Block Item page (see Picture 5).
Here you can view all of your website’s categories within the drop down menu. Once you’ve located the category you would like to add, highlight it and then click the OK button.
Now you will see the Edit homepage Block page with a new item (see Picture 6).
Click the New button to add as many categories as you would like to appear in your Category Grid. Once you are finished, click the OK button to view your grid on the homepage Content page.
Another benefit of the Category Grid is the functionality of a mouse-over at your fingertips. A mouse-over is what happens when you move your mouse over something on a web page. In Stamp Shop Web, we’ve set up a mouse-over field for your use. When you set a different image within this field, the image will be displayed only when the mouse hovers over the Category Grid image.
This functionality helps customers know where they are about to click on your website and also provides a much more technically savvy experience for the customer. There’s no need for special coding to achieve an interactive look on your homepage because we’ve done all the coding for you.
To achieve this look, simply edit a category (that appears within your category grid), and then set the “icon image” and the “mouse-over image,” located in the Images section of the Edit Category page (see Picture 7).
The mouse-over image should be the same size as the icon image but slightly different in appearance, so that when the mouse-over effect displays the different image, it can be noted by the customer. For example, you could add a colored border to the mouse-over image.
Category List—this element displays your categories in a list format. We highly recommend placing a Category List within Column 1 or 3 on your homepage. This allows your customers to view all the different categories on your website when they first arrive on your site.
To add a Category List, highlight Category List within the drop down menu at the top of either Column 1 or 3 and click the New button. You will then see the Edit homepage Block page. Click the OK button. Now you will see that Category List has been added to the bottom of the column. You can move the Category List to the top by clicking the UP arrow (connected to the element). This will move the List up one slot. Keep clicking the UP arrow to move it to the top.
Category List 2—this element displays your categories in a list format with all sub-categories shown. To add Category List 2 to your homepage, click and select the element within the drop down list at the top of Column 1 or 3 and then click the OK button. The Edit homepage Block page will appear; click the OK button (see Picture 8).
You’ll note that Category List 2 has been added to the bottom of the column. To move the Category List to the top, click the UP arrow to move the List up one slot (see Picture 9).
Keep clicking the UP arrow to move it to the top.
Category Rotator—this element allows you to choose several categories to be displayed in a rotation. The categories will randomly alternate each time the homepage refreshes. As with the Category Grid, the images used here are pulled from the Icon image set within each individual category.
To add a Category Rotator to your website’s homepage, click and select the Category Rotator element from the drop down list of the desired column. Click the New button (see Picture 10).
The Edit homepage Block page will appear; you can then add Categories to your Category Rotator (see Picture 4).
To add Categories, click the New button. Now you will see a drop down menu showing every category on your website (see Picture 5). Select the category you would like to add and highlight it. Then click the OK button to add it to your Rotator. Add as many categories as you’d like. When you are finished, click the OK button on the Edit homepage Block page, and your Category Rotator will be added to the bottom of the column.
Coupon Search Box—this element allows your customers to search your website for coupons that you have set up. To add a Coupon Search Box to your website’s homepage, first choose the column to which you would like to add it. Then click and select the element from the drop down menu at the top of the column; click the New button (see Picture 11).
After this, you will see the Edit homepage Block page. Click the OK button. Now the Coupon Search Box has been added to the bottom of the chosen column.
HTML Rotator—this popular element is the most flexible within Stamp Shop Web. It lets you add text, HTML, images, links, tables and much more to your homepage and can be placed within any column. To add an HTML Rotator to your website’s homepage, first choose the column in which you would like to add it. Then click and select the element from the drop down menu at the top of the column; click the New button (see Picture 12).
Next you will see the Edit homepage Block page. Click the Edit button (see Picture 13).
Then you’ll see the Edit homepage Block Item page with the WYSIWYG editor. To review the WYSIWYG editor’s functions, please refer to our article in the February 2013 MIM issue. Add your content and when you are finished, click the OK button. If you want your website to display rotating content in this block, you may add new HTML areas by clicking the New button. If you would prefer that your homepage content not rotate, click the OK button. You’ll note that the HTML Rotator has now been added to the bottom of the column.
Mailing List Signup—this element lets customers sign up to receive mailings sent out by you through your Stamp Shop Web website. We recommend placing this element within Column 1 or 3, due to its smaller width. To add it to your homepage, first choose the column in which it should appear. Then click and select it from the drop down menu at the top of the column.
Next click the New button (see Picture 14).
Now you will see the Edit homepage Block page; you’ll see the words Mailing List next to a drop down menu. Here you can select which mailing list your customers can choose to receive. As a default, we’ve set up the Store Mailing List for you. In a future article, we will review Mailing Lists which can be edited and created in the Users tab. Stay tuned! Click the OK button to see the Mailing List Signup element added to the bottom of the column.
Product Grid—this element displays your products in a grid format. Setting up this element is the same as the Category Grid; however, instead of adding Items that are Categories to your grid, you will be selecting Products that currently exist on your site.
Product Rotator—this element allows you to choose several different products to be displayed using their small images, product names and site prices in a rotation. The products will rotate each time the homepage refreshes. Setting up this element is the same as the Category Rotator; however, instead of adding Items that are Categories to your Rotator, you will be selecting Products that currently exist on your site.
Search Box—this element allows your customers to perform searches on your website. We recommend this box be added to either Column 1 or 3, due to its smaller width. To add a Search Box to your homepage, choose the desired column. Then click and select the element from the drop down menu. Click the New button (see Picture 15). You’ll see the Edit homepage Block page; click the OK button. Now the Search Box has been added to the bottom of the column.
Now that we’ve reviewed the different elements that you can add to your homepage, let’s take a look at the Category Page and Product Page, menu items that appear on the far left within the Content menu. The Category Page allows you to choose and add elements that will appear within Column 1 on all Category Pages. As a default, we’ve added the Search Box and Category List to the Category Page for you. This allows your customers to see all of your categories while shopping and lets them search for different products that exist on your site.
The Product Page, similar to the Category Page, lets you add elements that will appear in the first column on all Product Pages. Once again, as a default, we’ve added the Search Box and Category List for you. We do encourage you to explore adding links or even rotators to these pages as you see fit.
Well done! We’ve completed our review of the Content tab. Now here’s some homework. Try adding or updating content each week to keep your website fresh and up-to-date. Even adding a simple product rotator to the Products Page will force your customers to see change. The benefits of change in this respect are substantial: your customers will see that your website is active, and the search engines will note the changes when they re-index your site.
Stay tuned for next month when we’ll discuss Special Pricing. And just around the corner, we’ll dive into the many possibilities contained within the Settings tab. It contains a wealth of different options that you won’t want to miss!