Overview of working with modules

In this second series of Getting Started guides, you’ll learn how to use the Module Manager to add new features to your online business. In the previous Getting Started series, you learned how to set up a site, upload the dependent files, create and apply templates and themes, and update site content. This series builds upon that foundation and shows how to integrate new functionality to make your online business more powerful.

After completing this series, you’ll know how to:

  • Work with the Module Manager
  • Set up a blog and post blog entries
  • Publish announcements
  • Build and classify FAQ items to answer common questions
  • Create image galleries
  • Add digital media
  • Insert custom web forms
  • Create a reservation system to book upcoming events

In this section, you’ll learn how to use the Admin Console and access the Module Manager. This powerful panel contains many pre-built features that you can enable and configure without any programming. Using the Admin Console, you’ll be able to choose the desired settings to facilitate better communication with your site visitors and make your online business more interactive.

Working with the Module Manager

The Module Manager allows you to customize and insert modules into web pages, templates and layouts. You can use two different methods to access the Module Manager. Click the blue icon in the editor toolbar:  

Or click the Module Manager button located in the right column of the Admin Console:

Regardless of how you access the Module Manager, it appears in a new frame on the right side of the page:

Using the panel shown above, you can select the module you want to insert. The interface updates contextually to display the options that you can set for a specific module:

When you use the interface to insert a module, the framework is actually inserting a tag, like this:

{module_webform,12342}

or a snippet of HTML code.

When you publish the page that has a module inserted, the browser uses the tags and code to generate the desired feature.
To insert most modules, place your cursor in the desired location on a web page, use the Module Manager to select the module you wish to insert and then click the Insert button.

Inserting an individual product into a web page

If you want to display a single product from your online store on a page, follow these steps:

To insert an individual product into a page, choose Website > Web Pages and select the desired page. Open the Module Manager, select the desired product from the list and choose the option to insert the product into the web page.


Next, choose Catalogs > Product. In this section, select the catalog that corresponds to the product in the Select Catalog for Product List menu. Then, select the product you just inserted from the Select Product menu. Click Insert and the product is inserted into the page using the small product layout (also known as the featured layout). This allows you to display a featured item in an area outside the full catalog of products.

Formatting modules

Nearly every module is displayed on the page according to a customizable layout. Layouts allow you to modify the HTML code and use CSS to apply formatting. You can also control precisely which information is displayed by modifying data tags. These tags specify the desired data to pull from the database; the tags themselves are replaced with the corresponding information when the browser renders the module on the web page. To access the layouts and make changes, choose Admin > More Customization Options.

Styling modules

Modules have built in classes that allow their appearance to be controlled with CSS rules. All of the modules in the framework are linked to the module style sheet named ModuleStylesheets.css in the StyleSheets folder. You can edit the CSS to change the colors, formatting and positioning of elements to fit your site requirements.

By viewing the source code of the rendered modules, you can see which styles are used to set the appearance of each module. Use the Firefox browser to download the Firebug Add-on for the Firefox browser. This free online tool is very helpful, because you can view the live site and identify the specific rules you’d like to update. To learn more about working with Firebug, see the Firebug documentation.

Additional module customization with module attributes

Almost all of the modules and tags can be further customized using module attributes. To get more information about how to work with module attributes to customize a specific module, search for the name of the module on the Support home page. You can also browse through the full list of tags that are available for each module.

Maximum number of modules

You can insert up to 25 modules on a single web page. Each of your site pages can integrate a different set of modules, but do not exceed the maximum limit. Some modules can be inserted multiple times into the same page and other modules can only be inserted once.
For example, if you insert the Announcements module once on your web page to display all of your announcements, this counts as one module, even though the module displays a whole list of current announcements. A tag that looks similar to this {module_name} references each module that is inserted on a web page. You can view the source of any page to count the number of module tags and determine the current number of modules that are inserted.

Now that you’ve read the overview of what modules are and how to insert them, proceed to the next installment of this Getting Started series, to learn how to create a blog and start posting entries.