Videos and Webinars

How do I Use WYSIWYG?

Shift4Shop ExternalSite Design
How do I Use WYSIWYG?
Shift4Shop ExternalSite Design
Search

Use WYSIWYG

When editing content, it is important to learn how to use the WYSIWYG (what you see is what you get) editor. WYSIWYG mode allows you to edit, change, and add content to your web pages without having the knowledge of HTML. This guide will explain what each icon in the WYSIWYG toolbar allows you to do (from left to right).

Turning on WYSIWYG
WYSIWYG is turned off by default. To turn WYSIWYG on, log into your Shift4Shop Online Store Manager and look to the top right of the interface - where your username will be listed. Clicking on the username will bring about a special drop-down menu with a series of links contained in it. One of these links is labeled "Turn On WYSIWYG" and can be used to turn the function on for all applicable areas of your Shift4Shop Online Store Manager.

Where Do I find WYSIWYG?
The built-in WYSIWYG editor will be found in the following locations of your Online Store Manager:

  • Products >Product List

    • Product Information Tab - Extended Description

    • Product Information Tab - Extra Fields 6 through 10

  • Product >Categories

    • Category Details - Category Header & Footer

  • Marketing >Autoresponders

    • When creating individual Autoresponder emails

  • Marketing >Newsletters

    • When adding a newsletter

  • Content >Blog

    • When adding or editing an article, WYSIWYG is available for the Short Post and Post Content areas

  • Content >Site Content

    • When editing the content for an extra page or menu link page

  • Content >Header and Footer

    • Available for the global header, footer and left/right banners

  • Content >Titles & Content

    • WYSIWYG is available for each page's Header and Footer sections

  • Settings >General >Manufacturers

    • When adding a new manufacturer, WYSIWYG is available for the Manufacturer's page header

  • Settings >Design >Close Store

    • Available for the Message portion of your Closed Store page.

WYSIWYG Functions
The top of your WYSIWYG editor will be presented in the form of a toolbar (see image):

  • Full Screen: Allows you to edit in full screen view rather than just a section of your webpage.

  • Preview: You can Preview your current work for the webpage.

  • Search: Search for specific words and replace with another. Example: Search for every instance of the word 'hello,' and replace with the word 'greetings' automatically.

  • Paste: Insert data that has already been selected from either Cut or Copied from Word.

  • Undo: Undo your last action,

  • Redo: Redo your last action.

  • Foreground Color: Change the color of your selected text.

  • Background Color: Change the color of the background behind your selected text.

  • Hyperlink: Allows you to add a hyperlink to selected text.

    • To create a hyperlink:

      1. Highlight your text.

      2. Click the Hyperlink button.

      3. Type in the address you would like to link to in the Source field.

      4. Click Insert.

      5. Click OK.

      6. Click Save Changes at the bottom of the screen.

  • Insert Image: Insert an image into the page.

    • To insert an image:

      1. Click the insert image icon in the toolbar.

      2. Click on the folder icon in the Source field.

      3. Click Select next to the image you want to insert.

      4. If the image is not currently uploaded, click Upload files.

      5. Browse for the file you want and click Upload.

      6. Click Select next to your newly uploaded image.

  • Internal Link: Hyperlinks to another link within your webpage.

    • To add an Internal Link:

      1. Highlight the text you want to internal link to.

      2. Click the Internal link button.

      3. Click Select next to the area you want to link to.

  • Insert Table: Allows you to insert a table. You can specify the amount of rows and columns you need.

  • Edit Table/Cell: Edit the size/width of your table or cells.

  • Absolute: Allows you to position an image anywhere on the webpage. This can be tricky – for advanced users only.

  • Special Characters: Insert a symbol.

  • Line: Insert a line.

  • Remove formatting: Removes formatting on selected text.

  • View/Edit Source: View and edit the source code of your page.

  • Styles and Formatting: Choose different styles (font, size, etc.) and format for your text/paragraphs.

  • Paragraph: Choose different heading styles.

  • Font Name: Choose different font for your text.

  • Size: Choose the size of your text.

  • Bold: Make selected text Bold.

  • Italic: Make selected text italicized.

  • Underline: Underline selected text.

  • Justify Left: Have text or objects start on an alignment from the left of the page.

  • Justify Center: Have text or objects align in the center of the page.

  • Justify Right: Have text or objects start on an alignment from the right of the page.

  • Numbering: Insert a numbered list.

  • Bullets: Insert bullets.

  • Indent: Indent your text.

  • Outdent: Outdent your text.

WYSIWYG mode is available in many sections of the Shift4Shop Online Store Manager including:

  • Products

    • Extended Description

    • Extra Fields 6 through 13

  • Categories

    • Category Header & Footer

  • Autoresponders

    • When creating individual Autoresponder emails

  • Newsletters

    • When adding and drafting a newsletter

  • Manufacturers

    • When adding a new manufacturer, WYSIWYG is available for the Manufacturer's page header

  • Site Content

    • When editing the content for an extra page or menu link page

    • Available for the global header, footer and left/right banners

  • Store Status

    • Available for the Message portion of your Closed Store page.

  • Titles & Content

    • WYSIWYG is available for each page's Header and Footer sections (except Home Page)