Adding the custom HTML/WYSIWIG widget is easy and can be done in both live design and the store's admin console.
1. Live Design
Just open live design on your site. Click the widget icon in the bottom right. Now click the "+" for the area you want to add the widget. Select the Html widget, save it, and your widget is ready to be edited. Once saved, you are able to drag the widget to other locations on the page.
Go to the page where the widget will go in the theme editor. themes > Active Theme (or any theme) > Any Page or page area (ie columns, header, footer) Click on the widgets link under the page name. Then drag the custom html widget to the widget areas to the right (I.e. top, bottom, other widgets on page). Wait for it to load and your widget is ready to be edited.