Using the WYSIWYG Editor

The WYSIWYG (What You See Is What You Get) editor is used to add content to web pages, banners, and categories. It is used to add or edit your store's content without touching code. It will not edit theme files or change theme styling.

The text formatting options available in the WYSIWYG editor are similar to common word processing programs. They can apply basic text decoration, style, font, size, and alignment.

Additionally, there are buttons for bulleted lists, numbered lists, indent, outdent, text color, and highlight color.

To create a link, select the piece of text or image to be linked, then click the appropriate link button. There are three types of links that you can create:

• a link to an external URL
• a link to an existing product, category, brand, or web page in your store
• a link to a specific location on the same page

Link

Use the Insert/Edit Link button to link to a URL that is not part of your BigCommerce domain, or to an anchor on the same page. The Unlink button will remove links from an already linked piece of text or image.

The General tab allows you to define general properties:

• Link URL — web address to link to
• Target — determines if the link opens in the current window/tab, or opens in a new one
• Title — text to display when someone hovers their cursor over the link
• Class — apply a custom CSS style

The Popup tab allows you to create a pop-up window:

• JavaScript Popup — determines if the Popup URL will open in a new independent window. If unchecked, the Popup URL will open in a new standard window or tab.
• Popup URL — the web address to pop open when clicked
• Window Name — repurpose an existing pop-up window by giving it a name
• Size — dimensions of the pop-up window in pixels
• Position — X and Y coordinates of where on the screen the top left corner of the pop-up window will open. Enter c for both values to automatically center the pop-up window.
• Options — determine whether specific browser elements are a part of the pop-up window, such as the location bar, status bar, or scroll bars

The Events tab allows you to execute JavaScript based on specific user behavior.

The Advanced tab allows you to define a custom ID, style, and class for a link. It also has some lesser-used fields for determining aspects of a link like language and encoding type.

Store Link

Link to store is used to link to an existing product, category, brand, or web page in your store.

Anchor

The Insert/Edit Anchor button is used to jump to a specific location on the same page. Use this button to name the anchor, then create a link with the Insert/Edit Link button. Instead of specifying a Link URL, select your newly created anchor from the dropdown.

Use Insert/Edit Image to include an image in the page content or description.

The General tab presents several options for selecting an image:

• Upload image — hoose an image from your hard drive by using the Browse or Choose File button
• Image URL — link to a remotely hosted image by entering its URL
• Image from gallery — select an image that has been uploaded via the Image Manager

The Appearance tab includes settings for alignment, dimensions, spacing, border, custom styling, image description, and title.

The Advanced tab has options for swapping the image for another based on mouse behavior, and includes miscellaneous options for setting a custom image ID, designating language settings, utilizing an image map, and including a long description link.

Use Insert Video to embed a video from:

• YouTube
• Vimeo
• Metacafe

Use Insert/Edit Embedded Media to embed additional media.

Seven types of media may be embedded, including:

• Flash
• HTML5 audio and video
• QuickTime movies
• Shockwave applications
• Windows Media files
• Real Media files
• another website via an iframe

The Advanced tab contains additional options specific to each media type.

The Source tab will display the code used to embed the element. Use it to paste in embed code from a third party, or manipulate code created by the editor.

Use Insert/Edit Table to create an HTML table.

The General tab contains basic settings for the number of columns and rows, size, alignment, border thickness, and cell padding and spacing.

The Advanced tab contains additional settings for the background and border color, language direction, and custom styling.

When an existing table is selected, additional table-specific buttons are available.

The Table Row Properties and Table Cell Properties buttons apply settings specific to individual rows or cells, respectively.

There are buttons to Insert and Delete specific Rows and Columns.

Combine cells or break up combined cells using the Split and Merge Table Cells buttons.

The Undo and Redo buttons work similar to other programs, allowing you to undo the previous action, or redo it when applicable.

Toggle Full Screen Mode will expand the editor to fill the browser window.

In addition to standard Cut, Copy, and Paste buttons, the editor includes several advanced options. Paste as Plain Text will paste copied content without formatting, and Paste from Word will preserve formatting when content is copied from Microsoft Word.

Clean Up Messy Code will attempt to clean up minor code problems such as missing opening and closing tags in HTML code copied into the editor.

Insert Page Break for Printing will insert a forced page break when necessary.

Edit HTML Source allows direct access to the content's HTML to add, edit, or remove code. You'll want to use this button to paste in or write any custom code. If the editor is used, it will attempt to format it as content, which will likely break the code.

What image file types does the WYSIWYG accept?

For images to work on the site, use JPG, GIF, or PNG images.

Can I change the theme with WYSIWYG?

No, he WYSIWYG editor only affects content added to a page. To adjust a theme's code or CSS, see Stencil Themes for resources on editing a theme.

Will the CSS in a theme override changes made in the WYSIWYG editor?

Themes will prioritize changes made in the WYSIWYG editor. For example, if you change the color of some of the text or links, the theme will respect that color instead of forcing its link colors. If a color is not specified, it will default to the theme's settings for those colors.

Are there any keyboard shortcuts?

Press Shift Enter when typing to insert a line break and continue typing on the immediate next line (single-spaced). Pressing Enter at the end of a line creates a new paragraph. Ctrl Z or Cmd Z will undo, Ctrl Y or Cmd Y will redo a step. The keyboard shortcuts for copy, cut, and paste will also work.

How do I add an email link?

When creating a link to an email address, include mailto:name@domain.com in Link URL. Replace name@domain.com with the email address you want to link to.

Can other media be added to a page?

Media files can be uploaded and added via HTML. Follow the instructions on Uploading and Linking to a File in Your Store.

Is there an easy way to adjust table size?

It's possible to change the size of an existing table by selecting it, then dragging one of its edges.

Is it possible to create a page with HTML?

Yes, you can build all the content of a page with the Edit HTML Source button.

Is web page content exportable?

No. Web page content is not exportable in BigCommerce. If you plan on moving your website, back up your web pages' content by downloading their HTML source code to your local computer or device, or use a backup-and-restore app like Rewind to back up your web pages, products (with descriptions), and categories.

Can I disable the WYSIWYG editor?

Yes. Go to Settings › General and click the Display tab. Scroll down to Control Panel, where you can enable or disable the WYSIWYG editor throughout the control panel.