Widgets: What are they, and how to use them

Follow

Note: Theme modification involves any change to the default values in the HTML or CSS of any theme or widget. Support can direct you to the correct page to make changes or to reset the widget, page HTML or CSS to its default value. This will undo any customization that may be in place. Before you create or modify a theme using HTML and CSS it is suggested to have a backup handy.

While theme modification is outside what support is allowed to assist with, if you need assistance with making modification to the theme, our implementation department is available to make these modification at an hour rate. If the service is ever needed please let us know and we will get that process started for you. Or check out our new Theme Store to find a theme that suits your needs.

NOTE: The term "widget" is only appicable to V1 themes. Please view our article V2 Themes FAQs for an overview of the new system.

widget and Widget are the same thing. In V1 Themes, we called them widgets, but from V2 and on, it's referred to as a Widget.

What are Widgets?

Widgets are pre-built sections of the page which perform specific functions. Examples are the Search Box, Browse by Category, Browse by Manufacturer, Side Column Shopping Cart, Sale Products, and even Custom HTML.

What is the real benefit of Widgets?

Widgets allow you to drop functionality in a modular way onto a site. This requires no HTML or programming knowledge. It provides a fast and easy way to add advanced features to your site with no help from a web designer or IT guy. If you're familiar with Wordpress, they are similar to Plugins.

This is useful for web developers comfortable with ASP.NET, and to store owners who need specific functionality on their site. It allows custom code that can interact with and run inside of Spark Pays' theme system with zero implementation effort. Just upload the control, add it to Available Controls, and then drop it on the home page or side columns. It is that simple!

Can I change the way these Widgets look?

Absolutely!  Widgets uses CSS Classes for styling. These are defined using the Colors, Fonts and Layout editor in the global CSS

But it doesn't stop there. You can go even further and customize a Widget on a per-instance level!  When adding a Widget to the Theme, you can choose to Override Default settings by going into that Widget's CSS Editor.

 

How do I add Widgets to the Theme?

You can add Widgets to most of the theme pages... if There's a widgets section on it, you can add them.

Navigate to the theme page you're wanting a widget, then select the Widget Menu

Widget Module Positioning

There are places on the widget page that lets you choose the location where you would like to put your widget.

widget.png

If multiple widgets are in the same spot (as in CategoryLeftTop) the widget higher on the list will come before the others.

Widget Width and Header

By clicking on the edit icon, you'll open the Widget settings. Here you can specify a width, header text or header image for this Widget. For example, if you are wanting Links on the left column but you do not want the header to say Links, add your new name in the Header Text field. 

Have more questions? Submit a request

Comments

  • Avatar
    Justin Murphy

    Do you still have the "Alignment icons," or a similar feature, that you reference under the Snap-In Module Positioning section?

    Thanks!

  • Avatar
    Lucas Lovett

    The Alignment icons is a feature that is available on page specific widgets, however its not a feature on theme level widgets.

    Instead, we have spaces that you can easily put widgets into on the page. 

    widget.png

    You can get to these by editing a themes page, and choosing widgets.

    widget2.png

  • Avatar
    Justin Murphy

    Another question:

    In the Widget Layout area--for example, in the Menu Bar widget--div classes such as "navbar navbar-default" or "navbar navbar-right" dictate whether the list items are left justified or right justified. Are these the only two options, or is there also a "-center" option, or other options beyond that as well?

    Thanks

  • Avatar
    Will Jiminez

    Justin,

    Great question. For all of the rev3 themes the menu bars are built using markup associated with the bootstrap framework.  The framework only has standard built in support for right and left aligned items. This mostly because there is no center aligned equivalent to "floating" the item left and right in css.

     You can read all about what is available in bootstrap based navbars in the official bootstrap documentation:

    http://getbootstrap.com/components/#navbar

    There is an experimental bootstrap setup for it that can be seen here:

    http://getbootstrap.com/examples/justified-nav/

     

     

  • Avatar
    Justin Murphy

    Thank you! That's very helpful. I've definitely been visiting the getboostrap site a lot lately for useful info on how Deja Vu works by default. I've noticed that much of the Javascript functionality that Bootstrap offers seems to also be what some widgets are based off of. It seems that Americommerce has simply turned that functionality into an easy-to-use interface for those who may not have Javascript fluency (like myself). Am I correct in saying this? If so, are there plans to implement other Javascript functionality, like the Scrollspy or Collapse into widgets?