Change Layout

From Phoenix Cart User Guide
Revision as of 11:38, 27 October 2019 by PeterRobert (talk | contribs)

<historylink type="back">🠈 Back</historylink> 🠉 SET UP SHOP


Phoenix looks great as it is but there are many easy ways to change the default layout.


Navigation Bar

  • From admin go to Modules → Content
  • Click Navigation Bar in the list to select it.
  • Click Edit
  • Make a note of the default settings so they can be changed back to default if necessary.
  • Choose a colour option in Background Colour Scheme.
  • Choose an option for Link Colour Scheme
  • Choose an option for Placement, Placement Offset and Collapse
  • Have a play with these options and have a look on the webpage to see the results you require.

Box Modules

Box Modules that currently show in the side columns of the webpage are installed by default.

From admin go to Modules → Boxes to see this:

Modulesboxes1.png

Module Boxes can be set to show on either the left or right column or be disabled or removed so they do not show.

  • Click on a module in the list to select it.

To change the column where the box displays:

  • Click Edit
  • Set Column Placement to either Left Column or Right Column.
  • Click Save

To disable:

  • Click Edit
  • Set Enable...Module to False
  • Click Save

To remove:

  • Click Remove Module

Alternatively, more Box Modules can be installed.

  • Click Install Module - the number shown next to the button indicates how many more modules are available.
  • Click on a module in the list to select it.
  • Click Install Module
  • Click Edit
  • Set Column Placement to either Left Column or Right Column.
  • Enter a Sort Order value to sort the boxes displayed. Do not leave 0 as the Sort Order on modules as it can cause problems.

Page Width

Again, Phoenix looks great as it is but the page width can be changed is desired.

From admin go to Configuration → Bootstrap Setup

  • Click Bootstrap Content
  • Click Edit to see this:

As indicated in the edit options, changing the setting from 8 will reduce the width of the page content whilst increasing the width of the Module Boxes.

  • Click Bootstrap Container
  • Click Edit to see this:

If all Module Boxes have been removed, the webpage will display the full width of the screen.

Then changing the setting from container-fluid to container will reduce the webpage width to a central display with side margins. This change will only be effective if all Module Boxes have been removed.

Note that if all Module Boxes have been removed an alternative module for displaying Categories (not included with Phoenix) would need to be installed if displaying Categories is desired - it would be advised.


Product Listing

From admin go to Configuration → Product Listing to see this:

Productlisting.png

These are the settings for the display of products within a category.

So, again, Phoenix looks great as it is and so there is little reason to change the defaults here.

If you do have a play, ensure you note the defaults so they can be changed back again. The values for the settings Products In Each Row change how many products are shown per row across the screen width for different device screen sizes from tablets SM to desk top monitors XL

The values for Sort Option: enable/disable the menu items that show in the Sort By drop down menu shown on the webpage.

There is also an option to enable/disable the Display Category/Manufacturer Filter - note that Manufacturers could also be used as a secondary method of categorising products.

There is also an option for the Location of Prev/Next Navigation Bar 1-top, 2-bottom, 3-both - note 0 to disable.

Tip: This whole Sort By/Filter section can be disabled by entering the following in user.css

div.alert-filters { display: none !important; }

Product Images

From admin go to Modules → Header Tags → Colorbox Script

If multiple images have been uploaded for a product, the way they are displayed on the product page can be changed.

Colorbox.png

As indicated in the module settings, the number of images per row can be changed by changing the numeric setting.

For example, the default value of 155 shows one large image and two rows of 5 small thumbnails.



🠈 Previous Step Next Step 🠊


Construction.png
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