Using the WYSIWYG Editor

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

WYSIWYG Editor

 

Storefront look different than the Editor? The WYSIWYG Editor does not take into account any CSS styling or scripts the Theme may apply. What you see in the editor is not always what you get on the storefront. To get it looking the way you want may require editing Stencil Theme Files or customizing legacy Blueprint Template Files.

Formatting Text

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.

User-added image

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

User-added image

Creating Links

To create a link, first select the piece of text or image to be linked, then click the appropriate link button.

Link

User-added image

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.

Tabs inside the Insert / Edit link popup window

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 popup 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 popup window by giving it a name
  • Size — dimensions of the popup window in pixels
  • Position — X and Y coordinates of where on the screen the top left corner of the popup window will open. Enter “c” for both values to automatically center the popup window.
  • Options — determine whether specific browser elements are a part of the popup window (e.g. location bar, status bar, scrollbars)

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

 

Be careful! The BigCommerce Technical Support team cannot troubleshoot issues related to custom scripting.

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

Store Link

User-added image

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

User-added image

Anchor

User-added image

The Insert/Edit Anchor button is used to jump to a specific location in 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.

User-added image

For example, the links under "What We'll Cover" at the top of this page each link to an anchor on this page.

Adding Images

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

User-added image

Choose an image from your hard drive by using the Browse or Choose File button next to Upload image.

Link to a remotely hosted image by entering its URL in Image URL.

Use Image from gallery to select an image that's been uploaded via the Image Manager.

 

What image file types are accepted? For images to work on the site, use JPG, GIF, or PNG images.

User-added image

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

User-added image

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.

User-added image

Adding Video and Other Media

Use Insert Video to embed a video from:

  • YouTube
  • Vimeo
  • Metacafe
  • Megavideo

User-added image

Use Insert/Edit Embedded Media to embed additional media.

User-added image

There are seven types of media that may be embedded, including:

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

User-added image

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.

Creating Tables

Use Insert/Edit Table to create an HTML table.

User-added image

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

User-added image

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

User-added image

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.

User-added image

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

User-added image

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

User-added image

Additional Options

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

User-added image

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

User-added image

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

User-added image

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

User-added image

 

Be careful! This function will only fix minor syntax errors; it is not a fix for major custom coding issues.

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

User-added image

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

User-added image

Web page content is not exportable in BigCommerce, so if you plan on moving your website, it's recommended that you back up your web pages' content by downloading their HTML source code to your local computer or device.

FAQ

  • Can I change the theme with WYSIWYG? No. The WYSIWYG editor only affects content added to a page. To adjust a theme's code or css, see Themes & Design Overview resources for editing a theme. 
  • 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/Cmd+Z will undo, Ctrl+Y/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 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.

Additional Resources

Was this article helpful?