Skip to main content

Workflow

This is a quick overview of a basic project setup. In most cases you would import a pre-designed demo and most of these options will already be enabled. See Demo Edit

In a Nutshell​

  1. Create Variables like individual color tokens, spacings, fonts, etc.
  2. Create Styles which are sets of options for Buttons, Title, Typography, etc.
  3. Create Skin where you assign global Styles and set other store-wide settings.
  4. Create Modules which are content blocks that display your information, Products, Sliders, Banners, Blog Posts, etc.
  5. Create Header & Footer to display menus and navigation.
  6. Create Layouts which are pages where you can add modules via the Page Builder interface.

Variables​

Create Variables Journal > Variables > ... See Variables. Variables are used to store reusable design options, such as: colors, spacing, fonts, text styles, etc. They make it easier to maintain and update your entire design consistently by simply editing a Variable value.

Since Journal 3.2 we have added a new and powerful design concept called Color Schemes found in Journal > Variables > Color Schemes. This revolutionary concept will change the way you work with colors and provide much faster color switching from different schemes on various sections of your store.

Styles​

Create Styles Journal > Styles > ... See Styles. Styles in Journal are a set of multiple options that serve a design purpose, such as a Button style, Title style, Typography style, etc. Styles can be created with custom values or by using Variable values.

Styles allow you to apply consistent design rules across your website. They are globally assigned in the Journal skin in Journal > Skins > Edit > Global > Global Styles >... and throughout modules.

Examples of Styles:​

  • Button Style: A set of rules that define how all buttons look, font, color, border, shadow, etc.
  • Title Style: A set of rules that determine the appearance of page headings or module headings.
  • Typography Style: A set of rules for paragraphs and other HTML elements.
  • Module Style: There are dedicated styles for various different modules, to be applied inside that module as needed.
  • Product Styles: There are dedicated styles for product listing such as Product Grid, Product List, Product Page.

Skin​

Create Skin Journal > Skins > ... See Skins The Skin in Journal represents the global settings of the entire store. This is where you assign the various Styles, set up many other global page options, such as for the Account page, Cart and Checkout pages, etc. and also indicate the active Header and Footer modules to be used in the store.

You can create different skins with entirely different settings, styles, etc and assign them to different stores in a multi-store environment within the same Opencart admin panel.

Modules​

Create Modules Journal > Modules > ... See Modules. Modules in Journal are the content blocks you use to display different types of information on your website. Each Module has a specific function, like showing a products, menus, sliders or banners, blog posts, etc.

Modules can be duplicated and replicated as many times as you need. Unlimited modules can be created in Journal > Modules... but only those added to a layout will show up on the page.

Modules can be added to any builder interface, be that in the Page Layout builder or Mega Menu builders, etc.

Create Header Journal > Header > ... See Header. Journal comes with 4 dedicated header modules for desktop and 3 dedicated header modules for mobile.

You can create unlimited header module instances from each header module, but only one can be set as active on your store from the Skin in Journal > Skins > Edit > Header > Desktop Header > ... and for mobile in Journal > Skins > Edit > Header > Mobile Header > ...

Create Footer Journal > Footer > ... See Footer. Journal comes with a Footer builder, you can create unlimited footer modules in any shape and form via the Layout Builder interface. Simply create your desired footer structure with rows and columns and add your separately created modules in those columns.

The active Footer is assigned in Journal > Skins > Edit > Footer... Optionally you can assign a separate Footer module for mobile devices in case you need a different, simpler one.

Layouts​

Add Modules to Layouts Journal > Layouts > ... See Layouts.

  1. Access the desired page where you want to add your modules, such as Home or Product.
  2. Enable the positions where you plan to add the modules.
  3. Add Rows. Depending on the desired layout you can add one or more rows. Each row can hold one or more columns, which in turn can hold one or more modules. See Rows
  4. Add Columns. You can add one or more columns in each row. Any module may occupy a certain width (in percentage) of each row. See Columns
  5. Add Module. One or more modules may be added in the same column but usually one module per column is recommended in cases where different spacing or container styles may be required (each column has its own container options).
  6. Save and visit the storefront to see the modules on the page.