Enhance Text Using HTML

Introduction

After you have added or modified the default text, you may still want to add additional text, table, and links. These can be added into the messages, headers and footers, and other text boxes that also accept HTML.

Paragraphs

When this store was first created, in the Look & Feel Configuration Wizard, we added as image and text to the Welcome Message. After adding products and categories to a store, you can also use the Look & Feel Configuration Wizard to add products or categories to your store front in table columns. But, here we are focusing on the text. For information on adding graphics, see the customizing guide “Change and Add Images” and the Miva Merchant User Guide “Change the Look & Feel of Your Store, Using the Look & Feel Configuration Wizard.”

This initial Welcome Message includes only an image and text. This text has only a limited amount of HTML – only a few line breaks and the mail tag. But, nothing in the text really stands out. Let's add some HTML to change the font weight and size, add some bullets, and perhaps change the color.

Font Properties

Font Weight and Style

The first paragraph now stands out with the bold text, (the tag). Compare it to the previous page.

Italics and underline text should be minimized. Italics is a bit difficult to read online. Underline text has traditionally been used to identify a link. Instead use colors, bold, and/or increase the font size. You could also use the format to call attention to items, such as a bulleted list.

Font Face

Non-serif fonts (those without the little tails) seem easier to read online. Therefore, we've changed the font face of the Welcome message, using the in-line HTML tag . We used three font names to be sure to include fonts of all platforms.

Bullet List

The bulleted list provide directions for the shoppers. Notice the Email is also included here. The HTML is the standard unnumbered list.

Changing Font Properties

Miva Merchant allows you to enter the HTML code in text boxes to format your data.

We've formatted this text using alignment, font attributes and properties, and paragraph elements.

The image was added earlier by the Look & Feel Configuration Wizard. Adding graphics with HTML is discussed in a separate guide.

To modify text:

1. In the Administrative Interface, click your store name, then click the Messages link.
2. Enter the text (paste or type) into the Store Front Welcome text box.
3. Identify the phrases you want in larger text size. (You can use the or the <H2>, for example.
4. Identify those you want centered <center>.
5. Click Update.

Complete HTML Text

</blockquote>

<H2>

Welcome to Our Shoppe!</H2>

We have rare office & writing tools and other office items. New, old, some are 1 or 2 of a kind. From porcelain Limoges inkwells to silver Montblanc pens, we provide a quality selection of products for you.

<UL>

<LI>Categories and Sign-In links are on the left.

<LI> To view all products, click "Product List" in the top menu bar.

<LI>Contact us at <a

href="mailto:someone@somewhere.com">someone@somewhere</a>
to locate that unique item you've been looking for. </UL>

Thanks for visiting!

Tables

The store image below contains two tables in the Welcome Message. The first contains only three cells: text in the first, an image (new Write Shoppe logo) in the second, and text in the third cell. No background color is used in this table. Using tables helps align your data.

The second table in our store uses an image for the background. Here, we've used a leather look, which provides some texture to the page. We used different colors for two of the table cells. Using the HTML table tag <TD bgcolor="#FFFFC0">. Why? It helps to highlight each of the ideas.

Also notice the use of font colors , for example. We've also defined the size, and face.

Entering A Table in Welcome Message

It's often a good idea to create an HTML file you can view in a browser or two, before copying the HTML (minus the body/head tags) into the Store Front Welcome Message text box.

To insert a table

1. Create a separate HTML text file. Edit it until it looks the way you want.
2. In the Administrative Interface, click your store name, then click the Messages
  
  link.
3. Copy all but the HTML, HEAD, and BODY tags from your separate HTML file and paste it into the Store Front Welcome message text box.
4. Click Update.

Complete HTML Text for Entering A Table in Welcome Message

<TR>

You found it! The Write Shoppe offers rare writing tools.</TD>

<TD valign=top><IMG SRC="graphics/en-US/00000005/

WriteShoppe5.gif"> </TD>

E-mail:

<a href=”mailto:WriteShop@place.com”>WriteShop@place.com</a> (We'll find what you're looking for.) </TD>

</TR>

</TABLE>

<TABLE align=center cellpadding="8" cellspacing="8" background="graphics/en-US/00000005/leather-greenish.jpg">

<TR>

Featured Products

of the Month:

</TD>

<TD>

<LI>Victorian Brass Inkwells

<LI>Woodpens from Brazil

<LI>Bakelite Letter Openers

</TD>

</TR>

<TR>

Have you forgotten:

</TD>

<TD>

<LI>Her Promotion?

<LI>His Birthday?

<LI>Work Anniversary?

</TD>

</TR>

</TABLE>

A Table in the Category Footer

This top-level category does not contain products, only other categories, therefore its page is empty by default. In this case, we used the category's footer to include information about the origin of our products. It's in the footer so that the Category Title, Desk Top Items, displays above the table. (Category headers display above the Category Title.)

Entering a Table in Category Footer

Similar to entering data into the Store Front Welcome message, you may want to try out the data in a separate HTML file, first. Paste it (without the <body> and <HTML> tags, into the Category Footer.

To insert the table:

1. In the Administration Interface menu, under the name of your store, click the name of the desired category. (Click the down arrows to expand the category, if needed.)
2. Click the Headers & Footers link.
3. Paste the HTML text (without the <body> and <HTML> tags, or type your table directly into the Category Footer.
4. Click Update.

Table Above a Store Front Image

The following store image contains one table entered in the Store Front Welcome message. Notice that you can see the background image (the marble) behind the Write Shoppe image. This is because the Write Shoppe graphic is a gif format with a transparent background, and no background color was defined for the cell containing the image. The other cells of the table include a background color (TD bgcolor="#C6CCC0">, otherwise the text would not be readable on the marble background, which brings into question whether or not it is a good design decision to use such a background. (See the Web Design links in the Internet Resources guide.) Notice the choice of images for the categories. The wrought iron scroll works well with marble.

Entering A Table Above Store Background Image

Create an HTML file you can view in a browser or two, before copying the HTML (minus the body and html tags) into the Store Front Welcome Message text box.

It's a good idea to see how it looks in a couple browsers, and if possible, in different operating systems. (Different browsers, and environments can affect how the pages look.)

After you paste the data into the text box, it may not look exactly as it did when it stands on its own. This is due to the other elements that are part of your store.

To insert a table

1. 1. Create a separate HTML text file.
  2. In the Administrative Interface, click your store name.
  3. Click the Messages link (as shown in the image here).
  4. When the HTML file appears as you want, copy all but the HTML, HEAD, and BODY tags and paste it into the Store Front Welcome message text box.
  5. Click the Update button at the bottom of the data page.

Complete HTML Text for One Table above Store Background Image HTML

<TR>

<TD width=180 valign=middle bgcolor="#C6CCC0">You found it! The Write Shoppe offers those rare writing tools you've been hunting for.

</TD>

</TD>

</TR>

<TR>

</TD>

</TR>

<TR>

Featured Products This Month:

<LI>Victorian Brass Inkwells <LI>Woodpens from Brazil <LI>Bakelite Letter Openers <LI>Egyptian Bookends <LI>Bankers Lamp

</TD>

<TD width=180 align=center valign=top bgcolor="#C6CCC0">
Please Note: 
If you don't find what you need, just contact us. Enjoy browsing through our unique writing store!

</TD>

<TD valign=top bgcolor="#C6CCC0">Have you forgotten:

<LI>Her Promotion? <LI>His Birthday? <LI>Your Anniversary?

</TD>

</TR>

</TABLE>

One-celled Table In Category Footer

This table uses the same gray color as the table on the store front page and the Category Tree background, so as to not add more variety, with an already somewhat busy background image. Identifying the table background color makes the text readable. which it would not be above this marble background.

Entering One-Celled Table

We entered the table in the Category footer so the Category Title, which is checked on, (see the side image) displays above the table.

To insert the table:

In the administrative interface menu, under the name of your store, click the name of the desired category. (Click the down arrows to expand the category, if needed.)
Paste the HTML text (without the <body> and <HTML> tags, or type your table directly into the Category Footer.
Click the Update button at the bottom of the page.

Complete HTML Text for a One-celled Table

<TR>

A variety of items to decorate your writing desk or use them to help you with your writing projects.

Inkwells have been used to store ink for nib pens for hundreds of years. These are beautiful enough to decorate your desk.

Letter Openers can help you open your mail more readily.

Of course, you need pens and pencils with which to write as in days gone by!

</blockquote>

All of these special items will inspire you to write better and often!

</TD>

</TR>

</Table>

Bulleted Lists

HTML also provides a way for you to create bulleted lists, which, in this case, are included in our second table, as shown in the following store image.

(The link below will take you back several pages, showing a table entered into the Administration Interface messages.

Links to Products from Store Front

This store front looks very much like the previous one. However, we have added links. Notice the “Contact Us” is now a mailto link, and the “Featured Products of the Month “and “Have you Forgotten” items are linked to specific products.

The “Have You Forgotten” links could also go to hidden categories. (Products can be assigned to more than one category.) See the customizing guide “Change Store Layout” about hidden categories.

Adding A New Product Link

Again, you may want to create your table in a separate HTML file. However, you may not be able to test the store links (links to your store's products) until you paste it into the text box, or put it in your Merchant2 script directory.

In the Administrative Interface menu, click your store name, then click the Messages link.
Enter the mailto: tag for your store, in the format <a href=”mailto:name@place.com”>Contact</a>.
Get the address for the product you want to link to:

In your Administration Interface, go to the product page to which you want to create a link. In the top, right corner, click the link button, then copy the Product Display URL.

Note: Usually a link in your store to an item in your store can be a relative link. (Starting with “merchant.mv?” as shown in the Complete HTML text on following page.) Relative links will not work for cgi style stores, and if the link is outside the store.

Enter the product address you copied as the destination for the HTML <a href> tag.
Click Update.
Test your link.

Complete HTML Text for a Product List

<TR>

<TD valign=top width=140> You found it! The Write Shoppe offers those rare writing tools you've been hunting for.

</TD>

<TD valign=top><IMG SRC="graphics/en-US/00000005/

WriteShoppe5.gif"> </TD>

<TD valign=top>
<a href="mailto:name@place.com">Contact Us:</a> Let us know what you need. Enjoy Browsing!</TD>

</TR>

</TABLE>

<TR>

Featured Products of the Month:

</TD>

<TD>

<LI><a

href="merchant.mv?&Screen=PROD&Store_Code=6&Product_Code=VBI&Categ ory_Code=IW">Victorian Brass Inkwells</a>

<LI><a

href="merchant.mv?&Screen=PROD&Store_Code=6&Product_Code=WP&Catego ry_Code=PAP">Woodpens from Brazil</a>

<LI><a

href="merchant.mv?&Screen=PROD&Store_Code=6&Product_Code=ELO&Categ ory_Code=LO">Bakelite Letter Openers</a>

</TD>

</TR>

<TR>

Have you forgotten:

</TD>

<TD>

<LI><a

href="merchant.mv?Screen=PROD&Store_Code=6&Product_Code=NPB1">Her Promotion?</a>

<LI><a

href="merchant.mv?Screen=PROD&Store_Code=6&Product_Code=Clk1">His Birthday?</a>

<LI><a

href="merchant.mv?Screen=PROD&Store_Code=6&Product_Code=MP&Categor y_Code=PAP">Work Anniversary?</a>

</TD>

</TR>

</TABLE>

Thank you for visiting The Write Shoppe.

</CENTER>

Enhance Text Using HTML

Introduction

Paragraphs

Font Properties

Font Weight and Style

Font size

Font Face

Bullet List

Changing Font Properties

Tables

Entering A Table in Welcome Message

A Table in the Category Footer

Entering a Table in Category Footer

Table Above a Store Front Image

Entering A Table Above Store Background Image

One-celled Table In Category Footer

Entering One-Celled Table

Bulleted Lists

Links to Products from Store Front

Adding A New Product Link