Difference between revisions of "Change Layout"
PeterRobert (talk | contribs) |
PeterRobert (talk | contribs) |
||
| (9 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | < | + | <div class="btn btn-grey btn-back">{{#fas:arrow-left}} Back</div> <div class="btn btn-grey btn-setup-shop">{{#fas:play-square}} [[Set_Up_Store|Set Up Store]]</div> |
| − | < | ||
<hr> | <hr> | ||
| + | __TOC__ | ||
| + | __FORCETOC__ | ||
| + | CE Phoenix Cart looks great as it is but there are many easy ways to change the default layout as desired. | ||
| + | Layout determines how the elements of the website are arranged and displayed on different devices. | ||
| − | + | <!-- | |
| − | |||
| − | |||
<big>'''Navigation Bar'''</big> | <big>'''Navigation Bar'''</big> | ||
| Line 21: | Line 22: | ||
<hr> | <hr> | ||
| − | |||
<big>'''Box Modules'''</big> | <big>'''Box Modules'''</big> | ||
| Line 62: | Line 62: | ||
<hr> | <hr> | ||
| + | --> | ||
| Line 142: | Line 143: | ||
<big>'''Product Images'''</big> | <big>'''Product Images'''</big> | ||
| − | From admin go to [[File: | + | From admin go to [[File:adminnavbarlayout.png|link=]] '''Layout Modules → Product Info''' |
Click on '''Gallery''' in the '''Modules''' list to edit. | Click on '''Gallery''' in the '''Modules''' list to edit. | ||
| Line 152: | Line 153: | ||
<hr> | <hr> | ||
| − | <span class="btn-grey">[[ | + | <span class="btn-grey btn-prev">{{#fas:arrow-left}} [[Change_Style_and_Color|Previous Step]]</span> |
| − | <span class="btn-grey">[[How_to_Install_Modules|Next Step | + | <span class="btn-grey btn-next">[[How_to_Install_Modules|Next Step]] {{#fas:arrow-right}}</span> |
<hr> | <hr> | ||
| − | {{ | + | {{Forum}} |
| + | {{Pro}} | ||
{{Contribute}} | {{Contribute}} | ||
Latest revision as of 06:36, 1 November 2024
CE Phoenix Cart looks great as it is but there are many easy ways to change the default layout as desired.
Layout determines how the elements of the website are arranged and displayed on different devices.
Page Width
Phoenix looks great as it is but the page width can be changed if 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 side Box Modules.
- Click Bootstrap Container
- Click Edit to see this:
CE Phoenix is set with container-fluid as default which displays the shop 100% of the device screen width like this:
Change the setting from container-fluid to container will reduce the webpage width according to the device used to view it as per this table.
For example, changing the setting to container and removing the side Box Modules gives this result.
The difference in display is your own preference - whichever look you prefer - there are fans of both.
Note that if all Module Boxes have been removed, there are alternatives to the box modules that can be displayed elsewhere e.g. in the navigation bar or the footer but an alternative module for displaying Categories is not included with Phoenix.
Product Listing
From admin go to Configuration → Product Listing to see this:
These are the settings for the display of products e.g. within a category.
So, again, CE Phoenix looks great as it is but you can 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 Per 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 
Layout Modules → Product Info
Click on Gallery in the Modules list to edit.
If multiple images have been uploaded for a product, the way they are displayed on the product page can be changed.
As indicated in the Thumbnail Width module settings, the number of images per row can be changed by changing the numeric setting.
Many Addons and Extensions available in the CE Phoenix Cart Addons Library
If help is needed, support is available in the CE Phoenix Cart Support Forum
Phoenix Cart User Guide, like CE Phoenix Cart, is free to use but is maintained by unpaid volunteers.
All other content is the reserved Intellectual Property and Copyright of phoenixcart.org
