|
Note: Theme modification involves any change to the default values in the HTML or CSS of any theme or widget. Support can direct you to the correct page to make changes or to reset the widget, page HTML or CSS to its default value. This will undo any customization that may be in place. Before you create or modify a theme using HTML and CSS it is suggested to have a backup handy.
While theme modification is outside what support is allowed to assist with, if you need assistance with making modification to the theme, our implementation department is available to make these modification at an hour rate. If the service is ever needed please let us know and we will get that process started for you. Or check out our new Theme Store to find a theme that suits your needs.
|
Sometimes a certain category or product page needs to look different than other pages on a store. There are many reasons why you would want to change the display of a particular page. Reasons such as a special event, displaying alternate information, or even just for funsies.
Think of layout as a theme level page with different HTML and settings. For example, you have a default category layout that all your categories display with. You can create a different HTML layout and apply it to a category. The benefit is that this category can display different.
For example, we can remove the subcategory display from the layout. After applying the layout to a category, you will no longer have the subcategories displaying on the category page.
Section 1 - Setting up your alternate layout.
Go to the Theme Settings page for the page type you wish to change. For example the Product Details page.
In the More Actions menu there is an action called "Layouts".
Clicking this will open an overlay with a list of all the layouts for this page.
The default layout is indicated. To work on a different layout, click the name. The page will refresh and the settings/HTML editor will now apply to that layout.
Tip: The CSS editor will still apply to all layouts. The CSS editor for a page extracts from the main stylesheet to allow for quick editing.
To add a new layout Click the New button. To edit an already created layout, click the layout name or the layout path.
The name will shown in the interface and the filename is what it will save as. Do not include .html in the filename as it is added automatically.
You can achieve alternate styling by wrapping the HTML contents of the page in a div with a different class. Then target this new class with CSS.
NOTE: Any html needs to go within the <ac:pagelayout> tags. Anything outside of this other than <ac:templateoverridearea> will be removed.
Section 2 - Applying this layout to specific pages.
All Products, Categories, Content Pages have Layout/Template Picker control on the page.
For products go to the Product Editor and go to the "Theme" tab.
For categories go to the Category Editor and it is at the bottom of the page.
For content pages it is at the bottom of the General Tab.
You are only able to select EITHER a Layout OR a Template for the page.