Journal v.3.2.0-rc.100

Last update: 14 June 2024

Opencart 4 Compatible

Opencart official releases supported only:,,,, DO NOT USE GitHub versions.

Journal 3.2 Installation Steps for Opencart 4 (click to view)
  1. Extract the archive you downloaded and locate the Opencart_4.x folder.
  2. Upload the 4 folders found inside (admin, catalog, image, system) to your Opencart root installation and merge them with the existing ones.
  3. Access your Opencart Admin and go to Extensions > Installer and click on the blue Upload button (top right corner) and then choose file located in the downloaded archive and then install it.
    Note: On MacOS systems, files cannot be uploaded because of Opencart installer, until Opencart fixes this, edit admin/view/template/marketplace/installer.twig and replace with .zip
  4. Go to Extensions > Extensions, choose Themes from the Choose the extension type selector and install the Journal Theme theme.
  5. Go to System > Settings, choose the store you want to use the theme on and then click the edit button. From the General tab, choose Journal Theme from the Theme selector.
  6. Import demo data, as usual: Demo Import
Journal 3.2 Update Steps for Opencart 4 (click to view)
  1. Extract the archive you downloaded and locate the Opencart_4.x folder.
  2. Upload the 4 folders found inside (admin, catalog, image, system) to your Opencart root installation and merge them with the existing ones.
  3. Extract archive and upload its content to extensions/journal_3 folder in Opencart root installation directory.

All Journal 3 demos work on Opencart 4 with some exceptions (the core system changes made by Opencart).

Journal 3.2 is the biggest update for Journal since Journal’s first launch. We have recoded the framework almost entirely for much better integration with the core Opencart system and added radically improved performance and usability features both in the admin and storefront.

Journal 3.2 is backward compatible with existing Journal 3 projects - it works with all existing demos as they are, however, the live demos have not yet been updated to 3.2. All demos will be updated to 3.2 once the beta run is over and from that point we will create a few more demos as well.

There will be some small resets with existing options that have been reworked and some 3rd party extensions may be affected and not work anymore with Journal. These extensions will need to be re-adapted to the new Journal 3.2 codebase.

Feedback can be sent via email to Please do not send any unrelated communication to this email address, only topics related to the new Journal 3.2 update.


New in RC.98 Introducing Color Schemes.

Color Schemes are a new variable type which makes use of the existing color variables (now named Color Tokens).

New demos will come with at least 4 pre-defined color schemes, but you can create more. Each scheme comes with a set of color utilities such as foreground and background shades, border, buttons, branding colors, etc.

Each color option in Journal is now given a color scheme utility color, for example a foreground element like text or icon would get the "Foreground Primary" or "Foreground Secondary" or "Foreground Tertiary", etc. while elements where a background color would be normally used would get the corresponding "Background Primary", "Background Secondary", etc.

With color schemes assigned throughout the admin, it's very easy to switch entire sections to a different scheme by simply choosing it from the Color Scheme selector. Color Scheme selector can be found in various places such as entire rows, columns, headers, menus, certain individual modules, etc. So if you want to make an entire row dark you would simply apply the corresponding Color Scheme to that row (provided individual color option use the new color scheme mechanism).
New in RC.98 Introducing Text Styles.

Text Styles are a new variable that makes use of the existing Font Family and Font Size variables. Setting up Text Styles streamlines the design process and keeps text more consistent.

Text styles can be applied wherever Font options are available, a new selector before the Font Family is now present. Text Style can be overridden in place by the Font Family and/or Font Size of any font option, while preserving other text options from the Text Style.

Major code changes and improvements

  1. Demo Variants. New demos in Journal 3.2 come with multiple variants to showcase the multi-purpose nature of each demo. Demo variants will use different images and branding colors with different categories and product niches.
  2. Major Recode for better overall performance and integration with core Opencart principles. Journal now uses the Opencart Events system. (This may affect past 3rd party extensions that might have been modified to work with previous Journal versions (3.1.8 or lower). Please consult with your extension developers in such cases).
  3. Core Web Vitals improvements (better pagespeed scores). This heavily depends on your store setup as well as various 3rd party extensions and your hosting plan performance.
  4. Web Accessibility improvements across the board.
  5. PHP 8 compatibility (for Opencart and later, previous Opencart versions don’t work with PHP 8 anyway).
  6. Google Fonts.  Added Display option and removed previous Async / Swap Fonts options.
  7. Icons Pack.  Removed all unused icons from the pack for a much smaller footprint. If you need extra icons, follow our documentation on how to add them to the pack.
  8. Stepper Mechanism. Added dedicated options in Journal > Skins > Edit > Stepper, including the option to display buttons on each side.

Major layout design features

  1. Auto Grid. A new auto-responsive repeater grid system that makes responsive design much easier and replaces the existing Items per Row mechanism. The feature appears wherever Items per Row options are available. (Items per Row still work as usual, but now it can be replaced with the new Auto Grid system). See documentation for more details.
  2. Auto Carousel. New and simple carousel mode for repeater grid modules. Works seamlessly with the new Auto Grid system. It is scroll-based and leverages browser scroll snapping for best possible performance. Allows natural clipping of the last item to clearly indicate there are additional items to be scrolled into view and also provides support for multi-row carousels. This replaces the old Carousel Mode mechanism that is part of the legacy Items per Row system. See documentation for more details.
  3. Journal Builder. Added a container-aware column stacking option in each row to auto-stack all columns within that row (make them 100% width) at a given custom row width (not screen width via breakpoint rules - so breakpoints aren't necessary if you just want to stack all columns at once at a given width). This can have profound implications in designing layouts much faster (and safer - preventing columns from getting too small on smaller screens if breakpoint rules aren't added). Also added a Columns Gap option to add spacing between columns. The new Gap option is auto-adaptive, meaning that the same gap value is used for horizontal and vertical spacing automatically. This improves upon the previous approach of adding column paddings on different sides on a per breakpoint basis.

Headers Improvements

  1. Mobile Header. Added custom breakpoint option in Journal > Skins > Edit > Header > Mobile Header At, at which to activate the entire mobile header for desktop or tablet type devices. (not applying to actual phones, mobile header is always rendered on phones). Additionally, a new option in the same place Mobile Header on Tablet allows for the mobile header to be rendered on tablet type devices regardless of the above Mobile Header At screen width rule (in cases where an actual tablet may have a wider screen than the activation rule).
  2. Sticky Header. Improved sticky header mechanism (across all headers) with option to include the entire header, the logo/search/cart area + menu, or menu only (as was before).
  3. Compact Header. Added option to an additional main menu in the main menu bar below the logo area (similar to the main menu bar from the Classic/Mega headers).

Admin System and Styles Improvements

  1. Bulk Delete. Added option to bulk select and delete in admin listing instances (Modules, Styles, Blog Posts, etc.). A checkbox is available in each instance with select-all option.
  2. Browser Alert. Added Notification style in skin for Contact Form and Newsletter modules notifications.
  3. Page Buttons Style. Improved style options and provided container-aware button stacking (when the parent container of dual buttons reaches a certain width, buttons will stack automatically without necessitating breakpoints).
  4. Form Style. Improved form label position mechanism to be consistent with the new container-aware system. Labels can be displayed on the side and automatically move to top position (relative to input) at a certain parent container width.
  5. Product Page Buttons. Improved display mechanism and added a new option for the fixed button to be shown only on scroll (not at all times). Also the new fixed buttons are displayed along the optional Bottom Menu (which was previously disabled on product pages with fixed buttons).
  6. Out of Stock Added option to exclude out of stock products from Related Products.
  7. Out of Stock Added opacity option for Add to Cart button when product is out of stock so the disabled button can be faded out.
  8. Out of Stock Added option to replace Add to Cart button text with Stock Status in Journal > System > System.
  9. Show In Stock Products. Added option to show products in stock first in Journal > System > System.

New Modules and Features

  1. New Image Module. Simple image module for quick use in builder columns where a single image might be needed (replaces the old approach of adding background images in empty columns).
  2. New Text Module. Simple text/code module for quick use in builder columns where such content might be needed.
  3. New FAQ Module. Dedicated FAQ module. (To replace the larger Blocks module used for such purpose).
  4. Catalog Module. Added option for custom menu item with custom image and custom sub-links.
  5. Product Tabs. Added Journal Builder as display option in each tab - can now add any layout modules inside product page tabs.
  6. Popup Module. Improved overall popup system and added auto height mechanism, removing the requirement of a height  for popups such as Login, Register, Quickview, Required Options, Layout Modules.

Blog New Features and improvements

  1. Added Blog comments Captcha
  2. Added Blog meta robots field
  3. Added Blog Comments admin notifications
  4. Added Blog Comments pagination
  5. Added Blog Comment submit alert style

Other Fixes and Improvements

  1. Fixed Selected item set to None for accordion displays, it is now possible to have all accordions closed in categories, manufacturers, products and blog posts modules
  2. Fixed an issue with split attribute values feature
  3. Fixed auto-update price reward points
  4. Fixed Quickview description Show Less button issue
  5. Fixed One Page Checkout guest checkout email already in use error
  6. Fixed admin re-login issue

Other small fixes and improvements throughout the entire framework, for a faster and better user experience.