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.
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.
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 hightlight color.
Use Insert/Edit Image to include an image in the page content or description.
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.
The Appearance tab includes settings for alignment, dimensions, spacing, border, custom styling, image title and description.
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.
Adding Video and Other Media
Use Insert Video to embed a video from:
Use Insert/Edit Embedded Media to embed additional media.
There are seven types of media that may be embedded, including:
- 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 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 together 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 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.
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.
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.
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.
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.
- Using the Image Manager
- Adding Web Pages
- Creating & Editing Banners
- Connecting to WebDAV
- Uploading and Linking to a File in Your Store
- Display Settings
- Flash (wikipedia)
- HTML5 audio and video (wikipedia)
- Quicktime movies (wikipedia)
- Shockwave applications (wikipedia)
- Windows Media files (wikipedia)
- Real Media files (wikipedia)