Creating Widget Areas


Widgets are an integral part of the Spark Pay online store system, and it is simple to specify an area you can put widgets on a page.

NOTE: This guide is for individuals experienced with HTML. You will need to understand how HTML renders a page to put a Widget Area into the correct spot.

To create a new widget area, you will want to get to the HTML editor of the page you'd like to add widgets to. We will use the content page as an example (Themes > Edit Themes > Content Page (base) > HTML Editor).

To create a new widget area, simply place this in the HTML:

<ac:widgetarea id="nameOfWidgetArea">


Note: You can name the widget area by replacing the "nameOfWidgetArea" text after the id. Alphanumeric only characters, as spaces or special character will cause issues with the layout.

After adding in the above code and saving, you can then go to your widget page. Notice how you have a new widget area!

And that's it! Pending on where you put the widget area is where the section will display on the page. You can feel free to wrap bootstrap classes around these sections. This is done so that the widgets will only come in at a certain size.

Have more questions? Submit a request