E-commerce app

The E-commerce app enables editors and marketers to view content retrieved from your external e-commerce solution. The content can then be used in e-commerce-dedicated components in the Pages app.

Viewing your e-commerce content

To view products from your external e-commerce solution in Magnolia:

  1. Open the E-commerce app.

    Search for apps or for content across all your apps using the Find Bar. Open an app directly from the Find Bar using the command open <app-name> app, for example, type open pages app.

  2. In the E-commerce tab, select the catalog containing the content you want to view. Your administrator is generally responsible for configuring the connection to your external e-commerce solution.

    The content displayed in the app is refreshed every 5 minutes by default so you always see an up-to-date list of what your external e-commerce solution contains. Your administrator can adjust the refresh frequency.

  3. Drill down into the catalog tree structure to select the category of products you want to view.


  4. Select the category you want and click View products.

    The selected category tab opens listing the subset of products.


  5. Select the product you want and click View detail.

    A new tab opens in the app with information about the product you selected.


Using your e-commerce content

The E-commerce add-on provides a basic page template definition and some sample component definitions to show how you can leverage your external e-commerce content in the Pages app. The samples are delivered as YAML files by the ecommerce-templating module. You can view or edit them under /ecommerce-templating/templates/components in the Resource Files app.

The following default components are provided and can be used as a basis to develop your own:

  • Category list – Lists all the categories in a given catalog.

  • Product detail – Shows detailed information for a specific product.

  • Product list – Lists all the products in a given catalog.

  • Product teaser – Shows a given product image with text.

For example, this page uses the Product detail component:


dev days event sign up
dev days event sign up