Layout

Back

Administration

---

From admin go to Modules → Layout - you will see this:

• This list shows all the layout modules installed in the shop by default.
• They are sorted into Groups according to on which page they display.
• They are also sorted by the Sort Order in which they are displayed on the page in relation to each other.
• The Active column shows if they are enabled (currently displayed) on the page - green if they are enabled - red if they are disabled.

---

• Most groups are self explanatory.
  • product_info refers to a page that shows a single product.

---

• Click the item in the Modules column list to select it.
• Click Edit to open the edit panel.
• Change the setting for Enable... Module to False.
• Click Save
• The Active column button will change from green to red to show it has been disabled.

---

• The display width of most content modules can be changed.
  • Click the item in the Modules column list to select it.
  • Click Edit to open the edit panel.
  • Change the Content Width setting according to the instructions shown.
  • Click Save

For more information about using Bootstrap column width classes like, for example, col-sm-6, see - Bootstrap Grid

---

• To install additional content modules:
  • Click Install Module shown top right of screen - the number shown next to it indicates the number of modules available.
  • Click a module to use from the list.
  • Click Install Module
  • Click Edit
  • Choose a Content Width setting according to the instructions shown.
  • Enter a Sort Order value to order the display of the module in relation to the other modules in the same group.
    • Do not leave 0 as the Sort Order on modules as it can cause problems.
    • You can give it any number but note and follow the convention used as default which is helpful.
  • Click Save

---

A Layout Module can be positioned anywhere on the page using the sort order and content width.

The Product Info Layout Module (π Modular product_info) is with other content modules - from admin, go to Modules → Content and scroll down to see this:

The Layout Module contains other modules.

These modules can then be positioned anywhere within the Layout Module. This is achieved by assigning each module to a group and then, using the sort order and content width, the module can be positioned within that group.

The groups are displayed in relation to each other on the page as illustrated in the graphic like this:

This allows the shop owner to display the modules on the page in countless variations.

For example, in the default installation, the product page for Grapefruit shows this:

Look at Modules → Content to see how the page displays the modules.

• Name, with the lowest sort order of 40 shows first with a content width of 9 - 75% of page width (note that page width here refers to the product information area that is between the side boxes on the left and right).
• Price, with a sort order of 50 shows next with a content width of 3 - 25% of page width (note that the total width of all modules displayed in one row must not exceed 12 - 100% of page width).
• Review Stars/Link, with a sort order of 55 shows next on a new row (because the total width of the previous two modules adds to 12 - 100% of page width) with a content width of 12 - 100% of page width.
• π Modular product_info, with a sort order of 59 shows next on a new row (because the total width of the previous module is 12 - 100% of page width) with a content width of 12 - 100% of page width. This module contains other modules shown highlighted in grey in the screenshot.
• Description, with a sort order of 60 shows next on a new row (because the total width of the previous module is 12 - 100% of page width) with a content width of 12 - 100% of page width.
• Date Available, with a sort order of 70 shows next on a new row (because the total width of the previous module is 12 - 100% of page width) with a content width of 12 - 100% of page width.
• What our customers say..., with a sort order of 120 shows next on a new row (because the total width of the previous module is 12 - 100% of page width) with a content width of 6 - 50% of page width.

Look at Layout Modules → Product Info to see how the page displays the modules contained in the Product Info Layout Module.

• Gallery, assigned to Module Display Group B (which has a set page width of 7 - 58.33% of page width) with a sort order of 200 shows first in B with a content width of 12 - 100% of Module Display Group B width.
• Image Disclaimer, assigned to Module Display Group B with a sort order of 230 shows next in B on a new row (because the total width of the previous module is 12 - Module Display Group B width) with a content width of 12 - 100% of Module Display Group B width.
• Options & Attributes, assigned to Module Display Group C (which has a set page width of 5 - 41.66% of page width) with a sort order of 310 shows first in C with a content width of 12 - 100% of Module Display Group C width.
• Buy Button, assigned to Module Display Group C (which has a set page width of 5 - 41.66% of page width) with a sort order of 320 shows next in C on a new row (because the total width of the previous module is 12 - Module Display Group C width) with a content width of 12 - 100% of Module Display Group C width.

Any Module Display Group that has no modules assigned to it does not display.

---

Tip: If you don't want to show a module, you can either disable (hide) it or remove (uninstall) it.

When playing with the design, it's a good option to disable it, as it saves the settings it has been given, meaning it will be exactly the same as it was if you choose to enable it again later.

However, this also means that it is loaded completely with every page, which in extreme circumstances might slow down your website

If you are sure you don't want to use a module, it is better to remove it than to hide it.

---

This page is in progress
Please visit again soon for additions and changes

Phoenix Cart User Guide, like CE Phoenix Cart, is free to use but is maintained by unpaid volunteers.

Code references are licensed under a Commons Attribution-NonCommercial-ShareAlike 2.0 UK: England & Wales License.
All other content is the reserved Intellectual Property and Copyright of phoenixcart.org