Creating the Home and Section Pages Of Online Shop

Time to get down to work. Now that you understand how to get around in Store Editor and use the Editor toolbar, you can start setting up the Home page and section pages. The Home page is your store’s “front” page, while the section pages are product category pages. Later in “Creating and Editing Section Pages,” you’ll discover how to use section pages for various other purposes.

Using HTML in message boxes is a crucial skill that can help your store stand out.

Additionally, you’ll learn how to build a product “special” on the Home page, add, remove, and move components there, and install items onto section pages and transfer them between them. By the end of this article, you should be able to construct pages within Store Editor easily; in the following article, you’ll learn much more about how to specify the type of information that goes on them and how to establish the page design.

Configuring the Home Page, creating a product “special” on the Home page, placing products onto a section page, and moving products between sections. 

By the end of this article, you should understand how to create pages in Store Editor; in the following article, you’ll learn much more about how to define what kind of information goes on them and how the pages look—the page design.

Setting Up the Home Page

Let’s get started in Store Editor by creating the Home page.

When you first open Store Editor, you’ll be on the Home page; if you’ve moved around, click the Home button on the navbar to return there. Then, on the Editor toolbar, click the Edit button.

Tips:

Look in your browser’s Address or URL bar; do you see /index.html at the end? If so, you’re definitely on the Home page. If not—if you see a scramble of letters, such as CMIqwAAC— you could still be on the Home page; in some circumstances, Merchant Solutions doesn’t show the index.html filename. Is there a Home button at the top of the navbar? If not, you’re on the Home page.

Warming

The “Help” language underneath fields in the Edit pages is frequently unclear and occasionally just incorrect! Follow this book’s field descriptions as a guide.

Typical Edit pages look like this. While working with Store Editor, you’ll encounter a lot of these. You’ll see something like this everywhere you’re editing a page; the fields will differ, but the layout of the pages is fundamentally the same. When working on the Home page.

Field	Description
ID	Every page, as you saw with products earlier, has a unique ID. In this case Merchant Solutions has provided the ID
Type/ Template	The Types and Templates pages are advanced features that allow you to create completely new page designs. We do not cover this subject as it’s really a “relic” from an earlier version; if you need more design control you probably should be working with SiteBuilder, Dreamweaver, or some other kind of HTML tool.
Message	This is the main block of text that appears on the Home page. You can place HTML in here. See the “Using HTML in the Message and Other Text Fields” section for more information
Page-title	This is the text that appears in the browser’s Title bar when the page is displayed. (If you know HTML, you may know that this is the text.) To help the search engines index your site, make sure you use good keywords here, rather than just your company name. See Chapter 26 for more information.
Contents	The list of sections (categories) and products that will be included on the navbar; each item has its own button. Some of these entries are put there automatically; when you click the Section or Item button on the Editor toolbar, for instance, you create a section or product page. The system puts a button onto the navbar for you (and thus places the appropriate section or product name in the Contents text box).
Page-elements	This setting controls which page elements will be displayed on the Home page and where each element will sit. The elements include items such as the Message and Image that you define in this Edit page, along with other items, such as a search box and an address block, which are created elsewhere. See Chapter 17 for information on how to use this tool.
Image	You can upload an image onto the Home page if you wish; click the Upload button.
Specials	A special is a section or product that you want to feature on the Home page. Simply type the ID of the section or product into this box, and information about that section or product will be placed onto the page. See “Making a Product or Section a ‘Special’” later in this chapter for more information.
Image-format	This controls the format of the picture that you upload on the Image line. Left reduces the image in size and places it to the left of the text, wrapping the text around it to the right; select Banner and the image is shown above the text, larger, but constrained to the width of the text below it; select Unconstrained and the image is shown full size above the text.
Buttons	This line is where you define which buttons will be shown in the navbar on the Home page. We’ll cover this later in a discussion about different ways to modify the navbar throughout the site; see Chapter 17.
Specials format	If you enter specials in the Specials box, Specials-format defines how they will be displayed.
Contents elements	This field defines what information is pulled in from a product or section that you have entered into the Contents box. In other words, when information about a product or section is displayed on the Home page, this is where that information comes from. See Chapter 17 for more information
Contents format	The manner in which the product or section information is formatted; see Chapter 17.
Columns	The number of columns of information shown on the page.
Intro-text	Another block of text you can place onto the Home page; by default it’s not used, but you can add it using the Page-elements control. You can also use HTML in this box. (See the “Using HTML in the Message and Other Text Fields” section that follows.)

Message and Other Text Fields Using HTML, Transmission and Other Text Fields Using HTML

You can insert HTML text into several fields on the Store Editor’s Edit pages.

You can insert HTML into the Message and Intro-text sections on the Home page’s Edit page.

Because it gives you access to numerous things, this is crucial. You can do anything that can be done with HTML; you are not restricted to just having plain old text on your pages.

Note:

HTML means HyperText Markup Language, the coding used to create web pages. Select View | View Source in your browser, and you’ll see the code used to build the current web page. For instance, enclosing text and making it bold. If you know HTML, you can use it to format text, create tables, insert images, and more in the Caption and Abstract fields

Using HTML, You Could Do The Following:

Drop an image into the page by pulling it from another website. For instance, the following tag drops a picture into the page by removing it from another website or from a particular directory you create in your store, in this case from images.yourdomain.com/ littlepicture.jpg:

Note:

When you press ENTER after typing text into a text box that allows HTML, Merchant Solutions automatically enters a tag, the line-break title.

 You can format text in many ways: bold, italic, underlined, different colors, different fonts, different sizes, and so on.

•   You can format paragraphs in any way: left, right, justified, and so on. 
•  You can create tables. 
•  You can insert Flash animation files. 
• You can create bulleted or numbered lists.

You can place anything you can do with HTML into your text boxes and, therefore, display it on your pages

 

Tips:

How about products? If you import your products, how do you handle HTML fieldsDropop the HTML is straight into the appropriate fields in your database or spreadsheet. You can use HTML in the Caption and Abstract fields when creating product data files.

 The content area of the Home page has a variety of elements or components that you can choose to position or omit from the page—the Contents and Intro-text fields from the Edit page, the Final-text field from the Variables page, the store’s Name field from the Variables page, and so on. These are modified—added to the page, removed from the page, or shuffled around on the 

Note:

Unfortunately, sometimes these elements “stick.” You add a piece or move one, and nothing seems to change when you return to Store Editor. If you’re sure you did what you were supposed to and the desired action was not carried out, try reloading the web page. Failing that, try exiting Store Editor (click Manager on the Editor toolbar on the Home page), then log out and log back in

Making a Product or Section a “Special”

 Unique is a product or section displayed on the Home page—it’s’ “specially featured” on your site’s front page. Creating a special is simple. Navigate to the product page and click the Special button on the Editor toolbar. Store Editor jumps you to the Home page and shows you how the special will appear.

Tip:

To remove a special, navigate to the product or section page and click the Not Special button on the Editor toolbar

Element	Purpose
Address	The text from the Address field in the Variables page (see Chapter 17).
Buttons	Defines where the navigation buttons sit on the page, but this setting probably only has an effect if you have created a horizontal navbar (by selecting Top-buttons in the Page-format drop-down list box in the Variables page)—some witnesses claim it sometimes works even with the vertical navbar! Generally speaking the setting is ignored because when you first open Store Editor it has a left-side navbar. We recommend that you leave this element listed in the table and use the Buttons line in the Edit page to control the buttons.
Contents	A list of links pointing to all the products in your store
Final-text	The text from the Final-text field in the Variables page
Image	The image uploaded through the Image field of the Home page’s Edit page.
Intro-text	The text from the Intro-text field on the Home page’s Edit page.
Message	The text from the Message field of the Home page’s Edit page.
Name	The store’s name, from the Title field in the Variables page, or the Name-image, also defined in the Variables page.
Search	Places a search box onto the page, which visitors can use to search your site
Specials	Defines where product “specials” will be placed. You will learn about setting a product as a “special” next.

 

 

Tip:

There’s another way to enter a special. Go to the Home page and click the Edit button on the Editor toolbar. Then type the ID of the product or section you want to feature as a special into the Specials text box, and click Update.

Several settings affect specials: 

 Label-color, Label-font, and Label-font-size Click Variables on the Editor toolbar to find these settings.

They modify the color, the typeface, and the font size of the Label text. The Label text (a product field) is only used if the Home page’s Edit page has the Specials-format drop-down set to As-thumbnails.

Specials-format Navigate to the Home page, then click the Editor toolbar’s Edit button to find this setting.

You can select As-contents (the special is laid out on the page according to the Contents-elements, Contents-format, and Columns settings in the Home page’s Edit page) or As-thumbnails (the product’s icon image, label, and price are shown).

Note:

Sometimes specials may be shown as a little block, probably a blank red square. This is perhaps because you have too much text in the product’s Label field (set in the product’s Edit page or the product import file). Keep the Label field short

Creating and Editing Section Pages

You should now have at least one product in your product database and possibly many more. It’s now time to start designing your store pages. We’ll begin by either editing an existing section page or creating a new one.

Note:

What is a section? Merchant Solutions refers to cells, but it may be helpful to consider a section as a category.

Links to product pages can be found on section (category) pages.

 Baking, for instance, maybe a section page in a cookbook store that links to books about baking. A product page appears when a customer clicks on one of these links.

As you already know, you can create section pages when you import your product data, which is often the best option if you have more than a few products. Assign each product to a section (a category). Merchant Solutions will automatically create a page for each team you make when you import the data file and “publish” your data. Then, in Store Editor, you can modify the section pages created Automatically when you import your products.

1. Click the Store Editor link in Store Manager. You are now on the store’s home page.
2. Look at the left side of the page, where several buttons may be found. There should be a button for each newly formed section. Click the Edit button on the Editor toolbar after loading a quote using one of the section buttons you defined. Alternatively, click the Section button while still on the Home page to add a new section.

 

Field	Description
Name	The section name. If the section is a first-level section—if it’s added to the Home page—then this Name also appears on a button on the navigation bar. (These are known as the Contents buttons; see Chapter 17.) If a subsection of another section page, the name appears on the parent section page. The name is also displayed at the top of the section page, unless you’ve added a Headline (see below). The Name should be kept fairly short.
Image	You can place an image at the top of the page, if you wish. Click the Upload button to select it. This image size is controlled by the Item-height and Item-width settings in the Variables page
Headline	The heading appears at the top of the section page if no name has been added. As with the name, it should be kept relatively short.
Caption	This is the full section description; it appears near the top of the page, under the name or headline. You can make this as long as you want, and you may include HTML tags to modify the text.
ntents	This box lists the contents of the section page—it can contain product IDs and section names (if you have placed subsections into this section). If you imported products from a data file and used the path field, the Contents box contains a list of the products that have been assigned to this section, each separated by a space. You can change product and section positions on the page by moving them around in the Contents list. See Chapters 16 and 17 for information on managing page contents.
Abstract	The Abstract text is used in place of Caption text on pages other than the section page, so typically it’s a shorter block of text (although actually you can enter as much as you wish). For instance, if you set the section as a special, the Abstract text is used on the Home page (if Specials-format, on the Home page’s Edit page, is set to Ascontent, and Abstract is selected in the Home page’s Contents-elements list). You can also format Abstract text using HTML tags
Icon	This image is used on pages other than the section page. For instance, if you set the section as a special (see “Making a Product or Section a ‘Special’” earlier in this chapter), the icon will appear on the Home page, or if this is a subsection of another—parent—section, the icon will appear on the parent-section page. In addition, if this is a first-level section—one below the Home page and not a subsection of another section—and if you set Button-style to Icon in the Variables page, the Icon image will be used as a navbar button. The Icon image size is controlled by the Thumb-width and Thumb-height settings in the Variables page.
Inset	This image appears as a smaller image, next to the main Image, on the section page. This image size is controlled by the Inset-width and Inset-height settings in the Variables page.
Label	The Label text does not appear on the section page itself. Rather, it is used on the Home page when the section has been set as a “special”, and on parent section pages if the section is a subsection. Furthermore, in the case of a special, the Label text is only used if the Specials-format setting is set to As-thumbnails on the Home page’s Edit page. This text should be kept short, as it is displayed in the form of a one-line image.
Leaf	You can ignore this for now. It’s an advanced feature that defines which settings apply to the page. See Chapter 16 for more information.
Product-url	This is the address of the page on which the product will sit in your store. It’s required if you are submitting products to the Yahoo! Product Submit marketing program (see Chapter 21)

Working with Images and HTML

Three photos can be provided when entering a product by hand, but you have very little control over how they will be displayed. On the product page, two of them—the Image and Inset images—will be visible. Only one embodiment (the Image field) may be defined for each of your imported products; additional photos must be imported separately.

There is another option; you are free to add as many product photos as you like to your product pages. 

You can add photographs to your pages by pulling them from a specific directory you create in your account.

 If you know how to use basic HTML, then follow these steps:

1. On the top right of the Site Manager screen, click the Manage My Services option.
2. Select the Web Hosting Control Panel link on the Manage My Services page.
3. On a tab near the top of the Web Hosting Control Panel, page 4.
4. Scroll down and click the File Manager link to open File Manager

 

5. Type images into the text box and click Create Subdirectory. 
6. The File Manager page appears again; click the link for new images.

 

 

7. The File Manager page appears again; click the new image link.

 

Tips:

If you know how to use an FTP (File Transfer Protocol) program and have a large number of files that you want to upload, you’ll probably want to use that. To find the FTP settings you need, click the Create & Update link on a tab near the top of the Web Hosting Control Panel, then scroll down the page to find the FTP Account Info line.

8. To access the Easy Upload page, click the Upload Files link in the top right corner of the page that loads.

You have now loaded the files you want to refer to into your hosting account. The next step is to point to a subdomain—such as images. your domain. com—to the new images directory.

 

Note:

Because we’re presuming that you’ve already linked your primary domain, yourdomain.com, and the www. domain, www.yourdomain.com, to your store, you’re going to create a subdomain with these instructions to point to your photos directory.

 Your store is placed in a different web server location. You won’t see the store when you view the contents of your hosting account:

1. Click the Manage My Services button at the top of the page to return to the Manage My Services page. 
2. Click the Domain Control Panel link. 
3. Click the Manage Domain & Subdomains link. 
4. Click the Add Subdomain button. 
5. Type images into the text box and then select images from the drop-down list box
6. Click the Submit button.

That’s it; you’ve’ uploaded images into a directory in your hosting area from which you can now pull images into your site. To refer to an idea, you would enter a URL like this: images.yourdomain.com/image name.

For instance, let’s say you have an image called bigpicture.jpg and your domain name is PureSauna.

You can test to see if everything’s set up by visiting the URL in the address bar in your browser and pressing ENTER. The image should load into the browser.

Once you have uploaded the images, here’s how to use them in your HTML:

1. Create your HTML in an HTML-editing tool such as Dreamweaver or Microsoft Frontpage. 2. Where you want to insert an image, use a tag like this: 
2. Enter this HTML into the product’s Caption field. 
3. Publish your product data as usual; when you open the product page in your browser, you should see the images created by the HTML that you placed into the Caption field.

Placing Other Products on a Section Page

We’re going to look at how to place a product on a section page, which is helpful in two circumstances: if you are not importing a data file through Category Manager or if you are importing a data file but want a product to appear in two or more section/category pages.

As you saw before, you can define which category (section) a product is placed into when you import data.

But what if you want the product to appear in multiple categories? Place the product into your database once for each class where you want the product to appear. If you want the product to appear in three types, make sure you have three entries in the database, with a different path for each. The problem with this method is that you’ll have to use other ID and Code fields because these are unique fields; 

Catalog Manager won’t allow you to import a data file with duplicated ID or Code fields. Still, this method may be the most efficient if you want to place many products into multiple sections. 

You can manually place a product into a section page.

The effect only appears once in the database, but a little instruction on the section page tells Merchant Solutions to identify the product.

Here’s how to manually place an existing product into a section/category page.

1. In-Store Editor, navigate to the section where you want to place the product. 
2. Click the Edit button on the Editor toolbar. 
3. Scroll down to the Contents field

Tips:

 

Don’t remember the code of the product you want to associate with? Click Contents on the Edit toolbar, copy the product code from the list or refer to your original import spreadsheet or da. database

1. Please type the product ID into the field in the position in which you want it to appear.
2. Click the Update button at the top or bottom of the page.

Here’s another way to do the same thing, using Copy and Paste:

1. Navigate to the page containing the product you want to associate with the section. 
2. Click the Copy button on the Editor toolbar. You’ll see the Clipboard bar under the Editor toolbar.

Tip

You can navigate to multiple pages, clicking Copy on each one to “collect” them in the Clipboard bar

3. Navigate to the section page into which you want to place the product
4. In the Clipboard bar, click the link. The copied product is automatically inserted into the current page by Merchant Solutions. (It has entered the product code into the Edit page Contents field of the existing product.)

Moving Products Between Sections

The product is then moved to the new page when you navigate to another page and click the link in the Clipboard.

 

You’ll see the product page you just cut on the Exiles page; it’s “exiled” because it no longer has a parent (if you’ll excuse the mixed metaphor); it’s no longer linked to any other page.

 

 

Click the page link and the Unexile button on the Editor toolbar.