Understand extensions

Extensions are pieces of code that you can configure to extend your environment.

Extensions can contain one or more of the following:

  • Widgets

    A widget provides a unit of UI functionality that can be deployed on one or more pages of your web store. Widgets are able to display content to visitors or execute specific functions. They provide custom HTML and/or JavaScript code and, optionally, several other types of auxiliary data for styling, localization, and component re-use.

  • Elements

    To provide more control over its constituent parts, widgets can be broken up into elements. Each element represents one part of the overall structure of the widget and they can be configured as drag-and-drop sub-components, allowing for finer control over their location in a page layout. For example, the Header widget contains the following elements: Cart Link, Language, Links, Login/registration, Logo, Rich Text and Search. An element can be defined as part of a specific widget or as a stand-alone element that may be used by multiple widgets.

  • Stacks

    Page layouts are made up of regions, into which widgets are placed. All widgets placed within a region take up the full widget of the region and are rendered vertically within the region, one after the other. Stacks allow you exercise further control over the placement of widgets within a given region, making it possible to create a stepped progression through the widgets contained in the region.

  • Payment Gateways

    Commerce provides support for a number of payment gateways as built-in integrations. In addition, you can use extensions to create custom integrations with other payment gateways. The integrations you create appear as options on the Payment Gateways tab of the Payment Processing page in the administrative console. See Configure Payment Processing for more information.

  • Site Settings

    Site settings allow you to define a set of global configuration parameters. These parameters are made available to page layout designers in the administration interface and all widgets have access to their settings. Site settings allow you to define a single setting that controls a feature across multiple widgets.

  • Application-level JavaScript modules

    Application-level JavaScript are loaded as part of the main module, before any endpoints have been fired and before any widgets have been loaded. As such, they can be referenced as a dependency in any widget, allowing you to build reusable modules that can be shared among widgets and elements.