Knowledge Base Help Center
Categories
< All Topics
Print

Demo 4

Home Page

Header is created in Journal > Header > Compact… and it is activated in Journal > Skins > Default > Header > Desktop Header. For more information related to the Header, please read the documentation on Demo Header.

  1. Slider Slider Top Home, created in Journal > Modules > Slider. Assigned to layout in Journal > Layouts > Home… in the Top position > Row 1.
  2. Banners Home Banners, created in Journal > Modules > Banners. Assigned to layout in Journal > Layouts > Home… in the Top position > Row 2.
  3. Title/Text New Arrivals Title, created in Journal > Modules > Title/Text. Assigned to layout in Journal > Layouts > Home… in the Top position > Row 3.
  4. Button See all products, created in Journal > Modules > Button. Assigned to layout in Journal > Layouts > Home… in the Top position > Row 3.
  5. Products Latest – Home Page, created in Journal > Modules > Products. Assigned to layout in Journal > Layouts > Home… in the Top position > Row 3.
  6. Info Blocks Free Shipping Home Page, created in Journal > Modules > Info Blocks . Assigned to layout in Journal > Layouts > Home… in the Top position > Row 4.
  7. Products Latest Deals, created in Journal > Modules > Products. Assigned to layout in Journal > Layouts > Home… in the Top position > Row 5.
  8. Title/Text Latest Deals Title, created in Journal > Modules > Title/Text. Assigned to layout in Journal > Layouts > Home… in the Top position > Row 5.
  9. Button See all deals, created in Journal > Modules > Button. Assigned to layout in Journal > Layouts > Home… in the Top position > Row 5.
  10. Title/Text The Bags Collection, created in Journal > Modules > Title/Text. Assigned to layout in Journal > Layouts > Home… in the Top position > Row 6.
  11. Button Shop Bags, created in Journal > Modules > Button. Assigned to layout in Journal > Layouts > Home… in the Top position > Row 6.
  12. Slider Bags Video, created in Journal > Modules > Slider. Assigned to layout in Journal > Layouts > Home… in the Top position > Row 6.
  13. Posts Blog Posts Home, created in Journal > Modules > Blog Posts. Assigned to layout in Journal > Layouts > Home… in the Bottom position > Row 1.
  14. Gallery Gallery, created in Journal > Modules > Gallery. Assigned to layout in Journal > Layouts > Home… in the Bottom position > Row 1.
  15. Testimonials Testimonials, created in Journal > Modules > Testimonials. Assigned to layout in Journal > Layouts > Home… in the Bottom position > Row 2.
  16. Row Background Image. This row has a fixed background image added in the row options, Journal > Layouts > Home… in the Bottom position > Row 2 > Row Options > Background > Main Background. The row options are accessed via the small pencil button seen when hovering over the row.
  17. Brands Brands Layout, created in Journal > Modules > Brands. Assigned to layout in Journal > Layouts > Home… in the Bottom position > Row 3.

Footer is created in Journal > Footer > Footer… and it is 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 > Compact… and it is 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 > Compact > 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 > Compact > Edit > Language/Currency. For more info please see our documentation on languages and currencies.
  3. Main Menu Main Menu – Desktop, created in Journal > Header > Main Menu. Assigned to the header in Journal > Header > Compact > 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.
  4. Logo, added in Journal > Skins > Edit > Header…. Additional options specific to the header are in Journal > Header > Compact > Edit > Logo…. For more information about the logo please see our documentation on the logo.
  5. Secondary Menu Secondary Menu Large Icons, created in Journal > Header > Top Menu. Assigned to the header in Journal > Header > Compact > 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 icons are much bigger.
  6. Search The search style is created in Journal > Styles > Search… and applied in Journal > Header > Compact > Search. All customisable search options are found in the search style.
  7. Cart The cart style is created in Journal > Styles > Cart > Cart Compact… and applied in Journal > Header > Compact > 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 > Compact > Edit > Main Menu > Main Menu Module

  1. Main Menu Item Shop, 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.

    1.1. Catalog Catalog Categories, created in Journal > Modules > Catalog…

    1.2. Banners Menu Banners, created in Journal > Modules > Banners…

    1.3. Banners Fashion Banner, created in Journal > Modules > Banners…

  • Main Menu Item Blog, created in Journal > Header > Main Menu > Main Menu – Desktop . This menu item has a dropdown type of None. For more info on how this type of dropdown works see the Main Menu documentation.
  • Main Menu Item Sign In – Guest, 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.

Footer

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

    18a. Logo Block Footer Logo Block Footer, created in Journal > Modules > Blocks. Activated in Journal > Footer > Edit > Builder > Row 1.

    18b. Icons Menu Social Icons, created in Journal > Modules > Icons Menu. Activated in Journal > Footer > Edit > Builder > Row 1.

    18c. Links Menu Footer – About Us, created in Journal > Modules > Links Menu >. Activated in Journal > Footer > Edit > Builder > Row2.

    18d. Links Menu Footer – Customer Service, created in Journal > Modules > Links Menu >. Activated in Journal > Footer > Edit > Builder > Row2.

    18e. Links Menu Footer – My Account, created in Journal > Modules > Links Menu >. Activated in Journal > Footer > Edit > Builder > Row2.

    18f. Newsletter Newsletter Footer, created in Journal > Modules > Newsletter >. Activated in Journal > Footer > Edit > Builder > Row2.

    18g. Links Menu Footer – Copyright, created in Journal > Modules > Links Menu >_Activated in _Journal > Footer > Edit > Builder > Row3.

    18h. Links Menu Footer – Payments, created in Journal > Modules > Links Menu >_Activated in _Journal > Footer > Edit > Builder > Row3.

    Product Page

Header is created in Journal > Header > Compact… and it is 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 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 Sale %, 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 Custom Labels, created in Journal > Product Extras > Product Labels. Styles can be created in Journal > Styles > Product Label > … and applied in each label module.

  5. Countdown. The Countdown style is created in Journal > Styles > Countdown > [Active Style] (Default in this case)…. The Countdown style is added globally in Journal > Skins > Edit > Countdown >… where language styles are also set. Additional options for the product page countdown are available in Journal > Styles > Product Page > [Active Style] > Product Details > Countdown > Countdown Style….
  6. Info Blocks Award Winner, created in Journal > Modules > Info Blocks. Assigned in Journal > Product Extras > Extra Modules > [Active module] (Award Winner Block in this case)… in Row 1.
  7. Blocks Description, Specs – Desktop Tabs, created in Journal > Modules > Blocks. Assigned in Journal > Product Extras > Extra Modules > [Active module] (Description, Specs, Reviews + Size Chart in this case)… in Row 1.

    7a. Collapse Content Description, Specs – Desktop Tabs, created in Journal > Modules > Blocks > [Active module] (Description, Specs, Reviews + Size Chart in this case) > [Description] > Block Content > Collapse Content . Additional global styles for this feature are found in Journal > Skins > Edit > Global > Collapse Content.

  8. Button Size Chart, created in Journal > Modules > Button. Assigned in Journal > Product Extras > Extra Modules > [Active module] (Description, Specs, Reviews + Size Chart in this case)… in Row 1. It uses a Button style created in Journal > Styles > Button > ….
  9. Button Request Info, created in Journal > Modules > Button. Assigned in Journal > Product Extras > Extra Modules > [Active module] (Description, Specs, Reviews + Size Chart in this case)… in Row 1. It uses a Button style created in Journal > Styles > Button > ….
  10. Rating. This can be styled in Journal > Styles > Product Page > [Active Style] > Product Details > Reviews…
  11. Price. These can be styled in Journal > Styles > Product Page > [Active Style] > Product Details > Price Group…
  12. Options. Options are created in Opencart > Catalog > Options. These can be styled in Journal > Styles > Product Page > [Active Style] > Product Details > Options where a Form style can be used to style the inputs. Additional customizable options are in the Push Options sub-section of the same page.
  13. Quantity, styled in Journal > Styles > Product Page > [Active Style] > Buttons > Quantity. This uses a Stepper style created in Journal > Styles > Stepper > …
  14. Add to Cart, styled in Journal > Styles > Product Page > [Active Style] > Buttons > Add to Cart…. This uses Button style created in Journal > Styles > Button > …
  15. 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.
  16. Wishlist, styled in Journal > Styles > Product Page > [Active Style] > Buttons > Wishlist / Compare > Wishlist…. This uses Button style created in Journal > Styles > Button > …
  17. Compare, styled in Journal > Styles > Product Page > [Active Style] > Buttons > Wishlist / Compare > Compare…. This uses Button style created in Journal > Styles > Button > …
  18. Sold – Views. These can be styled in Journal > Styles > Product Page > [Active Style] > Product Details > Stats > Sold – Views…
  19. Stock. This can be styled in Journal > Styles > Product Page > [Active Style] > Product Details > Stats > Stock…
  20. Model. This can be styled in Journal > Styles > Product Page > [Active Style] > Product Details > Stats > Other Stats…
  21. Brand. This can be styled in Journal > Styles > Product Page > [Active Style] > Product Details > Stats > Brand…
  22. Mini Products Same Brand / Category, created in Journal > Modules > Mini Products. Assigned in Journal > Product Extras > Extra Modules > Same Brand / Category… in Row 1.
  23. Blocks Share Plugin Inline AddThis, created in Journal > Modules > Blocks…. Assigned in Journal > Product Extras > Extra Modules > Share Inline in Row 1.
  24. Info Blocks Product Page Info Blocks, created in Journal > Modules > Info Blocks…. Assigned in Journal > Product Extras > Extra Modules > Info Blocks in Row 1.
  25. Tags. These can be styled in Journal > Styles > Product Page > Product Details > Tags…
  26. Products Related – Also Bough Bottom, created in Journal > Modules > Products. Assigned to layout in Journal > Layouts > Product… in the Bottom position > Row 1.

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

Previous Demo 3
Next Demo 5
Table of Contents