Knowledge Base Help Center
Categories
< All Topics
Print

Demo 5

Home Page

  1. Header Notice Header Notice, created in Journal > Modules > Header Notice. Assigned to layout in Journal > Layouts > Home > Special Modules – All Layouts (top right corner). For more info about the special modules please see our documentation.

Header is created in Journal > Header > Classic…. Activated in Journal > Skins > Default > Header > Desktop Header. For more information related to the Header, please read the documentation on Demo Header.

  1. Flyout Menu Flyout – Desktop, created in Journal > Modules > Flyout Menu. This module is assigned in the header, first menu item in Journal > Header > Main Menu > Main Menu – Desktop > First Menu Item > Flyout Module. Inside the layout builder in Journal > Layouts > Home > Column Left we set up an empty column with a bottom spacing applied in the column options (to match the Flyout Menu height).
  2. Mini Products Bestsellers, created in Journal > Modules > Mini Products. Assigned to layout in Journal > Layouts > Home… in the Column Left position > Row 1.
  3. Testimonials Testimonials, created in Journal > Modules > Testimonials. Assigned to layout in Journal > Layouts > Home… in the Column Left position > Row 1.
  4. Links Menu Quick Links – Top Home Page, created in Journal > Modules > Links Menu >. Assigned to layout in Journal > Layouts > Home… in the Content Top position > Row 1.
  5. Slider Slider Home, created in Journal > Modules > Slider. Assigned to layout in Journal > Layouts > Home… in the Content Top position > Row 1.
  6. Banners Banners Top Home, created in Journal > Modules > Banners. Assigned to layout in Journal > Layouts > Home… in the Content Top position > Row 1.
  7. Info Blocks Info Blocks Home, created in Journal > Modules > Info Blocks . Assigned to layout in Journal > Layouts > Home… in the Content Top position > Row 1.
  8. Icons Menu CAtegory Icons, created in Journal > Modules > Icons Menu. Assigned to layout in Journal > Layouts > Home… in the Column Right position > Row 1.
  9. Newsletter Newsletter Side Column, created in Journal > Modules > Newsletter >. Assigned to layout in Journal > Layouts > Home… in the Column Right position > Row 1.
  10. Gallery Gallery Side Column, created in Journal > Modules > Gallery. Assigned to layout in Journal > Layouts > Home… in the Column Right position > Row 1.
  11. Info Blocks Free Shipping Home Page, created in Journal > Modules > Info Blocks. Assigned to layout in Journal > Layouts > Home… in the Bottom position > Row 1.
  12. Accordion Menu Category Menu, created in Journal > Modules > Accordion Menu. Assigned to layout in Journal > Layouts > Home… in the Bottom position > Row 2.
  13. Banners 50% Off Side Column, created in Journal > Modules > Banners. Assigned to layout in Journal > Layouts > Home… in the Bottom position > Row 2.
  14. Products Products – Home Page, created in Journal > Modules > Products. Assigned to layout in Journal > Layouts > Home… in the Bottom position > Row 2.
  15. Blocks End Of Summer Promo Block, created in Journal > Modules > Blocks >. Assigned to layout in Journal > Layouts > Home… in the Bottom position > Row 3. This row uses a background image added in the row options, Background section. The row options are accessed via the small pencil button seen when hovering over the row.
  16. Title/Text Catalog Title, created in Journal > Modules > Title/Text. Assigned to layout in Journal > Layouts > Home… in the Bottom position > Row 4.
  17. Catalog Catalog Home Page, created in Journal > Modules > Catalog > . Assigned to layout in Journal > Layouts > Home… in the Bottom position > Row 4.
  18. Title/Text Our Best Selection, created in Journal > Modules > Title/Text. Assigned to layout in Journal > Layouts > Home… in the Bottom position > Row 5.
  19. Mini Products Side Products Home, created in Journal > Modules > Mini Products. Assigned to layout in Journal > Layouts > Home… in the Bottom position > Row 5.
  20. Title/Text From The Blog, created in Journal > Modules > Title/Text. Assigned to layout in Journal > Layouts > Home… in the Bottom position > Row 6.
  21. Posts Blog Posts Home, created in Journal > Modules > Blog Posts. Assigned to layout in Journal > Layouts > Home… in the Bottom position > Row 6.
  22. Title/Text Why Us Title, created in Journal > Modules > Title/Text. Assigned to layout in Journal > Layouts > Home… in the Bottom position > Row 7. This row uses a background video added in the row options, Background section. The row options are accessed via the small pencil button seen when hovering over the row.
  23. Info Blocks Info Blocks Why Us, created in Journal > Modules > Info Blocks. Assigned to layout in Journal > Layouts > Home… in the Bottom position > Row 7.
  24. Brands Brands Layout, created in Journal > Modules > Brands. Assigned to layout in Journal > Layouts > Home… in the Bottom position > Row 8.

Footer, created in Journal > Footer > Footer…. Activated in Journal > Skins > Default > Footer > Footer. For more information related to the Footer, please read the documentation on Demo Footer.

Header

Header is created in Journal > Header > Classic…. Activated in Journal > Skins > Default > Header > Desktop Header

  1. Top Menu Top Menu – Desktop, created in Journal > Header > Top Menu. Assigned to the header in Journal > Header > Classic > Edit > Top Menu > Top Menu Module. Menu Item styles are created in Journal > Styles > Menu Item…. The same menu item styles can be reused on different menu modules.
  2. Language/Currency, active when extra languages or currencies are installed in your Opencart store. These can be styles in Journal > Styles > Language/Currency… with the style applied in the header in Journal > Header > Classic > Edit > Language/Currency. For more info please see our documentation on languages and currencies.
  3. Logo, added in Journal > Skins > Edit > Header…. Additional options specific to the header are in Journal > Header > Classic > Edit > Logo…. For more information about the logo please see our documentation on the logo.
  4. Search The search style is created in Journal > Styles > Search… and applied in Journal > Header > Classic > Search. All customisable search options are found in the search style.
  5. Secondary Menu Secondary Menu – Big Icons, created in Journal > Header > Top Menu. Assigned to the header in Journal > Header > Classic > Edit > Secondary Menu > Top Menu Module. Menu Item styles are created in Journal > Styles > Menu Item…. In this case, the secondary menu uses a different style where the menu name font size is quite smaller with the icon much bigger and positioned on top.
  6. Main Menu Main Menu – Desktop, created in Journal > Header > Main Menu. Assigned to the header in Journal > Header > Classic > Edit > Main Menu > Main Menu Module. Menu Item styles are created in Journal > Styles > Menu Item…. The same menu item styles can be reused on different menu modules.
  7. Main Menu Login – Whishlist – Compare, created in Journal > Header > Main Menu. Assigned to the header in Journal > Header > Classic > Edit > Main Menu > Main Menu 2 > Main Menu 2 Module. Menu Item styles are created in Journal > Styles > Menu Item…. The same menu item styles can be reused on different menu modules.
  8. Cart The cart style is created in Journal > Styles > Cart… and applied in Journal > Header > Classic > Cart. The cart is comprised of two styles, Cart and Cart Content. All customisable cart options are found in these styles.

Main Menu

The Main Menu is created in Journal > Header > Main Menu and assigned to the header in Journal > Header > Classic > Edit > Main Menu > Main Menu Module

  1. Main Menu Item Shop by Category. created in Journal > Header > Main Menu > Main Menu – Desktop . This menu item has a dropdown type of Flyout. The Flyout Menu module is separately created in Journal > Modules > Flyout Menu…in this case Flyout – Desktop.For more info on how this type of dropdown works see the Main Menu documentation.

    1.1. Flyout Menu Item All Categories. Custom menu item of type Mega Menu created in Journal > Modules > Flyout Menu > [Active Module] > …

    1.1.1. Links Menu Top Categories Flyout Menu created in Journal > Modules > Links Menu…

    1.1.2. Catalog Menu – No Image created in Journal > Modules > Catalog…

    1.1.3. Row Background Image. This row has a background image added in the row options, the small pencil button seen when hovering over the row. The first two columns width is set to summarise 80% to leave some empty space on the right so the row background image is visible.

1.2. Flyout Menu Item Shop by Brand. Custom menu item of type Mega Menu created in Journal > Modules > Flyout Menu > [Active Module] > …

1.2.1. Links Menu Top Brands Flyout Menu created in Journal > Modules > Links Menu…

1.2.2. Catalog Catalog Brands created in Journal > Modules > Catalog…

1.2.3. Row Background Image. This row has a background image added in the row options, the small pencil button seen when hovering over the row. The first two columns width is set to summarise 80% to leave some empty space on the right so the row background image is visible.

1.3. Flyout Menu Item Custom Links. Custom menu item of type Mega Menu created in Journal > Modules > Flyout Menu > [Active Module] > …

1.3.1. Links Menu Custom Links – Top Categories created in Journal > Modules > Links Menu…

1.3.2. Links Menu Custom Links – Top Brands created in Journal > Modules > Links Menu…

1.3.3. Links Menu Fashion created in Journal > Modules > Links Menu…

1.3.4. Links Menu Beauty created in Journal > Modules > Links Menu…

1.3.5. Banners Menu Banners created in Journal > Modules > Banners…

1.3.6. Links Menu Custom Links Horizontal created in Journal > Modules > Links Menu…

1.4. Flyout Menu Item Multilevel. Custom menu item of type Dropdown created in Journal > Modules > Flyout Menu > [Active Module] > … For more info on how this type of dropdown works see the Main Menu documentation.

1.5. Flyout Menu Item Special Deals. Custom menu item of type Mega Menu created in Journal > Modules > Flyout Menu > [Active Module] > …

1.5.1. Banners Specials Banner Menu created in Journal > Modules > Banners…

1.5.2. Products Specials Menu created in Journal > Modules > Products…

1.6. Flyout Menu Item See All Products. Custom menu item of type None created in Journal > Modules > Flyout Menu > [Active Module] > …

  1. Main Menu Item Specials, created in Journal > Header > Main Menu > Main Menu – Desktop . This menu item has a dropdown type of None.
  2. Main Menu Item Dropdown, created in Journal > Header > Main Menu > Main Menu – Desktop . This menu item has a dropdown type of Dropdown. For more info on how this type of dropdown works see the Main Menu documentation.
  1. Main Menu Item Mega Menu, created in Journal > Header > Main Menu > Main Menu – Desktop . This menu item has a dropdown type of Mega Menu. For more info on how this type of dropdown works see the Main Menu documentation.

    4.1. Blocks Main Menu Block Custom Menus, created in Journal > Modules > Blocks…

    4.2. Catalog Menu – No Image, created in Journal > Modules > Banners…

  1. Main Menu Item Full Width, created in Journal > Header > Main Menu > Main Menu – Desktop . This menu item has a dropdown type of Mega Menu. For more info on how this type of dropdown works see the Main Menu documentation.

    5.1. Catalog Catalog Right Image, created in Journal > Modules > Catalog…

    5.2. Banners Fashion Sale Menu, created in Journal > Modules > Banners…

This second Main Menu is created in Journal > Header > Main Menu and assigned to the header in Journal > Header > Classic > Edit > Main Menu 2 > Main Menu 2 Module

  1. Main Menu Item Login – guest, created in Journal > Header > Main Menu > Login – Wishlist – Compare . This menu item has a dropdown type of Dropdown. For more info on how this type of dropdown works see the Main Menu documentation.
  2. Main Menu Item Whishlist, created in Journal > Header > Main Menu > Login – Wishlist – Compare . This menu item has a dropdown type of None.
  3. Main Menu Item Compare, created in Journal > Header > Main Menu > Login – Wishlist – Compare . This menu item has a dropdown type of None.

Footer

  1. Footer is created in Journal > Footer > Footer… and it is activated in Journal > Skins > Default > Footer > Footer.

    25a. Links Menu Footer – Custom Links, created in Journal > Modules > Links Menu >. Activated in Journal > Footer > Edit > Builder > Row1.

    25b. Links Menu Footer – My Account, created in Journal > Modules > Links Menu >. Activated in Journal > Footer > Edit > Builder > Row1.

    25c. Links Menu Footer – Customer Service, created in Journal > Modules > Links Menu >. Activated in Journal > Footer > Edit > Builder > Row1.

    25d. Mini Posts Footer Blog Articles, created in Journal > Modules > Mini Posts. Activated in Journal > Footer > Edit > Builder > Row 1.

    25e. Icons Menu Social Icons Footer, created in Journal > Modules > Icons Menu. Activated in Journal > Footer > Edit > Builder > Row 2.

    25f. Links Menu Footer – Copyright, created in Journal > Modules > Links Menu >_Activated in _Journal > Footer > Edit > Builder > Row2.

    25g. Links Menu Footer – Payments, created in Journal > Modules > Links Menu >_Activated in _Journal > Footer > Edit > Builder > Row2.

    25h. Newsletter Newsletter Footer, created in Journal > Modules > Newsletter >. Activated in Journal > Footer > Edit > Builder > Row2.

Product Page

  1. Header Notice Header Notice, created in Journal > Modules > Header Notice. Assigned to layout in Journal > Layouts > Home > Special Modules – All Layouts (top right corner). For more info about the special modules please see our documentation.

Header is created in Journal > Header > Classic…. Activated in Journal > Skins > Default > Header > Desktop Header. For more information related to the Header, please read the documentation on Demo Header.

  1. Breadcrumbs. These can be styled in Journal > Styles > Breadcrumbs > [Active Style]… Breadcrumbs style are added globally in Journal > Skins > Edit > Global > Global Styles > Breadcrumbs.
  2. Page Title. Title styles are created in Journal > Styles > Title > [Active Style] (Page Title Top in this case)…. The Page Title style is added globally in Journal > Skins > Edit > Global > Global Styles > Titles > Page Title > Title Style…. Additional options for the product page title are available in Journal > Styles > Product Page > [Active Style] > General > Page Title.
  3. Additional Images. These can be styled in Journal > Styles > Product Page > Product Image > Additional Images…
  4. Product Image. This can be styled in Journal > Styles > Product Page > Product Image… You can handle the main image container width from Journal > Styles > Product Page > [Active Style] > General > Page Split Ratio.

    4a. Product Labels New, created in Journal > Product Extras > Product Labels. Styles can be created in Journal > Styles > Product Label > … and applied in each label module.

    4b. Product Labels Hot, created in Journal > Product Extras > Product Labels. Styles can be created in Journal > Styles > Product Label > … and applied in each label module.

  1. Info Blocks Free Shipping Qualifier, created in Journal > Modules > Info Blocks…. Assigned in Journal > Product Extras > Extra Modules > Free Shipping Qualifier in Row 1.
  2. Product Tabs, created in Journal > Product Extras > Product Tabs. Please read the documentation on Product Tabs.

    6a. Collapse Content. This feature can be controlled from the tab module, in this case in Journal > Product Extras > Product Tabs > [Description] > Content > Collapse Content. Additional global styles for this feature are found in Journal > Skins > Edit > Global > Collapse Content.

  1. Products Sold. These can be styled in Journal > Styles > Product Page > [Active Style] > Product Details > Stats > Sold – Views…
  2. Stock. This can be styled in Journal > Styles > Product Page > [Active Style] > Product Details > Stats > Stock…
  3. Model. This can be styled in Journal > Styles > Product Page > [Active Style] > Product Details > Stats > Other Stats…
  4. Brand. This can be styled in Journal > Styles > Product Page > [Active Style] > Product Details > Stats > Brand…
  5. Rating. This can be styled in Journal > Styles > Product Page > [Active Style] > Product Details > Reviews…
  6. Price. These can be styled in Journal > Styles > Product Page > [Active Style] > Product Details > Price Group…
  7. Quantity, styled in Journal > Styles > Product Page > [Active Style] > Buttons > Quantity. This uses a Stepper style created in Journal > Styles > Stepper > …
  8. Add to Cart, styled in Journal > Styles > Product Page > [Active Style] > Buttons > Add to Cart…. This uses Button style created in Journal > Styles > Button > …
  9. Buy Now, created in Journal > Product Extras > Extra Button. This can be styled in Journal > Styles > Product Page > Buttons > Extra Button…. It uses a Button style created in Journal > Styles > Button > …. For more info on how the Extra Buttons work please see the documentation on the Extra Buttons. Also check out the Product Assignment docs to understand the concept of how these are assigned to various products.
  10. WishList, styled in Journal > Styles > Product Page > [Active Style] > Buttons > Wishlist / Compare > Wishlist…. This uses Button style created in Journal > Styles > Button > …
  11. Compare, styled in Journal > Styles > Product Page > [Active Style] > Buttons > Wishlist / Compare > Compare…. This uses Button style created in Journal > Styles > Button > …
  12. Button Request Info, created in Journal > Modules > Button. Assigned in Journal > Product Extras > Extra Modules > [Active module] (Request Info – Size Guide Buttons in this case)… in Row 1. It uses a Button style created in Journal > Styles > Button > ….
  13. Button Size Chart, created in Journal > Modules > Button. Assigned in Journal > Product Extras > Extra Modules > [Active module] (Request Info – Size Guide Buttons in this case)… in Row 1. It uses a Button style created in Journal > Styles > Button > ….
  14. Blocks Product Page Badges, created in Journal > Modules > Blocks. Assigned in Journal > Product Extras > Extra Modules > [Active module] (Badges in this case)… in Row 1.
  15. Info Blocks Vertical Blocks, created in Journal > Modules > Info Blocks. Assigned to layout in Journal > Layouts > Product… in the Column Right position > Row 1.
  16. Products Related – Also Bought – Side Column, created in Journal > Modules > Products. Assigned to layout in Journal > Layouts > Product… in the Column Right position > Row 1.
  17. Blocks Share Plugin Inline AddThis, created in Journal > Modules > Blocks…. Assigned in Journal > Product Extras > Extra Modules > Share Buttons in Row 1.
  18. Product Tabs, created in Journal > Product Extras > Product Tabs. Please read the documentation on Product Tabs.
  19. Tags. These can be styled in Journal > Styles > Product Page > Product Details > Tags…
  20. Products We also recommend (Same category), created in Journal > Modules > Products. Assigned to layout in Journal > Layouts > Product… in the Bottom position > Row 1.
  21. Products From the same brand, created in Journal > Modules > Products. Assigned to layout in Journal > Layouts > Product… in the Bottom position > Row 1.

Footer, created in Journal > Footer > Footer…. Activated in Journal > Skins > Default > Footer > Footer. For more information related to the Footer, please read the documentation on Demo Footer.

Previous Demo 4
Next Demo 6
Table of Contents