A WYSIWYG Editor, is a tool that allows you to design your site without having to know HTML. It's an acronym for "What You See Is What You Get", meaning whatever you enter into the WYSIWYG should be pretty much what shows up on the site, with few exceptions. It has tools built in to insert images, links, change font size, etc., which are comparable to the tools you use for formatting in Microsoft Word.

Pinnacle Cart has a WYSIWYG built-in tool provided by TinyMCE. It can be used in Cart Designer, Product Descriptions, and Category Descriptions. Let's take a look at where and how it's used.

Note: The WYSIWYG in Cart Designer has a few more options than the one used on Product and Category descriptions. This includes the ability to change font size and style. For Products and Categories, font size and style should be controlled by CSS.

Applies to Version(s): 3.7.X - 3.8.0 Series

In this article, you will learn:

How to Access the WYSIWYG in Cart Designer

How to Access the WYSIWYG in Product and Category Descriptions


Font Formatting Tools

Paragraph Tools

Editing Tools

Images and Links


How to Access the WYSIWYG in Cart Designer

Note: Only three sections of your site can be edited via the WYSIWYG; the header, the footer, and the center home page section.

        1. First, access your admin area.

        2. Click Design > Cart Designer.

cart designer

        3. Again, the only three areas you can use the WYSIWYG on are header.html, footer.html, and home.html. You'll know whether you're editing one of those sections if you right-click and see an option for WYSIWYG Editor.


How to Access the WYSIWYG in Product and Category Descriptions

Click Products on the left menu > Products >. Then click an existing product to edit it the option to add a new product. In the Description section, you will see the WYSIWYG tools.


It works pretty much the same for Categories. Click Products > Categories > to edit or add an existing Category and you will see the WYSIWYG in the Category Description section.


Next, we'll look at each section of tools in the WYSIWYG and learn how each tool works.

Font Formatting Tools

boldBold - This will make any text that you highlight bold.

italicItalic - This will make any text that you highlight italic.

underlineUnderline - This will  underline any text you highlight.

strikethroughStrikethrough - This will strikethrough any text that you highlight.

superscript and subscriptSuperscript and Subscript - A Superscriptexample will add a character to the top left of another character. Subscriptexample will add it to the bottom right. To use this correctly, type the super or subscript next to the previous word without space. Highlight the super or sub and click one of those two options.

font sizeFont Sizes - This will allow you to change the text size of the highlighted text.

font colorFont Color - This will change the color of the font to a color of your choice for highlighted text.

font background colorFont Background Color - This will add a background color to highlighted text. This is good for permanent highlighting.

Paragraph Tools

Paragraph FormattingParagraph Formatting - These are your typical formatting options for paragraphs. You have options for left alignment, center alignment, right alignment and justify.

bulleted listBulleted List - This will allow you to create paragraph lists with different bullet types; Default, Circles with No Fill, Discs (same as Default), or Squares.

sample bulleted list

numbered listNumbered List - This will allow you to create lists with numbers, letters, roman numerals, etc.

sample numbered list

Increase and Decrease IndentIncrease and Decrease Indent - This will push the text to the right or left.

sample increase indent


sample decrease indent

Editing Tools

cut copy paste Editing Tools - These are your typical Cut, Copy, and Paste tools.

Images and Links

linkLink - This will create a link out of any text that you've highlighted. When clicked, it will pop up an Insert Link box. See the details of each below:

  • URL: You can insert an external link, for example http://www.google.com. Or, you can link to a file on your server. This would be a great way to link to things like PDF files. Just click the search icon, and use the Moxie Manager to navigate to the file to select it.
  • Text to Display: This is the text you've highlighted to link.
  • Title: This is a title tag, which is good for SEO so fill it in!
  • Target: If you choose New Window, the link will open in a new window. If None, then it won't.

remove linkRemove Link - This will disable links you've highlighted.

anchorAnchor - This will create a spot anywhere in your text which can be linked to. Once used, you can then use the link option above and a new field will appear for Anchors. You would link that text to an anchor you've created.

insert or edit imageInsert/Edit Image - This will allow you to add an image to the spot your cursor is located. You can learn a lot more about this here, Adding an Image to Your Site Using the WYSIWYG Editor.

insert or edit videoInsert/Edit Video - This will allow you to add or edit video, similar to images above. Just follow the same directions when adding videos.



horizontal lineHorizontal Line - This will add a dark bold line to separate your text. Just place your cursor where you'd like the separation and click the button.

horizontal line sample

source codeSource Code - This will open up the HTML editor directly. This is great for designers that want the WYSIWYG to do most of the work, but need to be able to tweak HTML for detailed customizations. This would also be what you'd use to add HTML or Embed code from other sources.

clear formattingClear Formatting - This will clear all changes you've made with the WYSIWYG Editor.
Note: Clear Formatting will also clear out any formatting that may have been copied into your WYSIWYG from other sources, such as Microsoft Word.

Links to Related Articles

Adding an Image to Your Site Using the WYSIWYG Editor

If your question wasn't answered, please contact the Pinnacle Cart Support Team. To submit a ticket, go to the My Account drop-down menu at the top right of the admin area and select Support.